Fork of ICE-8-VK - Part - 2

100%

Fork of ICE-8-VK - Part - 2

✓ Published2🌍 Public

Last edited Apr 13, 2026

Created on Apr 13, 2026

Forked from ICE-8-VK

This visualization shows a hierarchical tree of programming languages, organized into web, data, and mobile categories. It uses d3.stratify to convert flat parent-child data into a hierarchy, then applies d3.tree to compute the layout, producing SVG paths for the links with d3.linkHorizontal and styled circles for nodes. Root, middle, and leaf nodes are differentiated with distinct colors via CSS classes. The data is hardcoded as an array of objects, and the entire rendering is done through SVG elements in a 1000 by 600 viewport.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8-2-2

This example shows a hierarchical tree of programming languages, organized by paradigms and domains, with leaf nodes for individual languages. Node shapes encode type—diamonds for the root, squares for internal nodes, and circles for leaves—while color represents the depth, or generation, of each node. The visualization uses the D3 version 7 library, specifically the `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` APIs to compute and draw the layout. Hovering over a node reveals a tooltip showing the node’s name and depth, and a legend clarifies the shape and color encoding.

SSainathreddypotu@gmail.com

88% match

Loading thumbnail…

ICE8-q2-1

This visualization presents a hierarchical tree of programming languages, organized into three levels of categories such as high-level, low-level, and domain-specific languages. It uses d3.tree() to compute the layout and renders nodes as colored SVG circles with labels, sized by depth, and links as horizontal paths via d3.linkHorizontal(). A d3.scaleOrdinal color scale maps hierarchy levels to distinct colors. The data is defined inline as a static JavaScript object, and the SVG canvas is 1200 by 800 pixels.

Ppashamsahithi2391@gmail.com

87% match

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…

ICE8_Tree_Programming_Languages

This visualization displays the programming language ecosystem as a three-level tree, with a root node branching into Web, Systems, and Data Science categories, and then into specific languages and technologies. Categories are color-coded by depth: orange for the root, green for the middle tier, and blue for leaves, with all labels rendered directly on circular nodes. The code uses D3's `d3.stratify()` to build the hierarchy from a parent-child dataset, then applies a `d3.tree()` layout with a vertical link generator (`d3.linkVertical()`) to position nodes. SVG circles and text elements are appended via D3's `selectAll().join()` pattern, with each node's fill color determined by its `depth` value.

Sshyamraghav12@gmail.com

86% match

Loading thumbnail…

ICE 8

This example shows a hierarchical tree diagram of programming languages, with a root node, three category branches for Frontend, Backend, and Data Science, and leaf nodes for individual languages. Each depth level uses distinct colors and shapes—circles for the root and leaves, rectangles for the middle layer—to visually separate the tree’s levels. The code builds the hierarchy with `d3.hierarchy()` and lays it out using `d3.tree()`, rendering links as curved paths via `d3.linkHorizontal()`. Node styling and labels are applied directly to SVG elements, with a legend added to clarify the level color coding.

Aashishkommanaveni05@gmail.com

85% match

Loading thumbnail…

ICE 8 tree

This example displays a three-level hierarchical tree of programming languages, grouped by paradigm (Object-Oriented, Functional, Scripting). The SVG visualization uses color-coded nodes—orange for the root, blue for paradigm categories, and green for individual languages—with horizontal links. The code builds the hierarchy using `d3.hierarchy()` and applies a tree layout, drawing connections with `d3.linkHorizontal()` and labeling nodes via appended SVG text elements. The data is a static JSON object embedded in the script, with all elements rendered directly into an SVG canvas.

Aadithiarikatla@gmail.com

85% match

Loading thumbnail…

ICE-8-2

This interactive tree visualization displays the hierarchy of programming languages, organized by paradigms and domains, with depth and node type encoded through color and shape. Built with D3 v7, it uses `d3.hierarchy` and `d3.tree` to compute the layout, while `d3.linkHorizontal` draws the connecting paths. Node symbols are rendered via `d3.symbol` with diamond, square, and circle shapes for root, internal, and leaf nodes, and a custom tooltip appears on mouse movement.

SSainathreddypotu@gmail.com

85% match

Loading thumbnail…

Fork of ICE 8 - Family Tree

This example shows a hierarchical tree of mobile phone brands, styled as a family tree with colored nodes and labeled connections. It uses D3 v5’s `d3.stratify` to convert flat parent-child data into a hierarchy, then `d3.tree` to compute node positions. The SVG renders circles for nodes, curved paths for links, and text labels, with node colors determined by depth level. The embedded YouTube video likely documents the original ICE 8 project, though the code itself runs independently.

SSwapna1915

84% match