Skip to main content
SimilarExport ZIP
100%

d3-indented-tree API example #23

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

This example demonstrates how the `d3-indented-tree` API can adjust link width in real time. Initially, the chart uses the `linkWidth("size")` method to dynamically size links based on the "size" property of the data, which is loaded from a local `flare.json` file. After a two-second delay, a `window.setTimeout` callback switches the link width to a static value of 100 pixels, overriding the dynamic behavior. The visualization is rendered using D3.js v6 and the `d3-indented-tree` plugin, with data propagated via the `propagateValue` method. This highlights the flexibility of the API for controlling visual encodings.

AI-generated description

API examples for d3-indented-tree

myChart.linkWidth() - 2

This example shows how to

  • set the link width dynamically based on the column "size"
  • after 2 seconds, the link width is set statically to a number (100)

Acknowledgements:

mit Licensed

Similar vizzes

Loading thumbnail…

d3-indented-tree API example #21

This example demonstrates how to dynamically adjust link strength in a d3-indented-tree diagram based on a data field, using the `linkStrength("size")` method. It visualizes hierarchical data from a remote flare.json file, where link thickness reflects the "size" attribute. The code uses d3.v6 and the d3-indented-tree library, initially rendering the tree and then programmatically changing link width to 100 after a two-second delay. The example highlights the API’s ability to bind visual properties to data values, allowing for interactive or time-based updates.

EEE2dev
90% match
Loading thumbnail…

d3-indented-tree API example #22

This example demonstrates dynamic link strength in a d3-indented-tree hierarchical chart, where the strength of each link is mapped from the data’s “size” field using a logarithmic scale. It first renders a tree from the flare.json dataset, then after a two-second delay, increases the link width to 100 pixels to show an interactive update. The code uses the d3-indented-tree API, specifically the `linkStrength()` method with a scale, along with d3.v6 for data handling and selection. The visualization is created via a custom `showChart` function that appends a chart div to the body.

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

d3-indented-tree API example #16

This example demonstrates the `linkLabel` API of the d3-indented-tree plugin, showing how to reference a column’s size value for display as link labels on an indented tree. It renders a hierarchical dataset loaded from a remote JSON file, with node values propagated to link labels via the `.propagateValue("size")` and `.linkLabel("size")` methods. After two seconds, the code dynamically changes the link width using `.linkWidth(100)`, illustrating a live style update. The visualization is built with D3 v6, using `d3.indentedTree` and bound to the page via `d3.select(...).call(...)`.

EEE2dev
86% match
Loading thumbnail…

d3-indented-tree API example #19

This example demonstrates how numeric values propagate through a hierarchical tree and appear as link labels, with colors indicating magnitude. The chart loads `flare.json` and displays it using the `d3-indented-tree` plugin, where the `propagateValue("size")` method sums child values into their parents and `linkLabel("size", {color})` renders each link’s label with a color function turning values over 6000 green and others red. The visualization also shows dynamic interaction by widening the link labels from their default to 100 pixels after a two-second delay, while relying on D3 v6 for data binding and DOM manipulation.

EEE2dev
85% match
Loading thumbnail…

d3-indented-tree API example #14

This example demonstrates how to dynamically color tree links based on a data column using the d3-indented-tree API. It assigns colors to link paths according to the `name` field, with a custom ordinal scale mapping categories like `flare` and `graph` to distinct hues while defaulting unknown values to lightgrey. The visualization loads hierarchical data from a remote JSON file (flare.json) and renders an indented tree with adjustable link strength. The code uses d3.v6, d3-indented-tree, and a `linkColor("name", {scale: colorScale})` configuration, later modifying link width via `linkWidth()`. The chart is appended to the body and rendered through a helper function.

EEE2dev
84% 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
84% 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
82% match