d3-indented-tree API example #2

d3-indented-tree API example #3

This example demonstrates how to load CSV data in a hierarchical format for the d3-indented-tree API, displaying an indented tree chart that updates its link widths dynamically. The code uses d3.v6 and the d3-indented-tree library, fetching data from a remote CSV file via the `source` specification. After rendering, `myChart.linkWidth("population")` reconfigures the link thickness based on the population field after a two-second delay. The visualization leverages D3’s selection and append methods to inject the chart into the DOM, while the CSS from the library styles the tree layout.

89% match

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.

88% match

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.

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.

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.

d3-indented-tree API example #5

This example demonstrates how to pass a JSON object stored in a variable to the d3-indented-tree API, rendering a hierarchical dataset of world continents and populations as an indented tree. The visualization initializes with a static chart, then after two seconds uses the `linkWidth("population")` method to dynamically resize links based on population values. The code loads D3 v6 and the d3-indented-tree library, defines a data specification with a `source` key, and appends the chart to the body via a custom `showChart` function. The JSON data includes nested children for Asia and North America, with population metrics shown on hover or through link thickness.

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.

86% match

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.