Skip to main content
SimilarExport ZIP
100%

d3-indented-tree API example #5

✓ Published0🌍 Public
EEE2dev
Last edited Dec 30, 2020
Created on Jul 25, 2019

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.

AI-generated description

API examples for hierarchy explorer

data format, JSON data from variable

This example shows how to reference a JSON data from a variable

Acknowledgements:

mit Licensed

Similar vizzes

Loading thumbnail…

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.

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

d3-indented-tree API example #4

This example demonstrates how to update an indented tree diagram’s link widths based on a numeric field. It initially renders a tree from a CSV dataset, defining hierarchy levels for world, continent, and country. After a two-second delay, the `linkWidth` method is called to encode the population values into the stroke thickness of the links. The visualization uses D3 v6 and the d3-indented-tree library, with the chart attached to the body via a `div` and invoked through the `d3.indentedTree` factory. The data is loaded from a remote CSV file specified in the configuration.

EEE2dev
84% match
Loading thumbnail…

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.

EEE2dev
80% 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
80% 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
79% 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
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