Hierarchy Explorer API Demos

100%

Hierarchy Explorer API Demos

✓ Published0🌍 Public

Last edited May 28, 2019

Created on May 17, 2019

This example demonstrates a hierarchical tree visualization that initially renders with default leaf alignment, then animates to align all leaves after a two-second delay. The chart uses the hierarchyExplorer library, built on D3.js v5, to display hierarchical data loaded from a JSON file (flare.json) containing nested objects with a "name" key. The visualization propagates a "size" value through the hierarchy and leverages the library's `alignLeaves` method to realign leaf nodes dynamically. The implementation loads the hierarchyExplorer CSS and JavaScript from a CDN, while the chart is rendered into a div using a declarative configuration object and a chained method call.

AI-generated description

Hierarchy explorer

This example shows how to align leaves.

More API call examples

Link to hierarchy explorer on github.

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

hierarchy-explorer demo

This demo cycles through eight configuration options for the hierarchy-explorer chart, automatically applying a new setting every three seconds. It shows how changes to link height, link strength, leaf alignment, and link width—including using a log scale mapped to the `size` property—visually alter the tree layout. The chart loads hierarchical data from a flare.json file and renders it as a D3 v5 visualization. The interface displays the current function call above the animated transitions, using the `hierarchyExplorer.chart` API.

EEE2dev

85% match

Loading thumbnail…

Hierarchical List

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.

EEE2dev

80% match

Loading thumbnail…

hierarchy explorer API examples

This example demonstrates the interactive behavior of the hierarchy explorer when adjusting link dimensions. It shows how the `linkHeight()` method sets the vertical spacing between links, and then, after a two-second delay, the `linkWidth()` method changes the horizontal extent of the links, visually altering the chart’s layout. The code uses the D3.js v5 library alongside the custom `hierarchyExplorer` charting library, loading data from a remote JSON file. The chart is rendered by appending a div and calling the chart function, with the `propagateValue("size")` method linking node sizes to the data.

EEE2dev

79% match

Loading thumbnail…

d3-indented-tree API example #34

This example demonstrates how to align the leaves of an indented tree visualization using the d3-indented-tree API. It first renders a tree from a remote flare.json dataset, using the `name` property as the key and propagating `size` values. After a two-second delay, the `alignLeaves(true)` method is called to enable leaf alignment. The chart is built with D3 v6 and the d3-indented-tree library, which supplies the tree layout and styling.

EEE2dev

76% match

Loading thumbnail…

Tidy Tree | Vis each* d3-hierarchy methods

This example visualizes the Flare class hierarchy as a tidy tree using the d3.tree layout, with nodes colored by value and links drawn as smooth curves. The demo highlights three d3-hierarchy traversal methods—`each`, `eachAfter`, and `eachBefore`—by animating the tree nodes to flash in breadth-first, post-order, and pre-order sequences respectively, controlled via buttons. The layout positions leaf nodes by their distance from the root, and the animation visually distinguishes the order in which nodes are visited by each traversal, making the differences between the methods immediately apparent. Rendered in SVG with smooth transitions, the visualization is a clear, interactive reference for understanding these core d3-hierarchy iteration patterns.

663anp3ca

76% match

Loading thumbnail…

d3-indented-tree API example #10

This example demonstrates how to load hierarchical data from a CSV file using a custom key field (`first_name`) and render it as an indented tree with aligned leaf nodes. The visualization uses the d3-indented-tree plugin on top of D3 v6, with the `d3.indentedTree` API configuring the data source and enabling leaf alignment. After two seconds, the chart dynamically increases the link width to 100 pixels, showing API-driven updates. Data is fetched from a remote CSV file hosted on jsDelivr, and the chart is rendered by appending a div and calling the chart function on it.

EEE2dev

75% match

Loading thumbnail…

D3 Tutorial

This example demonstrates a tree visualization using the Flare dataset, displayed as a circular layout with labeled nodes and hierarchical branches rendered in SVG. The code uses D3 v5’s `d3.hierarchy` and `d3.tree` to compute node positions, then draws links and circles with `d3.select` and SVG elements. The hierarchical structure shows parent-child relationships across categories like analytics, animate, and physics, with each leaf node’s value represented by its visual placement. The visualization is contained within a fixed 960x500 viewport.

SShivansh Mathur

74% match

Loading thumbnail…

Gist e3a7564e0daaea9e8d19

This example shows a hierarchical tree layout rendered with D3.js, using the cluster layout to display the Flare visualization toolkit’s class hierarchy. The SVG visualization is organized as an indented dendrogram, with circular nodes connected by elbow-shaped paths. Parent nodes are labeled to the left of their circles, while leaf nodes are labeled to the right. The layout encodes the data’s parent-child relationships through vertical positioning, with the tree flowing horizontally across the 960×2200 pixel canvas.

CCBasis

74% match