Fork of World countries tree

100%

Fork of World countries tree

✓ Published0🌍 Public

Last edited Oct 11, 2021

Created on Oct 11, 2021

This example presents a hierarchical tree of world countries, with nodes arranged using a cluster layout from D3 v5. The visualization uses data2.json to display branches for continents and regions, with leaf nodes styled as colored rectangles scaled by percentage values. D3's `d3.cluster()` and `d3.hierarchy()` arrange the tree structure, while `d3.scaleLinear()` maps data values to rectangle heights. Text elements list category names, percentages, and associated keywords for each leaf, all rendered as SVG. Zooming and panning are enabled via `d3.zoom()`.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Countries Tree

This example displays a hierarchical tree of world countries, organized by region, using a horizontal dendrogram layout. It presents a static snapshot of global geography, with country names rendered as text nodes. The visualization is built with D3 v5, using the `tree` and `hierarchy` layout functions on a JSON data structure, and is rendered as an SVG. Pan and zoom capabilities are implemented using D3’s `zoom` behavior.

JJean David

93% match

Loading thumbnail…

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries, organized from continents down to subregions and individual nations, using a horizontal dendrogram layout. Labels appear at each node, with font size decreasing by depth to emphasize higher-level groupings. The implementation uses D3 v5’s `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to compute the layout and draw SVG paths, while `d3.zoom` enables panning and zooming. Styling relies on a Playfair Display font and teal connection lines, with data loaded from a local JSON file.

Ffkukcha

92% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries organized by continent and region, with a root node labeled "World" branching down to individual nations. The code uses D3 v5's `tree` layout and `hierarchy` function to compute node positions, then renders horizontal links via `linkHorizontal` and country names as SVG text with font sizes scaled inversely by depth. The visualization reads from a data.json file and supports interactive panning and zooming through D3's `zoom` behavior, with a zoom group applied to the entire SVG canvas.

Hharitha13.yln1@gmail.com

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

92% match

Loading thumbnail…

Fork of World Countries Tree

This interactive visualization displays a hierarchical tree of world countries organized by continent and subregion, with each leaf node labeled by country name. The layout uses a horizontally-oriented tree structure where nodes are positioned based on depth and rendered as text elements with varying font sizes. Built with D3 v5, the visualization employs `d3.tree()` for layout computation, `d3.hierarchy()` for data structuring, and `d3.linkHorizontal()` for generating curved link paths between nodes. The SVG rendering includes zoom functionality via `d3.zoom()`, with data loaded from a JSON file containing the hierarchical country classification.

Llrakla

92% match

Loading thumbnail…

Fork of World Countries Tree

This visualization shows the hierarchical structure of world countries, organized by continent and region, as a horizontal tree diagram. It uses D3 v5’s `tree` layout and `hierarchy` function to position the nodes, with `linkHorizontal` generating the curved connecting paths. The visualization supports zooming and panning via D3’s `zoom` behavior, while node labels are displayed with a font size that decreases with depth. The data comes from a local JSON file, and the SVG text elements include a white text-shadow for readability over the mint-green links.

GGleb Bayeshko

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

92% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion. Using d3.json to load hierarchical data, it applies the d3.tree layout to calculate node positions and renders the structure as an SVG with linkHorizontal paths for connections and text labels for each country. The tree supports zooming and panning through d3.zoom, with text size varying by depth to emphasize hierarchy levels.

DDamian Grzanka

92% match