Skip to main content
SimilarExport ZIP
100%

Fork of Ice_8_q2_tree

✓ Published0🌍 Public
Eeeshani.boyapati@gmail.com
Last edited Apr 12, 2026
Created on Apr 12, 2026
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ice 8_tree

This visualization displays a hierarchical tree of programming concepts as a structural diagram, mapping parent-child relationships from a data file. It uses a radial layout to position nodes, with connections drawn as lines between linked items. The implementation relies on d3.stratify for data organization and d3.tree for layout computation, while rendering all elements as SVG. Node colors encode depth levels, and labels identify each node. A legend clarifies the color mapping for the four hierarchical levels.

Kkanaparthieshitha@gmail.com
86% 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
85% 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
85% 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…

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

Fork of Fork of D3 Starter

This example shows a hierarchical tree diagram of food items, with a red root node ("Food"), orange category nodes for fruits, vegetables, and grains, and green leaf nodes for individual items. Built with D3 v7, the code uses `d3.tree()` and `d3.hierarchy()` to compute the layout, then renders SVG lines for links and circles with labels for nodes. The diagram is hardcoded with sample data, and node colors are assigned via a custom function based on the `type` field.

Kkmuddana@gitam.in
84% match