ICE8 - Task 2A

100%

ICE8 - Task 2A

✓ Published0🌍 Public

Last edited Nov 6, 2025

Created on Nov 6, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

88% match

Loading thumbnail…

ice-8-tree

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.

Ssravya010

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

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

Ice8_Question2

This example presents two side-by-side visualizations: a hierarchical tree of food categories and a force-directed network of named individuals. The tree displays Food, Fruits, Vegetables, and Grains as colored nodes connected by vertical links, with each layer assigned a distinct fill color. The network employs d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position six people nodes and their relational links. Both SVG outputs are built using D3 v7, with the tree using d3.tree and d3.linkVertical for layout.

Ssrujana reddy

83% match

Loading thumbnail…

ICE 8-2

This example shows a hierarchical tree diagram of animal categories, with the root node "Animals" branching into Mammals, Birds, and Reptiles, each leading to leaf nodes like Lion, Eagle, and Snake. Nodes are distinguished by depth: the root is a large circle, branches are rounded rectangles, and leaves are smaller circles, with a distinct green, blue, and red color scheme. The tree is rendered as SVG using d3.hierarchy, d3.tree, and d3.linkHorizontal for curved links, with labels and a legend added via D3 selections. The data is hardcoded as a JSON-like JavaScript object, and the layout is positioned manually with a translate transform.

Aashishkommanaveni05@gmail.com

82% match