Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

World Countries Tree

Public visualization

World Countries Tree

0 stars0🌍 Public
NNico Donovan
Last edited Jul 16, 2020
Created on Jul 16, 2020
Forked from Blank Canvas

This interactive visualization displays a hierarchical tree of world countries organized by continent and subregion, rendered as an SVG node-link diagram. The tree layout uses `d3.tree()` and `d3.hierarchy()` to position nodes, while `d3.linkHorizontal()` generates curved links between parent and child nodes. Panning and zooming are enabled through `d3.zoom()`. Data comes from a local JSON file. Text labels show country names, with font size decreasing by depth and a Playfair Display font applied via CSS.

AI-generated description

constructing a node-link tree visualization

adding text labels to the nodes

using the margin convention

tweaking label alignment and size

panning and zooming

using a custom font

Comments

Sign in to join the discussion.

MIT Licensed