Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Force-Directed Graph: Collapsible, Hierarchical

Public visualization

Force-Directed Graph: Collapsible, Hierarchical

0 stars0🌍 Public
Kkjalks3
Last edited Sep 15, 2020
Created on Sep 15, 2020
Forked from HTML Starter

This example shows a hierarchical force-directed graph of the Flare software package’s class hierarchy, where collapsible nodes reveal or hide their children. The visualization uses d3.layout.force for physics simulation, with node size encoding the `size` attribute from the flare.json data source and color distinguishing leaf nodes from internal ones. Rendering is done with SVG circles and lines, animated on each tick. Clicking a node toggles its children, and custom constraints in the tick handler enforce a vertical hierarchy where child nodes remain below their parents.

AI-generated description

A bare minimum HTML page.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed