Skip to main content
SimilarExport ZIP
100%

ICE-8-Q2.1-Tree-Basic

✓ Published0🌍 Public
LLikhitaMudagereShivaraj@my.unt.edu
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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

ICE-8 2q tree

This example shows a hierarchical tree of programming languages organized top-down, with root, category, subcategory, and leaf nodes distinguished by color. The visualization uses D3.js v7’s `d3.hierarchy` and `d3.tree` layouts to compute positions, then renders SVG paths via `d3.linkVertical` and circles with text labels. Node colors vary by depth, and hover interactions thicken circle strokes. The data is hardcoded in JavaScript with categories like Procedural, Object-Oriented, and Functional, each branching into specific languages.

Aakshayamsgrad@gmail.com
89% match
Loading thumbnail…

(ICE-8) Task 2A

This example shows a three-level tree of programming languages, with root, category, and leaf nodes distinguished by red rounded rectangles, orange circles, and green triangles. Using the D3 v7 library, it builds the hierarchy via `d3.hierarchy` and positions nodes with the `d3.tree` layout, drawing curved links with `d3.linkVertical`. Node labels are placed with an offset, and the SVG is rendered at a fixed 900×550 size, with data hardcoded in the script.

GGorantla Sravani
89% match
Loading thumbnail…

ICE-8-Q2.2-Tree-Generations-Colored

This visualization displays a hierarchical tree of programming language paradigms, with generations distinguished by both color and symbol shape. The root and three descending depth levels use a D3 ordinal scale mapping to specific colors and D3 symbol types (star, circle, square, triangle). The code renders the tree using d3.tree() layout with horizontal links via d3.linkHorizontal(), and draws nodes as SVG paths generated by d3.symbol(). Data is hardcoded in JavaScript, showing the relationship from Programming through Imperative, Object-Oriented, and Functional categories down to individual languages.

LLikhitaMudagereShivaraj@my.unt.edu
88% match
Loading thumbnail…

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.

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