Skip to main content
SimilarExport ZIP
100%

d3-indented-tree API example #29

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

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.

AI-generated description

API examples for d3-indented-tree

myChart.nodeImageSelection()

This example shows how to set the the node image based on adding SVG elements. The expanded nodes are shown with a green circle. If the node is collapsed, it changes to a red circle.

Acknowledgements:

mit Licensed

Similar vizzes

Loading thumbnail…

d3-indented-tree API example #28

This example demonstrates how to dynamically assign node images in a d3-indented-tree chart based on each node’s expanded or collapsed state, using white or black king icons respectively. The visualization reads hierarchical CSV data from an HTML `<aside>` element, with columns for parent-child relationships, size, weight, and two image fields. Built with D3.js v6 and the d3-indented-tree plugin, the chart uses the `.nodeImageFile()` API with a callback function that selects `image1` for collapsed nodes and `image2` for expanded ones. Additional encodings map the `weight` field to link thickness and label formatting.

EEE2dev
85% match
Loading thumbnail…

d3-indented-tree API example #15

This example demonstrates how the d3-indented-tree API customizes link labels and node images in a hierarchical tree layout. It shows a link label derived from the string column *color*, displayed in the middle of the link with margins, while node images use a file with custom width, height, and background to handle transparency. The code sets link width based on the numeric *weight* column, mapping values to a range of 150–300, and increases link height to 50 pixels. It uses d3.v6 and the d3-indented-tree library, reading data from an `<aside>` element and updating link width dynamically after two seconds.

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 #30

This example demonstrates how to disable node images in an indented tree chart, resulting in a clean, text-only hierarchical layout. It uses the d3-indented-tree API with D3 v6, calling `nodeImageSelection(false)` to omit image elements. The chart renders chess move data from an embedded `<aside>` element, with link width mapped to a "time" property and a fixed link height of 30 pixels. The tree is drawn into a `div` using the `d3.indentedTree` constructor and a custom `showChart` function.

EEE2dev
80% 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
80% 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
78% match
Loading thumbnail…

d3-indented-tree API example #35

This example demonstrates how to set a custom default color for nodes in a d3-indented-tree chart, using the `defaultColor` method to render all elements in deeppink. It initializes the visualization with the `d3.indentedTree` API, loading hierarchical data from a remote `flare.json` file, and appends the chart to the body via `showChart`. After a two-second delay, the chart invokes `alignLeaves(true)` to realign leaf nodes, showing a dynamic update. The code relies on d3.v6 and the d3-indented-tree library, with data bound by the `"name"` key.

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