map

100%

✓ Published0🌍 Public

Last edited Nov 8, 2025

Created on Nov 8, 2025

This visualization displays a world map where each country is colored according to its population using a sequential yellow-orange-red color scale. Population data is loaded from a CSV file and merged with country geometries from the world-atlas TopoJSON dataset. The map uses a Mercator projection via d3.geoMercator and renders paths with d3.geoPath, while hovering over a country reveals its name and population in a tooltip. Missing data appears gray, and the SVG canvas includes a light blue background.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

map viz

This choropleth shows world population by country using a natural Earth projection. It renders country boundaries as SVG paths via d3.geoPath, with fill colors derived from a sequential YlGnBu scale encoding population values from a small embedded dataset. Hovering triggers a tooltip displaying country name and population. A gradient legend with an axis communicates the color-to-value mapping, while nations lacking data appear gray. The map loads country geometries from the world-atlas TopoJSON file, processed with topojson.feature.

Ddeepthinaidu2001@gmail.com

87% match

Loading thumbnail…

MAP

This map visualizes global population estimates for each country using a choropleth color scale, where darker reds indicate higher population values. The geographic outlines are rendered as SVG paths generated from world-atlas TopoJSON data, projected with `d3.geoMercator`. Population figures come from a TSV dataset loaded via `d3.tsv`, and the fill color is computed with `d3.scaleLinear`. The visualization also includes interactive pan and zoom functionality through `d3.zoom`, and hover states change country colors to purple via CSS.

AAnissa Belkelfa

87% match

Loading thumbnail…

World Map

This interactive world map visualizes population data by country for 2018, using color and size to distinguish between regions with and without reported figures. The visualization employs a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with countries rendered as SVG paths. Population values are mapped to circle sizes using `d3.scaleSqrt`, and a size legend with tick marks displays the scale. Users can pan and zoom through `d3.zoom`, and hovering over a country reveals its population via a tooltip. Data comes from a CSV file joined to TopoJSON world atlas geometry.

Rrohit181099

86% match

Loading thumbnail…

map exemple

This map example visualizes global population estimates by country using a dark red color scale. The code loads geographic data from the world-atlas package and joins it with a TSV file containing population statistics. The visualization uses the d3.geoMercator projection and d3.geoPath to render country boundaries as SVG paths, while the topojson library converts the GeoJSON features. Hovering over a country turns it purple, and the map supports zooming through d3.zoom and event handling.

JJuliette

86% match

Loading thumbnail…

Map

A world choropleth map visualizes population by country using a blue threshold color scale. The SVG rendering combines world-atlas TopoJSON geographic features with population data from a local JSON file, linked by country ID. D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` draw the map and grid lines, while hover tooltips reveal country names and formatted population values.

AArun Kumar M

86% match

Loading thumbnail…

Map

This visualization is a world population density map where each country is colored according to its inhabitants per square kilometer, using a sequential color scale from light blue (sparse) to red (dense). It displays a legend and tooltips on hover, allowing users to inspect individual countries. Built with D3 v7, the map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render geographic boundaries from TopoJSON data, while population statistics are parsed from a TSV file and aggregated with `d3.rollup` and `d3.sum`.

AAnurup Reddy

85% match

Loading thumbnail…

Maps

This choropleth map visualizes world population by country using a blue sequential color scale. It loads GeoJSON country boundaries and a CSV of population data, joining them by ISO3 country codes. The map is rendered with D3.js, using `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw SVG paths. Countries with missing data are shown in gray. Hovering over a country reveals a tooltip with the country name and formatted population. A gradient legend displays low-to-high population values with tick marks.

RRamdas Dheeraj

84% match

Loading thumbnail…

making map

This example shows a choropleth world map of population by country for 2022, with each country shaded according to its population using a sequential blue color scale. Countries with no data appear in light gray. The visualization loads population data from a GitHub-hosted JSON file, then uses `d3.json` to fetch country geometries from the world-atlas package, applies a Natural Earth projection with `d3.geoNaturalEarth1`, and renders the map as SVG paths via `d3.geoPath`. Tooltips display exact population values for each country.

Aadithiarikatla@gmail.com

84% match