Skip to main content
SimilarExport ZIP
100%

d3-indented-tree API example #27

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

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.

AI-generated description

API examples for d3-indented-tree

myChart.nodeBar() - 4

This example shows how to transition to a second numeric value with myChart.nodeBar(). This example also shows:

  • how to change the color of the node image

Acknowledgements:

mit Licensed

Similar vizzes

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
88% match
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
84% match
Loading thumbnail…

d3-indented-tree API example #24

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.

EEE2dev
84% match
Loading thumbnail…

d3-indented-tree API example #32

This example demonstrates how node sorting can be re-applied in a d3-indented-tree chart. It initially renders a tree from CSV-like data embedded in an aside element, then after a two-second delay, triggers a resort using the `nodeSort` method with the `num` key, ascending order, and height-aware grouping. The code uses the d3-indented-tree API built on D3 v6, with `d3.indentedTree` initializing the chart and `linkLabel` setting the edge labels. The `convertTypes` option is set to "none," causing all columns to remain strings, which influences the lexical sorting behavior.

EEE2dev
81% match
Loading thumbnail…

d3-indented-tree API example #29

This example demonstrates how to customize node images in a d3-indented-tree chart by adding SVG elements. It shows expanded nodes with green circles and collapsed nodes with red circles, with the colors updating dynamically based on the node’s collapsed state. The chart uses the d3.indentedTree API with custom appendNodeSVG and updateNodeSVG functions, while the data is loaded from an HTML aside element. The visualization also links edge width and labels to the "weight" and "size" fields, and the chart re-renders after two seconds to reflect the change.

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

d3-indented-tree API example #31

This example demonstrates interactive re-sorting of an indented tree diagram using the d3-indented-tree plugin. The visualization initially renders a hierarchy from CSV data embedded in an HTML `<aside>` tag, displaying node labels with a secondary numeric field. After a two-second delay, the `nodeSort("num")` method reorders sibling nodes by their `num` values, while `linkWidth(100)` simultaneously adjusts the link thickness. The chart is built with D3.js v6 and the d3-indented-tree library, which handles the tree layout, links, and animations. The example highlights how to dynamically manipulate node ordering and visual properties after initial rendering.

EEE2dev
78% match