Fork of Tree test

100%

Fork of Tree test

✓ Published0🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Tree test

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.

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

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

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

81% match

Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This visualization shows a hierarchical tree structure in which multiple parent nodes can share the same child, as demonstrated by two top-level categories both linking to common descendants like “Supply and demand” and “Laborer.” It uses D3 v5’s `stratify` and `tree` layouts to convert flat JSON data into a dendrogram, rendering nodes as text labels and edges as horizontally curved `linkHorizontal` paths. The SVG canvas supports zooming via D3’s `zoom` behavior, and text styling relies on the Playfair Display font with a white shadow for readability.

81% match

Loading thumbnail…

Fork of Fork of Fork of D3 Tree with Multiple Parents

This interactive visualization displays a hierarchical tree with multiple parent links, allowing nodes to connect across branches. Clicking a node collapses or expands its children with smooth transitions. Using D3 v5’s tree layout, linkHorizontal paths, and zoom behavior, the code renders SVG text labels and links, with node positions recalculated from a JSON dataset via Underscore utility functions.

AASHA

81% match

Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228

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

80% match