Fork of Tree

100%

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 10, 2025

Forked from Tree

A fork of a three-layer D3 v7 tree visualization renders a hierarchical dataset of continents, countries, and cities using SVG. The code builds a vertical tree layout with `d3.hierarchy` and `d3.tree()`, then draws curved links with `d3.linkVertical()`. Node shapes encode depth: rounded rectangles for the root and countries, diamonds for continents, and circles for leaf cities, with a legend explaining each.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Tree

This visualization presents a world hierarchy as a tree, mapping the root node “World” to four continents—Asia, Europe, Africa, and North America—with two countries as leaf nodes under each continent. Node circles are color-coded by depth: blue for the root, purple for continents, and green for countries, with a legend clarifying the mapping. Using D3 v7, the code employs `d3.tree` and `d3.hierarchy` to compute the layout, then renders horizontal links via `d3.linkHorizontal` and draws circles and labels directly on the SVG, with text placement depending on whether a node has children.

Aadithiarikatla@gmail.com

88% 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

88% match

Loading thumbnail…

Fork of World Countries Tree

This fork of the D3.js world countries tree displays a hierarchical dataset of countries organized by continent and subregion. The visualization uses a horizontal tree layout with branching links, and text labels whose font size decreases with depth to show the classification from "World" down to individual countries. The code builds the layout with `d3.tree()` and `d3.hierarchy()`, renders the links with `d3.linkHorizontal()`, and enables pan and zoom through a custom `zoom()` extension that applies transformations to a group element. Data is loaded from `data.json`, and the SVG output is styled with custom CSS.

Aartijain688

87% match

Loading thumbnail…

Fork of World Countries Tree

A fork of the World Countries Tree example displays a hierarchical dataset as a horizontal tree layout, with node labels and curved links rendered as SVG elements. The visualization uses D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` path generator to position nodes and draw edges, while the `zoom` behavior enables panning and scaling of the entire graph. Data is loaded from a local `data.json` file, and node labels are styled with a Playfair Display font and white text shadow.

Ssmeiyin

87% match

Loading thumbnail…

Fork of World Countries Tree

This fork of D3's tree diagram displays a hierarchical breakdown of world countries, organized by continent and subregion, with all terminal nodes labeled in a serif font. The visualization is rendered as an SVG, with nodes positioned horizontally based on depth. The code uses D3 v5’s `tree` layout, `hierarchy` and `linkHorizontal` helpers to compute paths, and a `zoom` interaction that rescales the entire drawing on user input. Text size scales inversely with depth, and link paths are styled with a teal stroke.

Iillyyo

87% match

Loading thumbnail…

Fork of World Countries Tree

A hierarchical tree layout displays the countries of the world organized by continent and subregion, with each country as a leaf node. The visualization uses `d3.tree` and `d3.hierarchy` to compute the layout from a nested JSON structure, rendering curved links with `d3.linkHorizontal`. Text labels position nodes with font sizes inversely scaled by depth inside an SVG, while `d3.zoom` enables panning and zooming the entire tree.

86% match

Loading thumbnail…

Fork of World Countries Tree

A collapsible tree visualization displays the hierarchical structure of world countries, organized by continent and subregion. The code uses D3 v5’s `stratify` to convert a flat CSV dataset into a hierarchy, then applies the `tree` layout and `linkHorizontal` to render curved links. Nodes are labeled with country names, with font size decreasing by depth. The SVG output supports panning and zooming via `d3.zoom`, and links and text are styled with custom CSS including a serif font and text shadows.

86% match

Loading thumbnail…

Fork of Tree

This fork of a tree visualization displays weather data in a vertical hierarchical structure, showing cities with their timestamped readings and a final layer for temperature, pressure, wind speed, and humidity values. It fetches CSV data from a GitHub gist, transforms it into a tree using `d3.hierarchy` and `d3.tree`, and renders the result as an SVG. The network of links is drawn with `d3.linkVertical` paths, while nodes and labels are styled via CSS classes for circles, rectangles, polygons, and text.

YYashwanth0311

86% match