Hierarchical Network Graph Component
Hierarchies, made navigable.
Mycelium.js renders complex ontological networks as interactive radial graphs — click-to-center navigation, built-in search, and complete theme control. Up in minutes, not weeks.
Core engine
Built for real
graph use cases.
Radial Navigation
Click any node to center it. D3 v7 handles coordinate recalculation for deeply nested graphs without layout thrash or visual artifacts.
History Traversal
Every navigation step is pushed to a history stack. Click the center node to step back — reliably, across non-linear explorations of arbitrary depth.
Integrated Search
Jump to any node by name. URL hash navigation enables direct-linking into any graph state — shareable, embeddable, testable.
Secure by Default
HTML escaping and strict DOM construction prevent XSS. CSS variable theming is token-validated to block injection through user-supplied data.
Full Theme Control
Override any visual token via CSS variables or pass a theme object at init. Match your brand without forking the library or writing patches.
Responsive Layout
Separate radius and zoom configs for desktop and mobile. The graph adapts to its container — no additional media queries in your application code.
Quickstart
Up in
three steps.
No build tools required with the CDN path. Drop into any Node project with a single install — D3.js v7 is the only peer dependency.
-
01
Install via npm or load from the CDN. D3.js is the only peer dependency.
-
02
Prepare your data as a flat JSON object — each key is a node name with a children map and optional relation labels.
-
03
Call Mycelium.init() with a dataUrl and rootNode. The graph mounts into #mycelium by default.
npm install @myceliumjs/mycelium
import '@myceliumjs/mycelium/mycelium.css';
import Mycelium from '@myceliumjs/mycelium';
Mycelium.init({
dataUrl: 'data.json',
rootNode: 'Acme Corp',
});
<link rel="stylesheet" href="cdn.jsdelivr.net/…/mycelium.css">
<script src="d3js.org/d3.v7.min.js"></script>
<script src="cdn.jsdelivr.net/…/mycelium.js"></script>
<script>
Mycelium.init({
dataUrl: "data.json",
rootNode: "Acme Corp",
});
</script>
Ready to ship?
Explore the full API reference or jump straight into the live demo to see Mycelium.js in action.