Fork of Tree

100%

✓ Published1🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Fork of World Countries Trees

This visualization displays a hierarchical tree of world countries organized by continent and region, using a horizontal dendrogram layout. The code loads structured geographic data from data.json and employs d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal generates the connecting paths rendered as SVG elements. The visualization demonstrates basic D3.js DOM manipulation by appending path elements to an SVG canvas sized to the viewport.

MMajaha21

90% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion. It uses a D3 tree layout with horizontal links to show the parent-child relationships between geographic groupings, from "World" down to individual nations. The text labels are sized according to depth, with shallower nodes appearing larger. The implementation uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` functions to compute the layout and link paths, while a zoom behavior allows panning and scaling of the SVG rendering.

Cchoey1324@gmail.com

90% match

Loading thumbnail…

Fork of World Countries Tree

This visualization renders the hierarchical structure of world countries as a vertical tree, grouping nations by continent and subregion. It shows the nested relationships between continents, regional divisions, and individual countries. The code uses D3 v5’s `tree` layout and `hierarchy` functions to compute node positions, with `linkVertical` generating curved paths for connections. SVG circles and text labels display each node, while the `zoom` behavior enables panning and scaling. Data is loaded from a JSON file, and styling uses the Playfair Display font with color-coded nodes and links by depth.

HHaili0109

90% match

Loading thumbnail…

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries organized by continent and subregion, with the root labeled "Asia" and branches extending to regions like Southern Asia and individual nations. The D3 v5 code uses `d3.hierarchy` and `d3.tree` to compute the layout, `d3.linkHorizontal` to draw curved links between nodes, and `d3.zoom` for panning and zooming. Text labels render each node’s name with font sizes that shrink by depth, while styles.css applies a serif font and green stroke. The data comes from the bundled `data.json` file.

Jjmukul1997

90% match

Loading thumbnail…

Fork of World Countries Tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, with all branches originating from a single "World" root node. The tree layout uses vertical curved links to connect parent and child nodes, with country names displayed at varying font sizes based on their depth in the hierarchy. Built with D3 v5, the code employs `d3.tree()`, `d3.hierarchy()`, and `d3.linkVertical()` to compute and render the layout, while `d3.zoom()` enables interactive panning and scaling of the SVG graphic. The data comes from a local JSON file containing the nested geographic classification.

HHrishikesh Baidya

90% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, using a horizontal tree layout. The D3.js code employs `d3.tree` and `d3.hierarchy` to compute node positions, `d3.linkHorizontal` to draw curved connecting paths, and `d3.zoom` to enable pan and zoom interactions. Text labels for each country and region are rendered directly in SVG, with font sizes decreasing by depth level. Data comes from the included `data.json` file, which nests countries geographically.

Ssawyer.ashley@ymail.com

90% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, with the root labeled "World" and leaf nodes representing individual nations. The layout uses a tidy tree algorithm to position nodes, with horizontal links rendered as smooth curves. The SVG rendering employs D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` methods, while pan and zoom interactions are enabled via the built-in `zoom` behavior. Text labels are sized inversely to node depth, creating a clear visual hierarchy.

YYuji

89% match