Fork of Tree test

100%

Fork of Tree test

✓ Published0🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

A hierarchical tree visualization displays product category data loaded from a JSON file. The layout uses `d3.tree` and `d3.hierarchy` to structure the data, with `d3.linkHorizontal` generating curved paths between parent and child nodes. Labels show node identifiers from the `label` field, while a `d3.zoom` handler enables panning and scaling of the SVG rendering. The visualization emphasizes the tree structure over numeric KPIs, which are present in the data but not displayed.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Tree test

This fork of a tree test displays hierarchical product data as a dendrogram with curved links and circular nodes. The visualization maps category labels like "CAFES MELANGE MOULUS" and their child levels, using node size and spacing to convey structural relationships. Built with D3 v5, it applies `d3.cluster`, `d3.hierarchy`, and `d3.linkHorizontal` to generate the layout from a JSON data source. The SVG rendering includes zoom functionality via `d3.zoom`, though node labels remain commented out, leaving only the tree topology visible.

OOussama Hajji

93% match

Loading thumbnail…

Fork of Interactive Tree Updated

This interactive tree visualization displays hierarchical product data, with nodes representing product categories and leaves showing individual items. Users can click nodes to collapse or expand branches, revealing or hiding child elements with animated transitions. The visualization uses D3 v5’s `tree` layout and `linkHorizontal` generator to position nodes and draw curved links, while `zoom` enables panning and scaling. Node rectangles display labels, and the underlying dataset includes KPI metrics like turnover and reference counts, though only the tree structure and labels are rendered visually.

SSEDKI91

84% match

Loading thumbnail…

Fork of Tree

This visualization displays a hierarchical tree structure from a JSON data file, representing cartoon characters and their relationships. The tree branches from a central root node, with child nodes extending outward horizontally. Each node is labeled with its character's name and colored according to the `color` property in the data, while gray connecting lines link parent and child nodes. The implementation uses D3 v5's `json()`, `hierarchy()`, `tree()`, and `linkHorizontal()` APIs to parse the data, compute the layout, and draw the SVG paths and text elements. The visualization also includes zoom functionality through the `zoom()` API, allowing interactive exploration of the tree.

SSaiSreya1

82% match

Loading thumbnail…

Fork of Tree

Fork of Tree visualizes a genealogical hierarchy using a D3 node-link tree diagram with bezier-curved links. The tree layout is computed with `d3.tree()` and `d3.hierarchy`, rendering circles whose radius encodes the `value` attribute, with fill and stroke colors driven by `level` and `type` fields from the JSON data. Links are colored by the parent’s `level` property. The example uses the `topojson` library for potential geo-feature processing, though the primary visualization focuses on hierarchical data drawn as SVG elements.

Hharoldle

82% match

Loading thumbnail…

Fork of a

This visualization presents a hierarchical tree of branching numeric labels, with each node displaying its value in large, serif text that shrinks as depth increases. The layout uses the D3 tree layout to position nodes, renders horizontal curved links between parent-child relationships, and supports zooming and panning via the D3 zoom behavior. Data is loaded from a JSON file and visualized entirely as SVG elements, with node text drawn using the Playfair Display font.

RRakshithaRao27

82% match

Loading thumbnail…

Fork of Tree

This example shows a fork-style tree diagram depicting cartoon character names, with nodes colored according to the data’s color values and text sizes varying by tree depth. The visualization uses D3 v5’s `tree` layout and `hierarchy` to compute node positions, then renders horizontal links via `linkHorizontal` and SVG text elements. The code loads data from a JSON file, applies a zoom behavior via `d3.zoom`, and styles nodes with custom fills and text shadows.

RRakshithaRao27

81% match

Loading thumbnail…

Fork of Tree

RRakshithaRao27

81% match

Loading thumbnail…

Fork of Fork of Tree with rectangular links

This interactive tree diagram visualizes hierarchical data from a JSON file, using rectangular links to connect parent and child nodes. The visualization is built with D3 version 6, employing the `d3.cluster` algorithm for layout and custom SVG path generation for the orthogonal edges. Users can click on individual nodes to expand or collapse their subtrees, triggering smooth animated transitions that reposition the remaining elements. The diagram displays node labels alongside colored rectangles indicating whether each node has children, with the viewport automatically adjusting to fit the current layout through transitions.

SSEDKI91

80% match