ICE8_Tree

100%

✓ Published0🌍 Public

Last edited Apr 12, 2026

Created on Apr 12, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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…

Tree_Graph_ICE_8

This example presents a restaurant menu as a hierarchical tree visualization, where dishes are organized under cuisine categories and each dish branches into descriptive nodes for rating, cost, and sales. The code builds the tree using D3.js v7’s hierarchical layout and data join methods, rendering nodes as SVG circles and links as red lines on a light brown background. Node styling distinguishes dish circles from analysis diamonds, and the static dataset is defined inline in JavaScript.

RRohithNaiduDevareddy@my.unt.edu

84% match

Loading thumbnail…

TREE STRUCTURE ( WITH ELEMENTS) ICE

This interactive tree diagram maps a small dataset of Indian dishes into a hierarchical structure organized by region and course type. The visualization uses distinct shapes and colors—circles for the root and courses, squares for regions, and diamonds for dishes—with a legend explaining each category. Built with D3 v7, the code constructs the hierarchy from CSV-style data, applies a tree layout, and renders the result as an SVG using `d3.tree`, `d3.linkHorizontal`, and custom node styling.

Bbhargavinalamothu@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

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

82% match

Loading thumbnail…

TREE STRUCTURE ( ICE)

This example displays a hierarchical tree visualization of Indian food items, organized by region and course. The data is embedded as an array of objects showing five dishes, which is converted into a tree structure using a custom `buildHierarchy` function. The visualization uses `d3.hierarchy` and `d3.tree` to compute the layout, with `d3.linkHorizontal` generating curved paths for the links. Nodes are rendered as SVG circles with text labels, positioned via the `transform` attribute, and styled with CSS classes.

Bbhargavinalamothu@gmail.com

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

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

81% match