Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Apr 13, 2026

Created on Apr 13, 2026

This example displays a top-down hierarchical tree chart representing an AI taxonomy, with a red root node, blue child nodes, and green leaf nodes arranged vertically. The visualization uses D3.js v7 and builds the tree structure with `d3.hierarchy` and the `d3.tree` layout algorithm, positioning the root at the top center. It renders the structure in an SVG canvas, drawing black links between nodes via `g.selectAll('line')` and labeling each node with its name using D3's text elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example shows a hierarchical tree visualization of programming languages and their subcategories, with nodes colored by generation depth. The visualization uses D3 v7 and renders SVG elements, including vertical links drawn with `d3.linkVertical()` and nodes positioned via `d3.tree()`. The flat parent-child data is converted into a hierarchy using `d3.stratify()`. The root node appears in red, middle-level nodes in blue, and leaf nodes in green, with each node labeled by its name.

AAbhiram-Janagama

85% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows a hierarchical food category tree, with food items as leaf nodes branching from broader categories like fruits, vegetables, and proteins. The code uses `d3.hierarchy` and `d3.tree` to compute the layout, then renders the structure as SVG paths and circles with `d3.linkVertical`. Node shapes vary by depth: a red rectangle for the root, blue circles for categories, and green circles for individual food items. Colors and node sizes are set directly in the D3 v7 code, which generates all elements dynamically from an inline JavaScript data object.

Bbalaaswitha@gmail.com

85% match

Loading thumbnail…

Fork of HTML Starter

This example renders a hierarchical tree diagram from static data, showing family relationships with names like Roshan, Nimmat, and Salim. The visualization selects an SVG container, appends a `<g>` element, and uses `d3.hierarchy` to convert the plain JavaScript object into a node structure. It then calls `root.descendants()` to prepare nodes for rendering, though the code sets up a layout with `d3.layout.tree()` without completing the drawing. The page uses D3 v7 imported via ESM, with SVG elements styled through CSS classes.

AAmirruddin Abdul Razak

84% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates how to traverse and render a hierarchical tree structure using D3.js’s `d3.hierarchy` API. It visualizes nested data objects as a series of stacked, blue-bordered `div` elements, where each level of nesting corresponds to a deeper layer of the tree. The code builds the hierarchy from a static raw JavaScript object, then uses `d3.select` and `.append()` to create the DOM nodes, with each element’s text set to the node’s name. The console logs the depth and name of each visited node, illustrating the traversal order.

FFarhaan Qazi

84% match

Loading thumbnail…

Fork of HTML Starter

This example shows an interactive tree diagram visualizing a hierarchical data model of actions, children, and parents with attributes. Built with D3.js v3 and React, it renders nodes as blue circles connected by lines, using a tree layout with animated transitions as nodes expand or collapse on click. The data structure contains nested objects with type and name properties, while SVG rendering and D3’s hierarchy and tree APIs handle positioning and updates.

SShinyaHosoyamada

83% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example shows a family tree as a hierarchical node-link diagram, with color-coded nodes that distinguish generations: red for the root, blue for grandparents, green for parents, and orange for children. Using D3.js v7, it builds the hierarchy with `d3.stratify()` and lays it out with `d3.tree()`, then renders the structure as an SVG. The code draws black links as lines and labels each node with text, positioning all elements based on the computed tree coordinates.

Rrevanthdasari10@gmail.com

83% match

Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228

83% match

Loading thumbnail…

Fork of HTML Starter

A hierarchical tree visualization depicts the Noble Eightfold Path’s three divisions: Sīla (red), Samādhi (orange), and Paññā (purple), with eight leaf nodes for its practices. Rendered as an SVG using D3 v7, it applies `d3.tree()` and `d3.hierarchy()` to compute layout, then draws vertical links via `d3.linkVertical` and styled circles with text labels. The root node is green, and branch colors are defined in a static data object mirroring the README.

NNita

83% match