Fork of Tree Graph

100%

Fork of Tree Graph

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

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.

AArun Kumar M

88% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows a hierarchical food category tree, with food items as leaf nodes branching from broader categories like fruits, vegetables, and proteins. The code uses `d3.hierarchy` and `d3.tree` to compute the layout, then renders the structure as SVG paths and circles with `d3.linkVertical`. Node shapes vary by depth: a red rectangle for the root, blue circles for categories, and green circles for individual food items. Colors and node sizes are set directly in the D3 v7 code, which generates all elements dynamically from an inline JavaScript data object.

Bbalaaswitha@gmail.com

88% match

Loading thumbnail…

Fork of D3 Starter

This example shows a hierarchical tree of food categories, with Fruits, Vegetables, Grains, and Proteins branching into individual items. It uses d3.hierarchy and d3.tree to compute the layout, then renders links with d3.linkHorizontal and nodes as SVG circles and text labels. The data is embedded as a JavaScript object, and the visualization uses d3.v7 with an SVG rendering approach, assigning distinct colors to each category and its child nodes.

BBhargav Reddy

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

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

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

84% match

Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This example visualizes a hierarchical dataset of food categories and items, where nodes can have multiple parents, creating a non-tree structure. It displays the data as a left-to-right node-link diagram, with each item's label rendered as text and connections drawn as curved paths. The code uses D3.js v5 and the `tree`, `hierarchy`, and `linkHorizontal` APIs to lay out the graph, while a custom algorithm deduplicates repeated child nodes by ID and repositions them. The visualization is rendered as an SVG and includes pan and zoom interaction via D3's `zoom` event. The data is loaded from a JSON file and uses a transition animation to update node positions.

RRobert Wolf

83% match