Skip to main content
SimilarExport ZIP
100%

Tree

✓ Published0🌍 Public
AArun Kumar M
Last edited Nov 1, 2025
Created on Nov 1, 2025
Forked from Tree

A vertical tree diagram displays three levels of food categories, from the root "Food" down to fruits, vegetables, dairy, and their individual items. The SVG visualization uses D3 v7's `d3.stratify` and `d3.tree` layouts, reading hierarchical data from a local `food_tree.json` file. Node circles are colored by depth using a `d3.scaleOrdinal` with blue, orange, and green, while `d3.linkVertical` draws the connecting paths between parent and child nodes.

AI-generated description
MIT Licensed

Similar vizzes

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
88% match
Loading thumbnail…

tree

This example shows a hierarchical tree diagram of food categories, from the root “Food” down to leaf items like Spinach, Carrot, Orange, and Apple. The visualization uses D3 v3’s `d3.layout.tree` to position nodes and links, with SVG rendering and animated transitions when the tree updates. Each node is color-coded by its type (e.g., type1 through type4), and links are drawn as stepped paths using `d3.line` with `curveStepAfter`. The code includes interactive zoom via `d3.behavior.zoom` and tooltips, with data pulled from an external JSON file.

BBhavyaMammai
88% 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
86% match
Loading thumbnail…

Vertical Tree Diagram with Rectangles

A vertical tree diagram visualizes a food hierarchy using rectangles for nodes, starting with "Food" and branching into Vegetables and Fruits, then further into specific items like Spinach and Apple. The D3.js v7 code uses `d3.hierarchy` to process the nested JSON data and `d3.tree` to compute the layout. SVG paths with curved bezier links connect the nodes, while styled rectangles and text labels render each element with colors defined in CSS.

BBhavyaMammai
85% match
Loading thumbnail…

Tree Visualization with D3.js

This visualization presents a hierarchical tree of fruit categories, using circles to represent nodes and curved horizontal links to show parent-child relationships. It loads D3 v7 via UNPKG and builds the layout with `d3.tree()` on a `d3.hierarchy` data structure. The SVG renders colored node circles based on fruit-specific color data, while labels position differently for internal nodes versus leaves. The code uses `d3.linkHorizontal()` to generate paths and dynamically adjusts the SVG height from the computed tree extent.

VVinay Vemuri
83% match
Loading thumbnail…

ICE8-2(a)_Food_Tree

This interactive tree diagram categorizes foods into fruits, vegetables, and dairy, with further subcategories like citrus and leafy greens. It uses D3.js v7’s `d3.hierarchy` and `d3.tree` to create the layout, with `d3.linkVertical` for the connecting links. Nodes are drawn as distinct SVG shapes—diamonds, circles, triangles, and squares—based on tree depth, using D3’s `d3.symbol` API. Each node is colored by hierarchical level, and the SVG is rendered and styled via a linked CSS file.

Jjgaur96@gmail.com
83% match
Loading thumbnail…

tree Fork of Vanilla D3 Vibecoding Template

This example shows a hierarchical tree of food categories, from “Food” down through “Fruit” and “Vegetable” to specific items like “Orange” and “Carrot.” It loads data from a local CSV file and builds the hierarchy using `d3.stratify()`, then lays it out with `d3.tree()`. The SVG rendering draws curved links via `d3.linkHorizontal()` and positions colored node circles and labels according to the computed tree coordinates.

Bbodushivani2601@gmail.com
83% match
Loading thumbnail…

two

This visualization shows a hierarchical tree of food categories, breaking down foods from broad categories like Fruits and Vegetables into specific types and items. The tree uses colored nodes by depth—root, category, type, and item—with a legend explaining the color coding. Built with d3.v7, the code uses D3’s hierarchical layout to position nodes and links, rendered as SVG elements. Each node displays its label, and hovering reveals a tooltip with the item’s calorie count. The accompanying legend highlights the depth-based color scheme, while the chart container is styled with rounded borders and a clean, minimal design.

Mmuchakurthisahithipatel@gmail.com
83% match