World Population Tree Visualization

Last edited Nov 10, 2025

Created on Nov 10, 2025

This interactive tree visualization displays world population data organized hierarchically from continent to country to city. Using D3.js v7, it loads a CSV file with columns for Continent, Country, City, and Population, then constructs a hierarchical layout with `d3.tree()` and `d3.hierarchy()`. Nodes are colored by depth level using `d3.scaleOrdinal()`, with circles representing cities and larger nodes for parents. Hovering reveals tooltips showing city population details. The SVG renders vertical links via `d3.linkVertical()` and scales responsively through a viewBox.

AI-generated description

World Population Tree Visualization

An interactive D3.js tree visualization showing world population data organized hierarchically: Continent → Country → City.

Features

Hierarchical Tree Layout: Data organized from continents down to individual cities
Color Coding: Different colors for each tree depth level
Interactive Tooltips: Hover over nodes to see detailed information
Responsive SVG: Scales to fit different screen sizes

Setup

Replace the CSV_URL in index.html with your own CSV file URL
Your CSV should have the following columns:
- Continent: The continent name
- Country: The country name
- City: The city name
- Population: The population (numeric)
Open index.html in your browser

CSV Format Example

MIT Licensed

Similar vizzes

second

An interactive hierarchical tree visualization displays world population data organized by continent, country, and city, with color-coded nodes indicating each level. Hovering over city nodes reveals population details through a tooltip. The visualization uses D3.js version 7 with the `d3.hierarchy` and `d3.tree` layouts, `d3.linkVertical` for edges, and SVG rendering. It loads data from a CSV URL via `d3.csv` with fallback to embedded sample data, and includes validation and error handling.

97% match

second

This interactive D3.js v7 tree visualization displays the hierarchical relationship between continents, countries, and cities based on population data. It uses a vertical tree layout with color-coded nodes for each level (root, continent, country, city) and interactive tooltips that show population details on hover. The visualization is built with D3's `d3.hierarchy`, `d3.tree`, and `d3.linkVertical` APIs, rendering as SVG, and loads sample data from a JavaScript array with an optional CSV URL fallback.

95% match

second

This tree visualization displays a hierarchical dataset of cities organized by continent and country, with population values shown on hover. It loads city data from a CSV URL with automatic fallback to built-in sample data. The implementation uses D3 v7’s `d3.hierarchy`, `d3.tree`, and `d3.linkVertical` to compute and draw the layout, then appends SVG circles and text labels with color-coding by tree depth.

94% match

second

94% match

World Population Tree

This interactive visualization shows the hierarchical structure of world population data, organizing countries into regions and subregions like Southern Asia and Western Asia. It presents a tree layout where the root node represents the World, branches into continental groupings, and extends to individual countries. The visualization uses D3.js version 5, employing the `tree`, `hierarchy`, and `linkHorizontal` APIs to compute the layout and draw curving links between parent and child nodes. The font size scales with depth, making higher-level categories appear larger, while pan and zoom functionality is enabled through the `zoom` event handler.

OOskar Weinfurtner

World Countries Tree

This interactive visualization displays the hierarchical structure of world countries organized by continent and subregion, rendered as an indented tree layout. It uses D3.js v5 with the `tree`, `hierarchy`, and `linkHorizontal` APIs to compute positions and draw links, along with `zoom` and `event` for pan-and-zoom interaction. The data is loaded from `data.json` via `json()`. Node labels show country names with font size decreasing by depth, and the SVG output uses a teal stroke for connecting paths.

RRamy

World Countries Tree

This interactive visualization displays the hierarchical structure of world countries organized by continent and subregion using a tree layout. The D3.js v5 code loads geographic data from a JSON file and renders it as an SVG with horizontal links connecting parent and child nodes. Text labels show country names with font sizes that decrease at deeper hierarchy levels, while zoom functionality allows users to explore the full tree structure. The visualization uses the `tree` layout, `linkHorizontal` path generator, and D3's zoom behavior for panning and scaling.

Iitsmajidnaeem@gmail.com

World Countries Tree

This visualization displays a tree diagram of world countries nested by continent and region, with each leaf node labeled by country name. It uses the D3 v5 library, specifically `d3.tree` and `d3.hierarchy`, to compute the layout, and `d3.linkHorizontal` to generate the curved link paths. The SVG rendering is styled with teal strokes and serif font text, and includes zoom interaction via `d3.zoom`. Font size scales inversely with tree depth, making top-level regions larger. The example is built around two data files (`data_v1.json` and `data_v2.json`) that structure the hierarchical world geography.

SSukesh Kumar