Jaehyun Yu

@JaeHyunYu·2 public vizzes

World Countries Tree

A hierarchical tree visualization displays the countries of the world organized by region, using a horizontal node-link layout rendered as SVG. The code builds the tree with D3's `d3.hierarchy` and `d3.tree` functions, then draws curved links via `d3.linkHorizontal` and positions text labels from the nested data structure in `data.json`. Interactive pan and zoom are enabled through D3's zoom behavior, while the `Playfair Display` font and green link strokes style the final presentation.

Apr 22, 2020

Loading thumbnail…

World Countries Tree

This interactive visualization presents the hierarchical structure of world countries, organized by continent and subregion. It uses a horizontal tree layout, with the root node on the left and leaf nodes (countries) extending to the right. The D3.js library (v5) computes the tree layout via `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal`. Pan and zoom are handled through `d3.zoom`. The data is loaded from `data.json` and rendered as SVG paths and text elements, with node labels sized by depth.

Apr 22, 2020