100%

second

✓ Published1🌍 Public

119h61a05c9@cvsr.ac.in

Last edited Nov 10, 2025

Created on Nov 10, 2025

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

AI-generated description

World Population Tree

An interactive hierarchical visualization of world population data organized by Continent → Country → City.

Features

Hierarchical Tree Visualization: Display data in a three-level tree structure
Color-Coded Levels: Different colors for each hierarchy level
Interactive Tooltips: Hover over cities to see detailed population information
Responsive Design: Clean, modern UI with smooth interactions
Error Handling: Graceful fallback to sample data if CSV fails to load

Project Structure

index.html - Main HTML file with styling and layout
tree.js - D3.js visualization logic and data processing
data.js - Data source configuration
README.md - Documentation (this file)

Data Format

The visualization expects data in CSV format with the following columns:

Column	Type	Description
Continent	String	Continental region
Country	String	Country name
City	String	City name
Population	Number	City population

Example CSV

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

119h61a05c9@cvsr.ac.in

97% match

Loading thumbnail…

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.

119h61a05c9@cvsr.ac.in

95% match

Loading thumbnail…

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.

119h61a05c9@cvsr.ac.in

93% match

Loading thumbnail…

second

119h61a05c9@cvsr.ac.in

93% match

Loading thumbnail…

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

77% match

Loading thumbnail…

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

77% match

Loading thumbnail…

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

77% match

Loading thumbnail…

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

76% match