Skip to main content
SimilarExport ZIP
100%

d3-indented-tree API example #32

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

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.

AI-generated description

API examples for d3-indented-tree

myChart.nodeSort() - 2

This example shows how to resort the nodes of the tree. When disabling convertTypes, the columns become strings and thus affecting the sorting order. The sorting order can be also parametrized by

  • ascending: true (default is false)
  • sortByHeight: true (default is false). Now the sorting is done for each group based on the height of the node.

The height of a node is the greatest distance from any descendant leaf.

Acknowledgements:

mit Licensed

Similar vizzes

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
91% 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
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
83% 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
81% 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 #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 #7

This example demonstrates how to load relational CSV data and render it as an indented tree using the d3-indented-tree API. The visualization shows hierarchical relationships from a flat CSV file, with columns mapped to hierarchy levels for family and genus. The code initializes the chart with `d3.indentedTree(dataSpec)`, specifying the data source URL, hierarchy levels, and delimiter. It then appends the chart to the body using D3’s selection and call methods, and adjusts the link width after a two-second delay. The example relies on D3 v6 and the d3-indented-tree library.

EEE2dev
79% 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
79% match