Skip to main content
SimilarExport ZIP
100%

Fork of World Countries Tree

✓ Published0🌍 Public
Ssmeiyin
Last edited Mar 29, 2021
Created on Mar 29, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Countries Tree

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.

DDamian Grzanka
95% 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
94% 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
94% 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
93% match
Loading thumbnail…

Fork of World Countries Tree

This fork shows a hierarchical tree of world countries, with each node labeled by an ID. It loads arbitrary hierarchical data from a JSON file and lays it out using `d3.tree`, drawing the connecting links with `d3.linkHorizontal`. The tree is rendered as an SVG, supports zooming and panning via `d3.zoom`, and uses a Playfair Display font for text labels.

Ttwingameapp@gmail.com
93% 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
93% 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
93% match
Loading thumbnail…

Fork of World Countries Tree

This example shows a static tree visualization of world countries, organized hierarchically by continent and subregion. The tree displays country names as text labels, with link paths connecting parent nodes to their children. The code constructs the tree layout using D3's `tree` and `hierarchy` functions, then renders horizontal links with `linkHorizontal` and text elements in SVG. Pan and zoom interactions are enabled through D3's `zoom` event handler, while the data is loaded from a local `data.json` file.

Hharitha13.yln1@gmail.com
93% match