Fork of Tree Graph

100%

Fork of Tree Graph

✓ Published2🌍 Public

Last edited Apr 3, 2024

Created on Apr 3, 2024

Forked from Fork of Fork of Fork of Fork to pie chart

This tree graph visualizes a three-level eCommerce product hierarchy, from top-level categories like Electronics and Fashion down to specific product lines. Each level is color-coded by its type, with categories in blue, subcategories in green, and product lines in red. The layout uses D3.js v7 with the `d3.tree()` algorithm to compute positions for the hierarchical data. Nodes and links are rendered as SVG elements, with circle sizes varying per level to visually distinguish the taxonomy.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8 Tree graph

This example visualizes a product hierarchy as a tree graph with three node types—rectangles for the root category, ellipses for subcategories, and circles for individual products—using a custom D3 v7 selection with varying fill colors by depth. The code applies the `d3.hierarchy` and `d3.tree` layouts, positions nodes horizontally by depth, and renders connections with `d3.linkHorizontal`. It derives its structure from inline JavaScript objects representing furniture and technology categories, and renders everything as SVG with labeled text for each node.

SSharada

84% match

Loading thumbnail…

Fork of Tree Graph

This tree visualization displays a hierarchical food categorization system, starting with a root "Food" node that branches into categories, subcategories, and individual items. The chart uses distinct geometric shapes for each depth level: circles for categories, rectangles for subcategories, and polygons for items, with a red root node. Built with d3.v7, the code constructs a hierarchical structure using `d3.stratify()` and `d3.tree()` functions, then renders the tree with `d3.linkVertical()` for connections. Labels appear above or below nodes depending on whether they have children, with the entire SVG output styled to fill the viewport.

Ssravya7136@gmail.com

80% match

Loading thumbnail…

Fork of Tree

This radial tree visualization presents a four-level food hierarchy, from the root "Food" down to categories like Fruits and Vegetables, then subcategories, and finally individual items like Orange and Spinach. The D3.js v7 code uses `d3.select`, `svg.append`, and partition/treemap-style layout functions to position colored nodes and link strokes. The hierarchical JSON data is rendered as a dynamic tree, with node fill colors indicating depth level, from pink at the root to blue at the leaves.

Ssravya7136@gmail.com

80% match

Loading thumbnail…

Fork of Tree graph

This example visualizes a restaurant business hierarchy as a tree graph, with nodes representing categories like Location, Cuisine Type, and Price Range, each branching into specific subcategories. Node size encodes a numeric value, while stroke and fill colors differentiate types and levels. The code uses D3 v5’s `d3.tree()` and `d3.hierarchy()` to compute layout, rendering SVG paths for links and circles for nodes. Data is hardcoded in JavaScript, with styling applied via CSS classes.

JJayaSaiReddySantimalla@my.unt.edu

80% match

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

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

79% match

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

79% match

Loading thumbnail…

Fork of ICE - 8: Visualizing Tree

This interactive tree diagram visualizes hierarchical product and brand data, with Walmart as the root and categories like Vegetables, Fruits, and car manufacturers branching into specific items. The visualization uses the D3.js library's `d3.layout.tree()` function to compute node positions and `d3.svg.diagonal()` for curved links, rendering SVG elements with animated transitions on click. Nodes are styled as white circles with steel blue outlines, connected by orange paths, and text labels identify each entity. The data is embedded as a JavaScript array with nested `children` properties, and the layout maps tree coordinates to Cartesian space for display.

IIndhuKrishnaraj

78% match