Fork of World Countries Tree

Fork of World Countries Tree2

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a static SVG layout. The code constructs the tree with `d3.tree` and `d3.hierarchy` from a nested JSON data source, rendering parent-child links with `linkHorizontal`. A zoom behavior enables pan and zoom interaction on the entire tree, while labels are styled with the Playfair Display font. The visualization demonstrates a straightforward approach to displaying geographical groupings without additional data encoding.

SShashi Gowda

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.

취취코

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries organized by continent and subregion, using a collapsible layout where text labels are positioned along branching paths. The tree renders in SVG with zoom and pan capabilities enabled by the d3.zoom interaction. It uses d3.hierarchy to build the structure from a JSON data source, d3.tree to compute the layout, and d3.linkHorizontal to generate curved connector paths. Text size scales inversely with depth, and styling uses the Playfair Display font with a custom CSS shadow effect for readability.

HHemanta Devkota

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

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

Fork of World Countries Tree

This visualization renders the hierarchical structure of world countries as a vertical tree, grouping nations by continent and subregion. It shows the nested relationships between continents, regional divisions, and individual countries. The code uses D3 v5’s `tree` layout and `hierarchy` functions to compute node positions, with `linkVertical` generating curved paths for connections. SVG circles and text labels display each node, while the `zoom` behavior enables panning and scaling. Data is loaded from a JSON file, and styling uses the Playfair Display font with color-coded nodes and links by depth.

HHaili0109

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries organized by continent and subregion, with the root labeled "Asia" and branches extending to regions like Southern Asia and individual nations. The D3 v5 code uses `d3.hierarchy` and `d3.tree` to compute the layout, `d3.linkHorizontal` to draw curved links between nodes, and `d3.zoom` for panning and zooming. Text labels render each node’s name with font sizes that shrink by depth, while styles.css applies a serif font and green stroke. The data comes from the bundled `data.json` file.

Jjmukul1997

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