Skip to main content
SimilarExport ZIP
100%

hierarchy explorer API examples

✓ Published0🌍 Public
EEE2dev
Last edited Jul 25, 2019
Created on Jul 25, 2019

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.

AI-generated description

API examples for hierarchy explorer

myChart.linkHeight()

This example shows how to set the height of the links.

Acknowledgements:

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…

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
79% 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
73% match
Loading thumbnail…

d3-indented-tree API example #21

This example demonstrates how to dynamically adjust link strength in a d3-indented-tree diagram based on a data field, using the `linkStrength("size")` method. It visualizes hierarchical data from a remote flare.json file, where link thickness reflects the "size" attribute. The code uses d3.v6 and the d3-indented-tree library, initially rendering the tree and then programmatically changing link width to 100 after a two-second delay. The example highlights the API’s ability to bind visual properties to data values, allowing for interactive or time-based updates.

EEE2dev
72% match
Loading thumbnail…

d3-indented-tree API example #23

This example demonstrates how the `d3-indented-tree` API can adjust link width in real time. Initially, the chart uses the `linkWidth("size")` method to dynamically size links based on the "size" property of the data, which is loaded from a local `flare.json` file. After a two-second delay, a `window.setTimeout` callback switches the link width to a static value of 100 pixels, overriding the dynamic behavior. The visualization is rendered using D3.js v6 and the `d3-indented-tree` plugin, with data propagated via the `propagateValue` method. This highlights the flexibility of the API for controlling visual encodings.

EEE2dev
71% match
Loading thumbnail…

d3-indented-tree API example #16

This example demonstrates the `linkLabel` API of the d3-indented-tree plugin, showing how to reference a column’s size value for display as link labels on an indented tree. It renders a hierarchical dataset loaded from a remote JSON file, with node values propagated to link labels via the `.propagateValue("size")` and `.linkLabel("size")` methods. After two seconds, the code dynamically changes the link width using `.linkWidth(100)`, illustrating a live style update. The visualization is built with D3 v6, using `d3.indentedTree` and bound to the page via `d3.select(...).call(...)`.

EEE2dev
71% 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
70% match
Loading thumbnail…

Hierarchy examples: Tree

This example demonstrates a node-link diagram for a small hierarchical dataset, showing both the original parent-child relationships and two manually added cross-links between a mid-level node and its grandchildren. The tree layout is computed using `d3.tree()` in D3 v6, and the visualization is rendered as an SVG with separate groups for nodes and links. Nodes appear as circles with text labels, while links are drawn as curved Bézier paths using a custom `crossDiagonal` function, which computes control points to create gentle arcs between connected nodes. The data is sourced from a static JavaScript object.

Rrainyrainyguo
70% match