Skip to main content
SimilarExport ZIP
100%

d3-indented-tree API example #15

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

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.

AI-generated description

API examples for d3-indented-tree

myChart.linkLabel() - 4

This example shows how to

  • set the link label based on the column color of type string
  • display the label above the link
  • place the link labels in the center of the link (align: "middle")
  • set the margins
  • use a file as the node image
  • set the width and height of the node image
  • draw an empty rectangle before drawing the image (setBackground: true) (to account for transparency of the image which would show otherwise the continuation of the link in the background)
  • determine the link width based on the column weight and mapping the width based the weight values onto the intervall [150, 300]
  • changing the link height to 50 pixels
  • setting the padding of the node label to 20 pixels such that the label is not overlapping the node image

Acknowledgements:

mit Licensed

Similar vizzes

Loading thumbnail…

d3-indented-tree API example #17

This example demonstrates how the d3-indented-tree API customizes link labels, showing the column *weight* with the unit "Euro," two-decimal formatting, and German locale, then transitions the labels to display the *size* column after two seconds. It also sets link widths proportionally to weight before switching to size. The code uses d3.indentedTree with the linkLabel() and linkWidth() methods, parsing data from an aside#data element and rendering via d3.select().append().call().

EEE2dev
90% 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 #13

This example demonstrates how to style link colors in a d3-indented-tree chart based on a data column. It shows a tree layout where each link’s stroke color is determined by the `color` field in the CSV-like data, sourced from an `<aside>` element. The code uses `d3.indentedTree` from the d3-indented-tree library, with `.linkColor("color")` to map data values to link strokes. After rendering, a `window.setTimeout` triggers `.linkWidth(100)` to adjust link thickness, though the primary focus remains on color mapping. The chart is appended to the body via a custom `showChart` function.

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
85% match
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
84% match
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
83% 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
82% match
Loading thumbnail…

d3-indented-tree API example #18

This example demonstrates how to customize link labels and locale formatting in a d3-indented-tree chart. It shows a tree where each link’s label displays the `weight` column’s value in Euros, using a custom German locale with comma decimals and period thousands separators. The code calls `myChart.linkLabel("weight", {unit: " Euro", onTop: true, format: ",.2f"})` to set the label text and formatting, while `myChart.formatDefaultLocale(localeGerman)` applies the locale to number display. The data is embedded in an aside element and parsed by d3-indented-tree, with `propagateValue("size")` sizing nodes and `linkWidth(100)` fixing link thickness.

EEE2dev
82% match