Skip to main content
SimilarExport ZIP
100%

d3-indented-tree API example #31

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

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.

AI-generated description

API examples for d3-indented-tree

myChart.nodeSort()

This example shows how to resort the nodes of the tree.

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
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 #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
82% match
Loading thumbnail…

d3-indented-tree API example #9

This example loads hierarchical data from an external CSV file and renders it as an indented tree using the d3-indented-tree plugin. The code initializes the chart with `d3.indentedTree(dataSpec)`, fetching the CSV from a remote URL, and appends it to the body via `d3.select("body").append(...).call(_chart)`. After a two-second delay, it demonstrates dynamic reconfiguration by changing the link width to 100 pixels with `myChart.linkWidth(100)`. The visualization shows how the plugin handles CSV-based hierarchy and supports programmatic updates.

EEE2dev
82% match
Loading thumbnail…

d3-indented-tree API example #1

This example demonstrates the configurable options of the d3-indented-tree plugin by cycling through eight different API calls every three seconds, each altering the tree’s layout properties. It shows how the visualization responds to changes in link height, link strength (both numeric and data-driven via the “size” key), leaf alignment, and link width (using a log scale). The code loads a JSON dataset from a CDN, initializes the chart with `d3.indentedTree`, and uses `window.setInterval` to apply each function sequentially, updating the displayed description text. Rendering relies on d3.v6 and the plugin’s bundled CSS.

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

d3-indented-tree API example #20

This example demonstrates the d3-indented-tree plugin with a fixed link strength, adjusting the visual spacing between tree nodes to a constant value. It shows the tree layout rendering hierarchical data from a remote flare.json file, where each node’s name is used as the key. The code explicitly calls `.linkStrength(5)` to set a rigid link stiffness, while also scheduling a `.linkWidth(100)` update after two seconds to alter link thickness. Using D3 v6 and the d3-indented-tree library, the chart is appended to the body and rendered via the plugin’s API. The data source and rendering approach are visible, but the example focuses on the plugin’s configuration methods.

EEE2dev
80% match