Skip to main content
SimilarExport ZIP
100%

Fork of Tree_hd

✓ Published0🌍 Public
HHarshithaDontha@my.unt.edu
Last edited Nov 10, 2025
Created on Nov 10, 2025
Forked from Tree

This example shows a hierarchical tree of programming paradigms—object-oriented, functional, and procedural—with nested subcategories leading to specific languages. Node shapes encode depth: a star marks the root, diamonds level 1, triangles level 2, and squares level 3 leaves. The code uses `d3.hierarchy` and `d3.tree` to compute the layout, `d3.linkVertical` for curved links, and SVG paths for custom node shapes. A legend clarifies the shape-to-level mapping, while an ordinal color scale differentiates depths.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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.

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

Fork of Tree

This interactive visualization displays a collapsible tree of programming languages organized across four layers: root, paradigm, family, and language. Using D3 v7’s `d3.hierarchy` and `d3.tree` layouts, nodes render as distinct SVG symbols (star, triangle, square, circle) with colors varying by depth. Clicking nodes collapses or expands branches, with `transition` animations smoothly redrawing link paths and node positions. The initial view collapses nodes at depth ≥2, showing only paradigms and families until expanded.

Ppanyamsantosh09@gmail.com
85% match
Loading thumbnail…

Fork of Tree

This fork-based visualization presents a tidy left-to-right tree showing programming languages organized by paradigm (root → paradigm → language → library), with shape encoding depth (★ paradigms, ▲ languages, ● libraries) and color encoding paradigm groups. Built with React and D3.v7, the example uses `d3.hierarchy` to construct the tree and `d3.tree().size()` to compute a tidy layout within an SVG canvas. The data is embedded directly in the script as a static JavaScript object.

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

Fork of Tree

This visualization displays a three-level family tree of programming languages, with a single root node branching into four paradigm categories—Object-Oriented, Functional, Scripting, and Systems—which then split into specific languages and their frameworks or variants such as Java, Haskell, Python, and Rust. The graphic uses D3 v7 with the `d3.forceSimulation` layout algorithm to position nodes dynamically, rendering the hierarchical structure as SVG circles and gray linking lines. Nodes are color-coded by tree depth, with a visual legend explaining each level’s hue, and the React-based implementation sets the initial dataset from a flat parent-child array.

AAmrit Adhikari
83% match
Loading thumbnail…

Fork of Tree

A compact tree diagram visualizes a four-level hierarchy: the root node "World" branches into continents, which split into countries. The code defines custom node shapes—a blue rounded rectangle for the root, purple circles for continents, and green ellipses for countries—with each node labeled. Using the d3.hierarchy and d3.tree layouts with a vertical link generator, the graph is centered horizontally on the page. The visualization is rendered as SVG with distinct colors per level, sourced from a static inline JavaScript data structure.

Aadithiarikatla@gmail.com
82% match