World Population Tree Visualization

Last edited Nov 10, 2025

Created on Nov 10, 2025

Forked from 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.

AI-generated description

World Population Tree Visualization

An interactive D3.js tree visualization showing the hierarchical relationship between continents, countries, and cities by population.

Features

Hierarchical Tree Layout: Displays data as Continent → Country → City
Color Coding: Different colors for each level (Root, Continent, Country, City)
Interactive Tooltips: Hover over nodes to see detailed information
Responsive Design: Adapts to different screen sizes

Setup

Quick Start with Sample Data

The visualization comes with sample data pre-loaded. Open index.html in a web browser to see the tree.

Using Your Own Data

Prepare CSV Data
- Create a CSV file with columns: Continent, Country, City, Population
- 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.

second

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.

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.

second

TREE

This tree visualization displays a hierarchical dataset of world countries organized by continent and subregion, using a horizontal icicle-style layout. The D3 v5 code builds the structure with `tree()` and `hierarchy()`, renders edges as SVG paths via `linkHorizontal()`, and labels nodes with scaled text. Users can zoom and pan through the SVG canvas using the `zoom()` interaction API, with the viewport transform applied to a group element. Data comes from a JSON file, and styling uses the Maven Pro font with cyan edges.

Ccocktaildata

80% match

Countries Tree

This visualization displays a hierarchical tree of countries organized by continent and subregion, rendered as an SVG with horizontal links and text labels. The example uses D3 v5’s `tree` layout, `hierarchy`, `linkHorizontal`, and `zoom` APIs to generate and interactively pan and scale the structure. Data from `data.json` feeds the hierarchy, with font size varying by depth and leaf nodes left-aligned while parent nodes are centered.

Jjeelong

79% match

Data Tree

This visualization shows a hierarchical tree of world regions and countries, with countries nested under their respective continents and subregions. The tree is rendered with SVG paths connecting parent and child nodes, using a horizontal layout where text labels display country names at sizes that decrease with depth. The code uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` APIs to compute the layout, and includes zoom functionality via `d3.zoom`. Data comes from a static JSON file containing the geographic hierarchy.

MMichael Milano

79% match