Q2 — VizHub

100%

Q2

✓ Published0🌍 Public

Last edited Apr 12, 2026

Created on Apr 12, 2026

This example displays a hierarchical tree of food categories, from the root "Food" down to specific items like "Almonds" and "Broccoli." It uses D3 v7's `d3.stratify` and `d3.tree` layouts to compute node positions, with horizontal curved links drawn via `d3.linkHorizontal`. Nodes are rendered as SVG circles colored by depth, with labels positioned to the right for leaves and left for internal nodes. A legend at the top-left explains the color mapping for each hierarchy layer.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

83% match

Loading thumbnail…

two

A hierarchical tree visualization maps food categories such as Fruits, Vegetables, and Grains through types to individual items, with each node colored by depth and displaying nutritional calorie data via hover tooltips. The chart uses D3.js v7 with the `d3.hierarchy` and `d3.tree` layout functions to position nodes and links, rendered as an SVG with a custom tooltip div. Data is embedded inline from a food dataset, with link and node styling defined through CSS classes.

Mmuchakurthisahithipatel@gmail.com

82% match

Loading thumbnail…

Q2-1-ASSIGN-8

This example displays a hierarchical tree of movie genres, from major categories like Action and Drama down to specific films such as Star Wars and Parasite. Each node is drawn as a colored circle with a text label, using a vertical layout with straight links. Built with D3 v7, it applies `d3.stratify` to construct the hierarchy from flat parent-child data and `d3.tree` to compute node positions, rendering the SVG output with unique colors from `d3.scaleOrdinal` and a custom legend.

Kkpavithrasai@gmail.com

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

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

80% match