Skip to main content
100%

Tree with Force Layout Prototype

✓ Published0🌍 Public
CCurran Kelleher
Last edited Mar 8, 2024
Created on Mar 6, 2024
Forked from Circles with D3

This visualization showcases a hybrid approach to rendering 13,748 nodes of hierarchical data. It begins with a tidy tree layout to establish structure, then refines it using a force-directed simulation with link, charge, and position forces. The canvas is drawn with device-pixel-ratio scaling, and nodes are colored based on their depth using an HSL color scale, creating a radial, color-coded tree. Hot reloading lets parameters like gravity and link strength be adjusted live while the simulation runs, allowing real-time tuning. The animation continuously restarts to avoid premature convergence, and the canvas rendering supports smooth, interactive exploration of the large dataset.

AI-generated description

Ever needed to visualize large hierarchical data? Here's an approach that might work for you!

  • Start with a tidy tree layout
  • Iterate using force directed layout

This example has 13,748 nodes from VizHub forks data.

Fun fact: this implementation supports hot reloading! So you can tweak parameters as the simulation runs to get it just right.

MIT Licensed

Similar vizzes