Skip to main content
SimilarExport ZIP
100%

Ice_8_q2_tree

✓ Published1🌍 Public
Vvineelaviswanadham07@gmail.com
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from HTML Starter

This simple static tree visualization displays a three-level hierarchy of programming languages, grouped into Procedural, Object-Oriented, and Scripting categories. Using d3.hierarchy and d3.tree, the layout computes x and y positions for all nodes, which are rendered as color-coded circles (red, blue, green) based on depth in the SVG. Links between nodes are drawn as gray lines, and each node is labeled with its language or category name. The example demonstrates a basic D3 v7 tree layout with data defined inline in JavaScript.

AI-generated description
MIT Licensed

Similar vizzes

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 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
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
88% 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
87% match
Loading thumbnail…

ICE - 8 Tree

A small tree diagram maps programming languages into three hierarchical levels: a root node, three language families (C Family, Scripting, Web), and their individual leaves. The visualization encodes depth through both color and shape, using a square for the root, diamonds for the family nodes, and circles for the leaves. Built with D3 v7, it arranges nodes using `d3.hierarchy` and `d3.tree`, draws horizontal links with `d3.linkHorizontal`, and applies a categorical color scale via `d3.scaleOrdinal`.

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

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.

MMuraliMohanMekala@my.unt.edu
86% match