Cranial osteopathy is hard to teach. 22 bones in the skull, each with sutures, membranes, mechanisms, and techniques associated with them. Students learn from textbooks and plastic models. Neither shows how everything connects.
I built something that does.
Two views, one bridge
Left side: a 3D skull rendered in Three.js. Every bone is a separate clickable mesh. calvaria, facial bones, mandible, all anatomically named and color-coded.
Right side: a D3 force-directed knowledge graph. 120+ nodes across seven categories: bones, sutures, membranes, mechanisms, techniques, landmarks, pathologies.
The bridge: click a bone in 3D → the corresponding node lights up in the graph, showing all its connections. Click a node in the graph → the skull rotates to show you that bone highlighted.
The knowledge layer
This isn't just anatomy. It's the full picture of cranial-sacral osteopathy. How the primary respiratory mechanism works. What CV4 technique does and which bones it targets. Why cranial osteopathy is used for babies. How the sphenobasilar synchondrosis acts as a central hinge.
Each of these is a "story preset". a curated path through the graph that teaches a concept by showing its connections.
Why it matters
Students can explore the skull and immediately see the clinical relevance. Practitioners can look up a technique and trace it back to the anatomy. The connections that take years to build mentally are visible in one interface.
Built for OsteosOnline. Three.js for the 3D model, D3 for the graph, vanilla JavaScript for the bridge between them. No frameworks. Built in a weekend by conversation.