Skip to main content
SimilarExport ZIP
100%

ICE-8-RadialTree-ProgrammingLanguages

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

This radial collapsible tree visualizes a four-level hierarchy of programming languages, from root to individual languages like C, Java, and Swift. The circular layout distinguishes it from classic horizontal trees, with nodes arranged across three visible layers. Users can click nodes to expand or collapse branches, while zoom and pan controls allow navigation of the tree. Tooltips reveal descriptive information about each language or paradigm on hover. Built with D3 v7, the visualization uses `d3.select` for SVG construction, `d3.zoom` for interactive viewport control, and a custom tooltip implementation for supplementary details.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8-3

This radial tree example visualizes a three-level hierarchy of programming languages, categorized first by paradigm (Compiled, Interpreted, Functional) and then by individual language names. Built with D3.js v7, it uses the `d3.hierarchy`, `d3.tree`, and `d3.linkRadial` APIs to compute the layout, with each node’s shape and color (circle, square, triangle; black, blue, green) varying by depth. Custom SVG paths are drawn for links and nodes, and text labels are positioned according to the node’s angle.

Aanirudhrao345@gmail.com
88% 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
86% match
Loading thumbnail…

ICE 8 2

This tree visualization displays a hierarchical taxonomy of programming languages organized by paradigms and use cases across three or more levels. Built with D3 v7 and React, the diagram uses d3.hierarchy and d3.tree layout with linkHorizontal paths to draw branching connections. Nodes are distinguished by depth: the root appears as a diamond, internal nodes as rounded rectangles, and leaves as circles, with color coding via d3.scaleOrdinal. Interactive labels identify each language while SVG rendering provides crisp output on a light background.

Ssakethpapareddy@gmail.com
85% 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
85% match
Loading thumbnail…

ice8_task2

This radial tree diagram shows the hierarchical structure of programming paradigms, branching from a central root into Functional, Object-Oriented, Logic, and Procedural categories, with further subdivisions down to individual languages. The visualization uses a custom D3.js v7 tree layout with SVG rendering, where nodes are represented by different geometric shapes—diamonds for the root, rounded rectangles for paradigm categories, circles for sub-families, and triangles for leaf languages. Links are drawn using d3.linkHorizontal with curved paths, while a d3.scaleOrdinal color scheme distinguishes the four main paradigm branches. The data is hardcoded as a nested JavaScript object.

Ssahasrakaturi91@gmail.com
84% 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
84% match
Loading thumbnail…

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.

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

Tree

This visualization displays a hierarchical tree of programming languages, organized by paradigms and categories, with node shapes indicating the level in the hierarchy: a circle for the root, squares for paradigms, triangles for categories, and rounded rectangles for individual languages. The data is defined as a JavaScript object and rendered using D3.js v7, specifically relying on the `d3.hierarchy` and `d3.tree` layout functions to position nodes and links. The SVG output uses custom styling for links and labels, and a fixed-size SVG canvas at 1200x800 pixels.

AAnurup Reddy
84% match