Skip to main content
SimilarExport ZIP
100%

d3-indented-tree API example #33

✓ Published0🌍 Public
EEE2dev
Last edited Dec 30, 2020
Created on Sep 29, 2019

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.

AI-generated description

API examples for d3-indented-tree

myChart.nodeSort() - 3

This example shows how to resort the nodes of the tree and how to provide a convertTypes function that converts the columns size1, size2, size3 to numeric types.

Acknowledgements:

mit Licensed

Similar vizzes

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
88% 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
88% 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
86% 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
85% 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
80% 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
79% 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
79% match
Loading thumbnail…

d3-indented-tree API example #17

This example demonstrates how the d3-indented-tree API customizes link labels, showing the column *weight* with the unit "Euro," two-decimal formatting, and German locale, then transitions the labels to display the *size* column after two seconds. It also sets link widths proportionally to weight before switching to size. The code uses d3.indentedTree with the linkLabel() and linkWidth() methods, parsing data from an aside#data element and rendering via d3.select().append().call().

EEE2dev
77% match