Fork of World Countries Tree

100%

Fork of World Countries Tree

✓ Published0🌍 Public

Last edited Apr 26, 2021

Created on Apr 26, 2021

This visualization shows the hierarchical structure of world countries organized by continent and subregion, with each country name displayed as a text label connected by branching paths. The tree layout uses `d3.tree` and `d3.hierarchy` to compute node positions, while `d3.linkHorizontal` draws the curved links. The SVG rendering supports pan and zoom via `d3.zoom`, and text styling uses a Playfair Display font with white shadows for readability. Data comes from a JSON file containing the nested geographic hierarchy.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Countries Tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree layout. It uses d3.tree and d3.hierarchy to compute node positions, with linkHorizontal for curved connecting paths. The SVG rendering supports zooming and panning via d3.zoom, while text labels display country names with font sizes that decrease by node depth. Data is loaded from a local JSON file, and the styling uses custom CSS with a Playfair Display font and green stroke for links.

IIsigned

97% match

Loading thumbnail…

Fork of World Countries Tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree layout. It uses d3.tree and d3.hierarchy to compute the layout, and d3.linkHorizontal to draw the connecting paths. Node labels are positioned along the tree, with font size scaling by depth, and a d3.zoom behavior allows panning and zooming the SVG view. The rendering uses SVG elements styled with a green stroke and a Playfair Display font, with data loaded from a local JSON file.

CCléa Aumont

97% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays the hierarchical structure of world countries, grouped by continent and subregion, using a tree layout. It renders a horizontal dendrogram where each country appears as a text label, with font size decreasing at deeper levels. The visualization uses d3.hierarchy and d3.tree to compute the layout, with d3.linkHorizontal generating the curved connecting paths. Users can pan and zoom the SVG via d3.zoom. The data comes from a JSON file containing nested geographic regions, and the styling uses a Playfair Display font with text shadows for readability.

Zzaforir2002

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

97% 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 name displayed as a text label. The tree layout positions nodes horizontally, with links drawn as curved paths in green. The visualization uses D3 v5's `tree` and `hierarchy` functions to compute the layout, `linkHorizontal` for path generation, and `zoom` for pan and zoom interactions. Data is loaded from a JSON file, rendered as SVG, and styled with the Playfair Display font.

KKonyk Myroslav

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

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

97% match

Loading thumbnail…

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries organized by continent and subregion, with the nation names rendered as text nodes connected by curved links. It uses a d3.tree layout with a horizontal link generator to position the hierarchy in an SVG canvas, and d3.zoom enables panning and zooming across the full-width and height layout. The data comes from a static JSON file, and the text size decreases with depth to emphasize regional groupings. The code leverages d3.select, d3.hierarchy, d3.linkHorizontal, and d3.event, with custom Playfair Display typography and a stroke color for the paths.

KKaveri Biswas

97% match