Fork of World Countries Tree

100%

Fork of World Countries Tree

✓ Published0🌍 Public

Last edited Jan 5, 2024

Created on Jan 5, 2024

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.

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

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

93% match

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

93% 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 visualization shows a hierarchical tree of world countries, organized by continent and subregion, with each country displayed as a text label. The tree layout from D3 v5 arranges nodes vertically, and a zoom behavior allows users to pan and scale the SVG view. The code uses `d3.hierarchy`, `tree().size()`, `linkHorizontal()`, and `d3.zoom()`, while the data comes from a local `data.json` file with a nested structure. Label font size decreases with depth, and curved links are drawn between parent and child nodes.

AAbdouEnsaj

92% match

Loading thumbnail…

Fork of World Countries Tree

The World Countries Tree visualizes a hierarchical dataset of countries organized by continent and subregion as a labeled, zoomable tree diagram. It uses D3's `tree` layout and `linkHorizontal` path generator to draw curved links between nodes, rendering text labels whose font size decreases with depth. Implemented with D3 v5, the chart supports interactive pan and zoom through `d3.zoom`, with an SVG container and data loaded from a static JSON file.

Ccheikh.m.m.thiaw@aims-senegal.org

92% match

Loading thumbnail…

Fork of World Countries Tree

This fork of a world countries tree visualizes the hierarchical relationships between continents, subregions, and countries using an SVG-based tree layout. The d3.hierarchy and d3.tree functions structure the data, while d3.linkHorizontal generates the curved connecting paths. The visualization uses d3.zoom to enable panning and zooming, with text labels sized according to depth level. Data is loaded from a JSON file structured by geographic regions, rendered in the Playfair Display font.

IIlayaraja R

92% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, using a left-to-right dendrogram layout. The SVG rendering uses D3 v5’s `tree` and `hierarchy` functions to compute node positions, while `linkHorizontal` generates curved paths for parent-child connections. Country names appear as text labels with font sizes scaled inversely by depth. The data comes from a static `data.json` file, and the example is a fork that modifies layout and styling.

AAbdouEnsaj

92% match