Skip to main content
SimilarExport ZIP
100%

d3-indented-tree API example #24

✓ Published0🌍 Public
EEE2dev
Last edited Dec 30, 2020
Created on Jan 14, 2020

The example demonstrates how to append a numeric value to tree nodes using the `nodeBar()` method from the d3-indented-tree plugin. It visualizes hierarchical data parsed from an HTML `<aside>` element, with semicolon-delimited levels and a `size1` column driving node bar lengths. The chart is initialized via `d3.indentedTree()`, configured with `linkLabel("size1")` and `nodeSort("size1")`, then rendered by appending a `<div>` to the body and calling `showChart()`. The visualization highlights how numeric attributes can be encoded directly onto tree nodes while preserving hierarchy.

AI-generated description

API examples for d3-indented-tree

myChart.nodeBar()

This example shows how to a second numeric value to a node with myChart.nodeBar().

Acknowledgements:

mit Licensed

Similar vizzes

Loading thumbnail…

d3-indented-tree API example #26

This example demonstrates how to add a second numeric value to tree nodes using the `nodeBar()` method from the d3-indented-tree library, which visualizes hierarchical data as an indented tree. It shows how to configure the bar’s minimum horizontal translation with `translateX`, append a custom unit to the displayed value, and place labels inside the bars when space allows. The chart uses D3 v6 to parse semicolon-delimited data from an aside element and applies the `nodeSort` method to order nodes by the "size1" field. The visualization renders with the d3-indented-tree plugin, using its link and node bar APIs.

EEE2dev
91% match
Loading thumbnail…

d3-indented-tree API example #25

This example demonstrates how a d3-indented-tree chart can display a second numeric value on its nodes and update that value with a transition. It initially shows node bars for the "size1" column, then after a two-second delay, it switches to the "size2" column while keeping the existing scale. The code uses the `d3.indentedTree` API with `.nodeBar()` to render the bars and `.nodeSort()` to reorder nodes based on the new column. Data is loaded from an HTML `<aside>` element, parsed as a semicolon-delimited hierarchy, and rendered using D3 v6.

EEE2dev
89% match
Loading thumbnail…

d3-indented-tree API example #33

This example demonstrates how to reorder tree nodes after initial rendering, using the `nodeSort` method to sort by the `size1` column. The chart is built with the d3-indented-tree API, which parses semicolon-delimited data from an HTML `<aside>` element into hierarchical levels. A `convertTypes` function explicitly converts `size1`, `size2`, and `size3` from strings to numeric values, while `linkLabel` displays the `size1` value as an edge label. After a two-second delay, `nodeSort("size1")` triggers the re-sort, showing dynamic updates to the tree layout.

EEE2dev
85% match
Loading thumbnail…

d3-indented-tree API example #27

This example demonstrates how the `myChart.nodeBar()` API transitions a d3-indented-tree chart between two numeric values, changing the bar length for each node after a delay. It also shows how to alter node image colors via CSS by setting the `.node-image` stroke to deeppink. The chart loads CSV data from an `aside` element, using d3.v6 and the d3-indented-tree library. The code sorts nodes by size and uses `setTimeout` to trigger the bar transitions from "size" to "weight" values.

EEE2dev
84% match
Loading thumbnail…

d3-indented-tree API example #11

This example demonstrates how to embed hierarchical CSV data directly into an HTML document using the d3-indented-tree plugin, eliminating the need for a web server. The visualization renders an indented tree layout from comma-separated values stored in an `<aside>` element, with each node colored based on a numeric color attribute. The code initializes the chart via `d3.indentedTree()`, passing the data source selector, then appends the chart to the body using a standard D3 selection and call pattern. After a two-second delay, it dynamically adjusts the link width to 100 pixels, showcasing the plugin's API for modifying visual properties. The example relies on D3 v6 and the d3-indented-tree library, loaded from CDN.

EEE2dev
81% 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
81% 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
80% match
Loading thumbnail…

d3-indented-tree API example #12

This example demonstrates how to embed hierarchical CSV data directly in an HTML document using an aside element, with a custom key field (`myKey`) instead of the default. The d3-indented-tree API reads the data from `aside#data`, renders an indented tree visualization, and dynamically adjusts link width via the `linkWidth` method after a two-second delay. The code loads D3 v6 and the d3-indented-tree library from CDNs, then appends the chart to the body using a `showChart` function. The tree uses color-coded nodes from the CSV’s `color` column, and the data format requires no web server, making it suitable for local examples.

EEE2dev
80% match