Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter

✓ Published0🌍 Public
BBhargav Reddy
Last edited Nov 10, 2025
Created on Nov 10, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
91% 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
86% 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
85% 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
84% 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
84% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of D3 Starter

This example shows a hierarchical tree of a university department structure, with colored nodes connected by curved links. The layout is computed using D3’s `d3.stratify` and `d3.tree` APIs, which organize the data into parent-child relationships and positions nodes in a tidy tree. Node positions are rendered as SVG circle and text elements, while links are drawn as cubic Bézier paths using template literals. Data is loaded remotely from a CSV file via `d3.csv`, and all rendering uses the D3 v7 library.

Yyazneshpara2@gmail.com
83% match
Loading thumbnail…

Fork of Fork 1

This example shows a hierarchical tree of car types, branching into transmission categories (Automatic, Manual, Semi-Automatic) and then door counts, with nodes rendered as distinct shapes (rectangles, circles, rotated squares) and colored per depth level. It uses d3.csv to load a remote dataset, then processes the data into a nested structure before applying d3.tree and d3.hierarchy to compute the layout. The visualization renders as SVG, drawing curved links via d3.linkHorizontal and positioning nodes with explicit translate transforms, while each node’s shape and fill color are assigned conditionally based on its depth.

NNaveen Kumar Kolla
82% match
Loading thumbnail…

Fork of Fork of D3 Hierarchy Component 3

This example shows a hierarchical task tree rendered as an SVG, with nodes displayed as rectangles containing text labels and connected by horizontal links. The visualization uses d3.hierarchy, d3.tree, and d3.linkHorizontal to compute and draw the layout, while d3.zoom enables panning and scaling of the entire graph. Data is loaded from a JSON file, and both nodes and links respond to hover events by changing their fill or stroke color.

WWRCIECH
82% match