Fork of World Countries Tree

100%

Fork of World Countries Tree

✓ Published0🌍 Public

Last edited Mar 29, 2024

Created on Mar 29, 2024

A collapsible tree visualization displays the hierarchical structure of world countries, organized by continent and subregion. The code uses D3 v5’s `stratify` to convert a flat CSV dataset into a hierarchy, then applies the `tree` layout and `linkHorizontal` to render curved links. Nodes are labeled with country names, with font size decreasing by depth. The SVG output supports panning and zooming via `d3.zoom`, and links and text are styled with custom CSS including a serif font and text shadows.

AI-generated description

MIT Licensed

Similar vizzes

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.

95% match

Loading thumbnail…

Fork of World Countries Tree

This example visualizes the hierarchical structure of world countries organized by continent and subregion, with a tree layout that branches from a global root. Built with D3 v5, it reads hierarchical data from a CSV file and renders it as an SVG using `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` for smooth curved links. Pan and zoom functionality is enabled via `d3.zoom`, while text labels display country and region names at varying font sizes based on depth. The visualization uses a clean, minimal aesthetic with green connecting paths and serif typography.

95% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, using a collapsible-free horizontal layout. The code builds the tree with `d3.tree` and `d3.hierarchy`, rendering links as horizontal paths via `d3.linkHorizontal`. Text labels scale in font size based on depth, and the entire view supports pan and zoom through `d3.zoom`. Data comes from a pre-structured `data.json` file, and the SVG is styled with custom CSS using the Playfair Display font.

AAnjana Sinha

94% match

Loading thumbnail…

Fork of World Countries Tree

AAnjana Sinha

94% match

Loading thumbnail…

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries, organized by continent and subregion, with country names displayed at varying font sizes based on their depth in the tree. It uses D3 v5 with the `d3.tree` layout and `d3.hierarchy` to compute the node positions, while `d3.linkHorizontal` generates the curved connecting paths. The SVG rendering supports zooming and panning through D3's `d3.zoom` behavior, and the data comes from a local `data.json` file containing the nested geographic structure.

NNelson Ameyo

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

94% match

Loading thumbnail…

Fork of World Countries Tree

This visualization presents the hierarchical structure of world countries organized by continent and subregion, rendered as a horizontal tree layout. The geographic data is loaded from a local JSON file and displayed using SVG elements. Built with D3 v5, the code applies `tree()` layout, `linkHorizontal()` for curved edges, and `zoom()` for panning and scaling. Text labels use a Playfair Display font, with font size decreasing by depth level to emphasize hierarchy.

Gg0ragoa

94% match

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

94% match