Skip to main content
SimilarExport ZIP
100%

ice-8-tree

✓ Published0🌍 Public
Ssravya010
Last edited Apr 12, 2026
Created on Apr 12, 2026
Forked from HTML Starter

This tree visualization displays a hierarchical structure of food categories, showing the root "Food" node branching into Vegetarian, Non-Vegetarian, and Desserts, which further split into leaf nodes like Fruits, Chicken, and Ice Cream. Implemented with D3 v7, it converts the hierarchical JSON data using `d3.hierarchy`, positions nodes with the `d3.tree` layout, and renders links as vertical SVG paths via `d3.linkVertical`. Each node is drawn as a filled circle with a label, colored by depth level, using SVG within an HTML canvas.

AI-generated description
MIT Licensed

Similar vizzes

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

ICE8 - Task 2A

This visualization shows a three-level hierarchical tree of food categories, displaying a root node ("Food"), three category nodes (Fruits, Vegetables, Grains), and nine leaf items. The SVG rendering uses d3.hierarchy and d3.tree() to compute the layout, with d3.linkVertical() drawing the curved connections. Nodes are distinguished by shape and color: a yellow circle for the root, light-blue rounded rectangles for categories, and green diamonds for leaf items, each accompanied by text labels. The page includes a static, inline JavaScript dataset with no external data source.

Kkmuktha09@gmail.com
87% match
Loading thumbnail…

ICE-8 2A Ankit goud Poodhari

This example shows a hierarchical tree of food categories, with a brown elliptical root node for "Food," orange rectangular nodes for categories (Fruits, Vegetables, Grains), and green circular leaves for individual items. The visualization uses d3.hierarchy and d3.tree to compute the layout, with d3.linkHorizontal for the connecting paths. Nodes and labels are rendered via SVG, with positions and shapes determined by each node's depth. The styling uses distinct fill colors and text anchors to differentiate the three levels of the hierarchy.

Aankitgoudpoodhari07@gmail.com
86% match
Loading thumbnail…

Fork of Ice_8_q2_tree

A static tree diagram visualizes a three-level food hierarchy with root, category, and item nodes, using pink, purple, and orange circles for depth. The d3.v7 library's hierarchy and tree functions compute the layout, while SVG elements draw lines for links, circles for nodes, and text labels for names. The dataset is hardcoded in JavaScript, and the render uses a 900 by 500 pixel SVG canvas.

Eeeshani.boyapati@gmail.com
85% match
Loading thumbnail…

tree ice 8

This example displays a hierarchical family tree as a node-link diagram rendered in SVG using D3.js v5. The visualization uses `d3.hierarchy` and `d3.tree` to compute the layout from nested JavaScript data objects. Each node is represented by a circle whose radius corresponds to a numeric `value` property, while link strokes and circle fills derive color from the `level` field, and circle borders use the `type` field. Text labels show each person’s name, positioned to the left for internal nodes and right for leaves. The code manually constructs curved link paths with `d` string templates rather than using a curve generator.

SSai Hemanth Babu Sunkari
85% match
Loading thumbnail…

ICE8_Tree

This example shows a hierarchical tree of global cuisines and popular dishes, organized by region and category. It uses `d3.stratify` to convert flat parent-child data into a hierarchy, then `d3.tree` to compute the layout. The visualization renders links as vertical paths via `d3.linkVertical` and styles circular nodes with a color scale based on depth. All elements are drawn as SVG, with node size varying by hierarchy level. The data is embedded directly in the HTML as a static array.

Ssaitejak1619@gmail.com
85% match
Loading thumbnail…

ICE 8 Task 2B Kumar Danam

This example visualizes a hierarchical dataset of food categories—Food, Fruits, Vegetables, and Grains—as a vertical tree. It shows the nested structure with color-coded nodes by depth: blue for the root, orange for first-level children, and green for leaves, with links as curved paths. Built with D3.js v7, it uses `d3.hierarchy` and `d3.tree` to compute the layout, `d3.linkVertical` for the connecting paths, and SVG circles and text for node rendering. The hardcoded data is displayed in a 600×400 SVG.

KKumar Danam
84% 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
84% match