Tree_ICE8_SarathL

Cchandanamahesh0215@gmail.com

ICE8-Tree-CM

A vertical D3.js tree visualizes programming languages across four layers: root, paradigm, language, and ecosystem. Color encodes paradigm (functional, object-oriented, procedural, scripting), while shape distinguishes each level—circle for root, diamond for paradigm, square for language, and triangle for ecosystem. Built with D3 v7 and SVG rendering, the tree includes hover tooltips, a legend, and inline self-tests calling `d3.stratify` to verify the data structure. The flat row data with parent-child IDs is converted into the tree layout, with accessible labels and ARIA attributes on the SVG element.

LLikhitaMudagereShivaraj@my.unt.edu

ICE-8-Q2.1-Tree-Basic

This example shows a hierarchical tree of programming languages organized by paradigm, with four levels from root to leaf. It uses D3 v7’s `d3.hierarchy` and `d3.tree` layout with an SVG rendering approach, drawing horizontal links via `d3.linkHorizontal`. Nodes appear as blue circles with labels, and the layout adapts to an 800px-high viewBox, though the CSS height also adjusts to the viewport.

Ssaiabhishekmunnangi@gmail.com

Fork of tree

This example presents a hierarchical tree of programming languages, grouped into families like C Family, Scripting Languages, and Functional Languages, with nested relationships such as C++ leading to C# and Java. It uses the D3.js v7 library with a `d3.tree` layout on a `d3.hierarchy` object, rendering nodes as circles colored by depth via `d3.scaleOrdinal`. Links are drawn as horizontal paths using `d3.linkHorizontal`, with text labels positioned next to each node. The visualization is built with SVG and includes static sample data defined in the script.

MMuraliMohanMekala@my.unt.edu

ice - 8 Murali

This example displays a hierarchical tree of programming languages, organized into object-oriented, functional, and scripting categories. The visualization uses a horizontal layout, with the root node on the left and child nodes branching to the right, and differentiates leaf nodes from parent nodes by color. The code constructs the tree using D3's `d3.tree()` layout and `d3.hierarchy()` functions, renders links as horizontal paths with `d3.linkHorizontal()`, and draws the node circles and text labels from the `root.descendants()`. The SVG output is styled with CSS classes and rendered within a fixed viewBox.

Aadithiarikatla@gmail.com

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.

Ssivaniammisetti2001@gmail.com

ICE-8 — Section 2A: Programming Languages Tree

A vertical hierarchy visualization shows a four-layer taxonomy of programming languages, from root to paradigm, language, and feature levels. The flat parent-child array is converted to a tree structure using `d3.stratify()`, then positioned with `d3.tree()`. Each depth layer receives a distinct color and node radius, and curved links are drawn with `d3.linkVertical()`. The SVG renders with bounding-box computation for dynamic viewBox sizing.

Aashishkommanaveni05@gmail.com

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.

tree

This example displays a hierarchical tree of programming languages, organizing them into compiled and interpreted categories with individual language leaves. The visualization uses d3.csv to load the data, d3.stratify to convert the flat table into a hierarchy, and d3.tree to compute the layout. Links are drawn with d3.linkHorizontal, while nodes differentiate types using shapes—circles for parent categories and diamonds for leaves—with a d3.scaleOrdinal assigning colors by depth. SVG rendering presents the final structure against a styled page background.

Vvydeeshm@gmail.com