Patient Ontology Graph

A holographic 3D ontology of a hospital — Hospital → Departments → Patients. Click a patient node and the camera flies in while a full clinical dossier slides open across eight dimensions: demographics, background, medications, history, allergies, vitals & labs, care team, and encounters. Every patient is synthetic and fictional.

Three.js WebGL No build step Healthcare ontology Synthetic data

▶ Launch live demo How it works

Background

🛠️ What is the Patient Ontology Graph?

An ontology is a map of entities and how they relate. This mini renders a hospital's data ontology as a living 3D hologram: a central hospital node, a ring of departments (Cardiology, Oncology, Critical Care, Neurology, Pulmonology, Orthopedics), and clusters of patient nodes branching off each one. Status rings tint every patient — green (stable), gold (under observation), pink (critical).

Click any node to fly the camera in. Patient nodes open a full clinical dossier; department and hospital nodes explain what they represent and how many patients they connect to. It runs entirely in the browser with Three.js — no backend, no build step.

The flow

01OrbitDrag to rotate the hologram, scroll to zoom the whole graph.

02Click a nodeThe camera flies in and locks onto the entity you picked.

03Deep-diveA patient opens a dossier across all 8 clinical dimensions.

04Filter & resetIsolate a department from the legend, or reset the view.

Where it shines

🎯 Use cases

🧠

Explaining a data modelShow stakeholders how Hospital → Department → Patient relationships connect, visually.

🩺

EHR / 360° patient viewA pattern for a single-pane patient summary spanning meds, labs, history, and care team.

🕸️

Graph & knowledge demosA friendly template for any node-edge ontology — swap the data for your own domain.

🎓

Teaching & onboardingSynthetic, safe data makes it perfect for training without touching real PHI.

Be honest

⚖️ Pros, cons & limitations

✓ Pros

Pure front-end — open index.html and it runs.
Click-to-zoom fly-in makes spatial relationships intuitive.
Eight clinical dimensions per patient in one dossier.
Synthetic data — zero PHI risk.

✕ Cons / trade-offs

Data is hard-coded in the JS, not fetched from a real source.
WebGL is required; very old browsers won't render it.
Designed as a visual demo, not a production EHR.

△ Limitations

Not a medical device; not clinical advice.
Layout is tuned for ~15 patients across 6 departments.
No persistence, auth, or accessibility audit beyond the basics.

Build it

📦 Get the code

It's a static Three.js app — no install, no build. Drop the folder on any static host (or open it locally) and it just runs.

run locally

# the mini is three files: index.html, css/styles.css, js/main.js
# Three.js loads from a CDN via an import map — no npm needed.

# serve the folder (any static server works)
python -m http.server 8000
# then open http://localhost:8000/index.html

Tip: because it uses ES module imports, open it through a server (not a file:// path) so the import map resolves.

The graph is built from a tiny ontology: a hospital core, a ring of departments, and patient clusters. Clicking a node raycasts the hit, eases the camera in, and renders the dossier.

js/main.js (excerpt)

// departments on a ring, patients clustered around each
DEPARTMENTS.forEach((d, i) => {
  const a = (i / DEPARTMENTS.length) * Math.PI * 2;
  const deptPos = new THREE.Vector3(Math.cos(a) * R, yOff, Math.sin(a) * R);
  addEdge(core, deptPos, d.hex);            // Hospital → Department
  PATIENTS.filter(p => p.dept === d.id).forEach((p, j) => {
    const pPos = clusterAround(deptPos, j);  // Department → Patient
    addEdge(deptPos, pPos, d.hex);
    makeNode({ pos: pPos, type: 'patient', ref: p, statusHex: STATUS[p.status] });
  });
});

// click → raycast → fly the camera in → open dossier
function focusNode(node) {
  const wp = node.mesh.getWorldPosition(new THREE.Vector3());
  camGoal = wp.clone().add(wp.clone().normalize().multiplyScalar(dist));
  targetGoal = wp.clone(); flying = true;     // eased each frame with .lerp()
}

Want to recreate it from scratch with an AI coding agent? Start from this prompt.

prompt.txt

Build a single-page, dependency-free 3D "patient ontology graph" with Three.js
(loaded from a CDN import map — no build step). Holographic neon aesthetic on a
dark background, with a scanline/vignette overlay.

ONTOLOGY
- One central HOSPITAL core node.
- A ring of DEPARTMENT nodes around it (e.g. Cardiology, Oncology, Critical Care,
  Neurology, Pulmonology, Orthopedics), each with its own accent color and an edge
  back to the hospital core.
- Clusters of PATIENT nodes branching off each department, connected by edges.
- Patient nodes carry a colored status ring: green=stable, gold=observation, pink=critical.

DATA (synthetic / fictional only — clearly label as NOT real PHI)
- ~15 patients. Each patient has all 8 dimensions: demographics/patient info,
  background & social/family history, medications, past medical history/diagnoses,
  allergies, vitals & lab results, care team, and encounters/admissions.

INTERACTION
- OrbitControls: drag to rotate, scroll to zoom, auto-orbit toggle.
- Click any node: raycast the hit, smoothly FLY the camera in to that node.
- Clicking a PATIENT opens a slide-in dossier panel with all 8 dimensions.
- Clicking a DEPARTMENT or the HOSPITAL shows a summary of what that node represents.
- Left legend filters by department; a reset button returns the home view; Esc closes.

Make it mobile-friendly, label every node with a sprite, and add a clear disclaimer
that all data is synthetic and not medical advice.

🧬 Explore the hologram

Spin the graph, click a patient, and watch the dossier unfold across eight dimensions. All data is synthetic.

▶ Launch live demo