ICE 8 Task 2B Kumar Danam

100%

ICE 8 Task 2B Kumar Danam

✓ Published1🌍 Public

Last edited Nov 2, 2025

Created on Nov 2, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

81% match

Loading thumbnail…

ICE 8 TASK 2.1 TREE

This visualization shows the hierarchical structure of a university, breaking down three colleges into nine departments and twenty-seven courses. It uses a vertical tree layout rendered as SVG through D3.js v7's `d3.tree()` and `d3.linkVertical()` APIs. Nodes are color-coded by depth, transitioning from red root to blue colleges, green departments, and yellow leaf courses. The static dataset is defined as a JavaScript object, with labels positioned above parent nodes and below leaves to improve readability.

Uuguggila@gitam.in

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

81% match

Loading thumbnail…

ICE-8 Visualizing tree

This example visualizes a hierarchical file system as an interactive tree diagram, with nodes colored by type: orange for the root drive, blue for folders, and green for files. The flat dataset is converted into a hierarchy using `d3.stratify()`, then laid out with the `d3.tree()` layout. SVG paths draw curved links between parent and child nodes, while circle and text elements label each entry. The layout positions nodes horizontally by depth, with collapsible behavior implied through cursor styling.

AAbhiramPudi@my.unt.edu

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

81% match