Tree with Force Layout Prototype
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 descriptionEver 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.