world map

100%

✓ Published0🌍 Public

Last edited Apr 12, 2026

Created on Apr 12, 2026

This choropleth map visualizes global population density, with each country colored on a blue sequential scale, from light shades for lower values to darker blues for higher densities. Countries without data appear in gray. The visualization uses D3.js v7 to load TopoJSON world map data and a CSV file, converting them to GeoJSON features. The map is rendered as SVG paths using a Natural Earth projection, with an interactive tooltip on hover and a linear gradient legend showing the density range.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

world map

This world map visualizes population density across countries, with each nation colored on a sequential blue scale from light to dark based on its density value. The map renders in SVG using a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. It loads TopoJSON country boundaries from world-atlas and joins CSV population data by country ID, while a gradient legend shows the density range. Interactive hover tooltips display the country ID and its population density or “No data” when unavailable.

AAparna Desi Reddy

95% 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

87% match

Loading thumbnail…

MAP

This world population choropleth map uses a natural Earth projection to visualize population data across countries. The map is rendered as SVG paths, with each country filled using a sequential blue color scale that maps population values from low to high. Built with D3.js v7, the visualization loads GeoJSON country boundaries via the world-atlas package and topojson-client, then joins them with a CSV dataset of world population figures. The `d3.geoPath` and `d3.geoNaturalEarth1` APIs handle the geographic projection and path generation.

Aaddalalikitha15@gmail.com

87% match

Loading thumbnail…

world population density

This visualization displays world population density on a choropleth map, with a sidebar dropdown to select data from 1980, 2000, 2010, or 2022 and a table ranking the top ten most densely populated countries. It uses D3 v6 (d3.geoPath, d3.geoMercator, scaleThreshold) to render an SVG map from GeoJSON data, updating country fill colors on selection. A hover tooltip shows the country name and density value. Population density data comes from a CSV file linking country codes to values per year.

Jjayanthbalina@gmail.com

86% 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

86% match

Loading thumbnail…

choropleth map for the "Density (P/Km2)"

This choropleth map visualizes global population density by coloring each country according to its estimated population (pop_est) using a viridis sequential color scale. The map renders world geography as SVG paths via d3.geoPath, with country boundaries stroked in white and a hover effect darkening each region. The code loads world-atlas TopoJSON data through d3.json, converts it to GeoJSON with topojson.feature, and maps population values to fill colors. D3 v7 handles the SVG generation and data binding, while the color scale uses d3.scaleSequential with d3.interpolateViridis for continuous color encoding.

JJames Cruz

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…

TopoJSON

This world map choropleth visualizes population density per km² by country, using a threshold color scale with breakpoints at 1, 10, 30, 50, and 100 people per square kilometer. Countries without matching data appear gray. The visualization renders with d3.geoPath and a Mercator projection fitted to a 960×520 SVG,

AAnurup Reddy

86% match