hierarchy-explorer demo

100%

hierarchy-explorer demo

✓ Published0🌍 Public

Last edited May 28, 2019

Created on Mar 1, 2019

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Hierarchy Explorer API Demos

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.

EEE2dev

85% 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

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

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

74% match

Loading thumbnail…

d3-indented-tree API example #22

This example demonstrates dynamic link strength in a d3-indented-tree hierarchical chart, where the strength of each link is mapped from the data’s “size” field using a logarithmic scale. It first renders a tree from the flare.json dataset, then after a two-second delay, increases the link width to 100 pixels to show an interactive update. The code uses the d3-indented-tree API, specifically the `linkStrength()` method with a scale, along with d3.v6 for data handling and selection. The visualization is created via a custom `showChart` function that appends a chart div to the body.

EEE2dev

74% match

Loading thumbnail…

d3-indented-tree API example #19

This example demonstrates how numeric values propagate through a hierarchical tree and appear as link labels, with colors indicating magnitude. The chart loads `flare.json` and displays it using the `d3-indented-tree` plugin, where the `propagateValue("size")` method sums child values into their parents and `linkLabel("size", {color})` renders each link’s label with a color function turning values over 6000 green and others red. The visualization also shows dynamic interaction by widening the link labels from their default to 100 pixels after a two-second delay, while relying on D3 v6 for data binding and DOM manipulation.

EEE2dev

72% match

Loading thumbnail…

d3-indented-tree API example #6

This example demonstrates how to load and render a hierarchical tree from a relational CSV file using the d3-indented-tree plugin. The visualization initially displays a default tree layout, then dynamically increases the link width after two seconds. The code loads data from a remote CSV file using `d3.json`-style data specification, with `hierarchyLevels` mapping columns to tree levels and a semicolon delimiter. It uses D3 v6 and the d3-indented-tree API via `d3.indentedTree(dataSpec)`, appending the chart to a `div` with the `.chart` class. The rendering leverages the plugin’s built-in tree layout and styling from its CSS.

EEE2dev

72% match

Loading thumbnail…

test

This interactive tree chart displays a family hierarchy, with each member represented as a clickable node and connected by blue links. The visualization uses the D3.js library (version 3.5.17) with SVG rendering and animated transitions. Users can click nodes to expand or collapse branches, with the tree layout recomputing positions dynamically. The chart features a custom style with cyan circles, red strokes, and an orange background, while node colors shift based on child status. The code implements the `d3.layout.tree` and `d3.svg.diagonal` APIs for structure and path drawing.

998szx

72% match