Skip to main content
100%

Hierarchical List

✓ Published0🌍 Public
EEE2dev
Last edited Jan 28, 2019
Created on Jan 28, 2019

This example visualizes a hierarchical dataset as an animated, collapsible tree, showing parent-child relationships across multiple levels of the Flare library’s structure. It uses D3.js v5 with SVG rendering, employing the `d3.hierarchy()` layout to compute node positions and `d3.tree()` to arrange them. The visualization draws curved link paths (`d3.linkHorizontal()`) and circular node markers, with text labels for each element. A smooth transition animates the tree’s expansion and collapse when a node is clicked, using `transition.duration()` and `transition.attr()` to update positions. The data is embedded as a JavaScript object in the code, with leaf nodes carrying a `size` attribute.

AI-generated description

Code based on the great work from https://codepen.io/brendandougan/pen/PpEzRp.

Changes:

  • converted to javascript
  • ...

Built with blockbuilder.org

mit Licensed

Similar vizzes