Skip to main content
SimilarExport ZIP
100%

Fork of tree visualization of countries

✓ Published0🌍 Public
Aakshayms0
Last edited Nov 2, 2022
Created on Nov 2, 2022

This example displays a hierarchical tree visualization of countries organized by continent and subregion, with the root node labeled “World” and leaves representing individual nations. The data is loaded from a JSON file and rendered as an SVG using D3 v7’s `tree` layout, `hierarchy`, and `linkHorizontal` generators. Nodes are labeled with text whose font size decreases with depth, while curved links are styled with a teal stroke. Pan and zoom interactions are enabled via `d3.zoom`, and the layout adapts to the browser window dimensions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as an interactive tree diagram. It uses D3 v5’s `tree` layout, `linkHorizontal` generator, and `zoom` behavior on an SVG canvas, with nodes labeled by country names. The data is loaded from a JSON file, and the static layout supports pan and zoom via D3’s zoom event. Text size decreases with node depth to emphasize hierarchy.

Ffkukcha
92% match
Loading thumbnail…

Fork of World Countries Tree

This example presents a hierarchical tree visualization of countries organized by continent and subregion, with the world at the root. The tree uses horizontal links and text labels whose font size decreases with depth, displaying all country names in a readable layout. The visualization supports pan and zoom via the d3.zoom interaction, applying the transform to a group element. The code builds the layout with d3.tree and d3.hierarchy, renders links using d3.linkHorizontal, and loads the hierarchical data from a JSON file.

PPiotr Paszek
91% 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
91% match
Loading thumbnail…

Fork of World Countries Tree

A hierarchical tree layout displays the countries of the world organized by continent and subregion, with each country as a leaf node. The visualization uses `d3.tree` and `d3.hierarchy` to compute the layout from a nested JSON structure, rendering curved links with `d3.linkHorizontal`. Text labels position nodes with font sizes inversely scaled by depth inside an SVG, while `d3.zoom` enables panning and zooming the entire tree.

MM
91% match
Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries organized by continent and subregion, with each leaf node representing a country rendered as text. Using the D3 v5 tree layout, the code converts nested JSON data into a horizontal dendrogram, connecting parent-child relationships with curved paths generated by `linkHorizontal`. Text nodes are positioned via `d3.hierarchy` and styled with font sizes decreasing by depth. The SVG output supports pan and zoom through D3’s `zoom` behavior, while labels include white text-shadows for readability against the teal link strokes.

EErico Vasconcelos
91% match
Loading thumbnail…

Fork of World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, with each country labeled as a leaf node. The tree layout positions nodes horizontally, with links drawn as curved paths and text labels scaled by depth. Built with D3 v5, it uses `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to compute and render the layout, while a zoom behavior enables panning and scaling of the SVG canvas. The data is loaded from a JSON file, and the styling uses a serif font with orange link strokes.

Iiidalindh
91% match
Loading thumbnail…

Fork of Fork of World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a branching layout that expands from left to right. The data is loaded from a JSON file, and the tree structure is rendered as SVG paths and text labels. The code uses D3 v5’s `tree()` layout, `hierarchy()`, and `linkHorizontal()` to compute the layout and draw the connecting links. Users can pan and zoom the entire diagram via the `zoom()` behavior, with text sizing decreasing at deeper levels to fit the hierarchy.

DDamian Grzanka
91% match
Loading thumbnail…

Fork of World Countries Tree

This example visualizes a hierarchical tree of world countries organized by continent and subregion, with each country name displayed as a text label. The tree expands horizontally with larger font sizes for higher-level categories, and the entire visualization supports zooming and panning through a zoom behavior. The code builds the layout using `d3.tree` and `d3.hierarchy`, renders links with `d3.linkHorizontal`, and loads data from a JSON file via `d3.json`. Countries are grouped into regions like Southern Asia and Western Asia, with styling applied through SVG paths and text elements.

취취코
91% match