Skip to main content
SimilarExport ZIP
100%

d3-indented-tree API example #28

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

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.

AI-generated description

API examples for d3-indented-tree

myChart.nodeImageFile() - 2

This example shows how to set the the node image file based on the data. The expanded nodes are shown with a white king. If the node is collapsed, it changes to a black king.

Acknowledgements:

mit Licensed

Similar vizzes

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
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
78% 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
76% 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
75% 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
75% 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
74% 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
74% match
Loading thumbnail…

d3-indented-tree API example #10

This example demonstrates how to load hierarchical data from a CSV file using a custom key field (`first_name`) and render it as an indented tree with aligned leaf nodes. The visualization uses the d3-indented-tree plugin on top of D3 v6, with the `d3.indentedTree` API configuring the data source and enabling leaf alignment. After two seconds, the chart dynamically increases the link width to 100 pixels, showing API-driven updates. Data is fetched from a remote CSV file hosted on jsDelivr, and the chart is rendered by appending a div and calling the chart function on it.

EEE2dev
74% match