Fork of World Countries Tree

100%

Fork of World Countries Tree

✓ Published0🌍 Public

Last edited May 4, 2021

Created on May 4, 2021

This example displays a hierarchical tree from a JSON dataset, with nodes labeled and connected by curved links whose stroke thickness varies with child data size. It uses D3.js v5, including the `tree` layout, `hierarchy` for data nesting, and `linkVertical` for path generation. The SVG rendering is controlled via `select`, with zoom functionality integrated through the `zoom` and `event` APIs. Text labels use a Playfair Display font, styled with a white shadow effect from CSS.

AI-generated description

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Fork of World Countries Tree

A hierarchical tree visualization displays countries organized by continent and subregion, with the world as the root. The layout positions nodes horizontally by depth, and text size decreases with each level. D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` generate the SVG paths and labels, while a `zoom` behavior enables pan and scaling. The data comes from a JSON file, and text styling uses the Playfair Display font.

DDamian Grzanka

93% match

Loading thumbnail…

Fork of World Countries Tree

This fork of the World Countries Tree generates a horizontal dendrogram from hierarchical JSON data, displaying nodes as text labels connected by curved links. The example uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` to compute the layout, while a d3 `zoom` behavior enables panning and scaling of the SVG canvas. Node text size scales inversely with depth, and the Playfair Display font stylizes labels.

AAbdul Majeed

93% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by region and subregion, using a horizontal node-link layout. The code renders the structure with SVG paths and text labels, applying D3’s `tree()` layout, `hierarchy()`, `linkHorizontal()`, and `zoom()` for pan and zoom interactions. Data is loaded from a JSON file containing nested country groupings, with label font size decreasing by depth. The visualization uses a custom Playfair Display font and subtle text shadows for readability.

DDamian Grzanka

92% match

Loading thumbnail…

Fork of World Countries Tree

This tree visualization displays the hierarchical structure of world countries, with nodes labeled by country identifiers and connected by curved paths. The layout uses `d3.tree` and `d3.hierarchy` to compute positions, while `d3.linkHorizontal` generates the links. The SVG renders with a green stroke for paths and serif text, with font size decreasing by node depth. The visualization supports pan and zoom through `d3.zoom`, applied to a background rectangle. Data is loaded from a local `data.json` file, and the code uses D3 v5 via ES modules.

AAnki1997chavan

92% match

Loading thumbnail…

Fork of World Countries Tree 002

This example shows the hierarchical structure of world countries, organized by continent and subregion, as a vertical tree diagram. The visualization uses a D3 tree layout to compute node positions and renders paths with `d3.linkVertical` for connecting links. Text labels display country names with font sizes scaled by depth. The SVG rendering supports zooming and panning through the `d3.zoom` API. Data is loaded from a local JSON file using `d3.json`, and the code relies on D3 v5's `select`, `tree`, `hierarchy`, and `event` modules.

BBoyka

91% match

Loading thumbnail…

Fork of World Countries Tree

This visualization shows the hierarchical structure of world countries organized by continent and subregion, with each country name displayed as a text label connected by branching paths. The tree layout uses `d3.tree` and `d3.hierarchy` to compute node positions, while `d3.linkHorizontal` draws the curved links. The SVG rendering supports pan and zoom via `d3.zoom`, and text styling uses a Playfair Display font with white shadows for readability. Data comes from a JSON file containing the nested geographic hierarchy.

IIlayaraja R

91% match

Loading thumbnail…

Fork of World Countries Tree

This fork of the world countries tree visualizes the hierarchical structure of global regions, subregions, and countries from a JSON dataset. It renders a horizontal dendrogram in SVG, with each country as a leaf node labeled by name. The code uses d3.hierarchy, d3.tree, and d3.linkHorizontal to compute and draw the layout, while d3.zoom enables pan and zoom interactions. Text styling and font sizes adjust based on node depth, with a Playfair Display font applied throughout.

FForemost123

91% match