Skip to main content
SimilarExport ZIP
100%

d3-indented-tree API example #25

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

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.

AI-generated description

API examples for d3-indented-tree

myChart.nodeBar() - 2

This example shows how to a second numeric value to a node with myChart.nodeBar(). When transitioning to reflect a differnt column by the node bar, you can:

  • sort the nodes according to the new column with myChart.nodeSort()
  • keep the current scale with the property updateScales

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
89% 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
89% 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
88% 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
86% 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
83% 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
81% match
Loading thumbnail…

d3-indented-tree API example #2

This example demonstrates the d3-indented-tree API by rendering a hierarchical tree from JSON data loaded from an external URL. It shows how to initialize the chart with a data specification that defines the data source and key field, then append the chart to the DOM. The visualization updates dynamically after a two-second delay, changing the link width to encode a "population" value. The code uses d3.v6 alongside the d3-indented-tree library, with data fetched from a GitHub-hosted test file, and relies on standard d3 selection and timing methods to manage the chart lifecycle.

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