tree

100%

✓ Published1🌍 Public

Last edited Nov 10, 2025

Created on Nov 10, 2025

This example shows a vertical tree diagram that categorizes mobile phones by operating system, with Android, iOS, and Others as the three main branches. The tree layout uses `d3.tree()` to position the hierarchy from top to bottom, with root nodes colored by depth using a `d3.scaleOrdinal()` color scheme. Data is defined inline as a JavaScript object and rendered as SVG circles and text labels, connected by curved paths generated with `d3.linkVertical()`. The visualization uses D3 v7 to compute the layout and bind data to SVG elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree

A tree diagram visualizes a hierarchy of mobile phone brands and their models, with each leaf node labeled by model name and processor speed in gigahertz. The layout is computed using `d3.tree` and `d3.hierarchy`, with `d3.linkHorizontal` generating curved link paths between nodes. The SVG rendering supports zooming via `d3.zoom`, and text styling uses the Playfair Display font with a light orange background. The dataset contains nine brands and fourteen specific phone models, each with a processor speed value displayed alongside its name.

Ssrividyamadas@gmail.com

82% match

Loading thumbnail…

MOBILE TREE GRAPH

This radial tree graph shows the hierarchical relationships between smartphone brands, their models, and processor types. The visualization uses d3.tree() and d3.hierarchy() to compute the tree layout, with d3.linkHorizontal() rendering curved links between nodes. Each node is drawn as a circle with a text label, colored green and red respectively within the SVG canvas. The data originates from static JavaScript arrays, and the graph updates positionally based on the D3 hierarchy API.

Ppraveennayak1702@gmail.com

81% match

Loading thumbnail…

Tree

A hierarchical tree diagram displays the structure of programming languages, grouped into Web, System, and Data categories. The visualization uses a static dataset defined in JavaScript. D3.js v7 with an SVG rendering approach draws the graph, employing `d3.hierarchy` and `d3.tree` to compute the layout. Nodes are represented as colored circles, color-coded by depth using `d3.scaleOrdinal` with `d3.schemeCategory10`, while links and text labels are appended via D3's data-join methods. The tree is oriented horizontally, placing parent-child connections left-to-right.

PP Manisha

80% match

Loading thumbnail…

tree

This example displays a hierarchical tree of programming languages, organizing them into compiled and interpreted categories with individual language leaves. The visualization uses d3.csv to load the data, d3.stratify to convert the flat table into a hierarchy, and d3.tree to compute the layout. Links are drawn with d3.linkHorizontal, while nodes differentiate types using shapes—circles for parent categories and diamonds for leaves—with a d3.scaleOrdinal assigning colors by depth. SVG rendering presents the final structure against a styled page background.

Vvydeeshm@gmail.com

79% match

Loading thumbnail…

tree

This example shows a hierarchical tree diagram of food categories, from the root “Food” down to leaf items like Spinach, Carrot, Orange, and Apple. The visualization uses D3 v3’s `d3.layout.tree` to position nodes and links, with SVG rendering and animated transitions when the tree updates. Each node is color-coded by its type (e.g., type1 through type4), and links are drawn as stepped paths using `d3.line` with `curveStepAfter`. The code includes interactive zoom via `d3.behavior.zoom` and tooltips, with data pulled from an external JSON file.

BBhavyaMammai

79% match

Loading thumbnail…

Tree

This example shows a horizontal tree diagram of technology domains, with three levels of depth branching from a root "Technology" node into categories like Programming Languages, Web Technologies, and Data & AI, and further into specific tools and languages. The visualization uses D3.js v7 with the `d3.hierarchy` and `d3.tree` layout APIs to compute node positions, and `d3.linkHorizontal` to draw smooth curved links between parent and child nodes. The SVG rendering distinguishes node hierarchy levels through color-coded fills: orange for the root, blue for first-level children, and green for second-level nodes, with each leaf labeled in small text.

SSreedevi Itta

79% match

Loading thumbnail…

Tree

A vertical tree diagram displays three levels of food categories, from the root "Food" down to fruits, vegetables, dairy, and their individual items. The SVG visualization uses D3 v7's `d3.stratify` and `d3.tree` layouts, reading hierarchical data from a local `food_tree.json` file. Node circles are colored by depth using a `d3.scaleOrdinal` with blue, orange, and green, while `d3.linkVertical` draws the connecting paths between parent and child nodes.

AArun Kumar M

78% match

Loading thumbnail…

Tree

This example shows a family tree with a root node, two main branches, and multiple levels of descendants. Each node is labeled with a name, and the text color matches the color property stored in the data.json file. The tree layout uses d3.tree() and d3.hierarchy() to compute positions, while d3.linkHorizontal() draws the curved connecting paths. The visualization is rendered as SVG, supports zooming via d3.zoom(), and uses font size based on node depth.

Kkollirohit2000

78% match