World Map with Population

100%

World Map with Population

✓ Published0🌍 Public

Last edited Nov 10, 2025

Created on Nov 8, 2025

This example displays a world map choropleth of GDP data, with each country colored according to its economic value. It uses D3 v7 and TopoJSON to load world geography, projecting the map with the `d3.geoNaturalEarth1` projection and rendering countries as SVG paths via `d3.geoPath`. GDP values are fetched from a CSV file, matched to countries through flexible column-name heuristics, and visualized with a color scale. A hover tooltip provides country-specific details, while the map includes a legend for interpreting the color encoding.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map in D3

This example shows a choropleth world map displaying each country’s total GDP in current US dollars for 2015, colored from light to dark to indicate relative economic output. Countries without data appear in gray. The visualization uses D3 v7 and TopoJSON to load geographic boundaries, with d3.geoPath rendering the SVG country shapes. A hover tooltip reveals the exact GDP value per country, while a legend explains the color scale. The GDP data itself is embedded directly in the page as CSV text.

Kkfhujosefsson@dons.usfca.edu

89% match

Loading thumbnail…

GDP World Map

This world map visualizes geographic GDP data using a choropleth approach, coloring countries by their economic output. The example loads GeoJSON map data and renders it as SVG paths with `d3.geoPath`, while numeric GDP values drive a color scale. It uses `d3.json` to fetch the dataset and `d3.scaleThreshold` to map values to fill colors, with a tooltip providing details on hover. Built with D3 v6, the visualization demonstrates basic geographic mapping and data-driven styling in an SVG container.

TTom Heffernan

88% match

Loading thumbnail…

World Choropleth

This interactive choropleth visualizes world countries, colored by economy type and labeled with country names. A hover tooltip displays each country's population, GDP, income group, and continent. The map uses D3's `geoNaturalEarth1` projection and `geoPath` for rendering, with TopoJSON for geographic data. Zoom and pan are enabled via D3's `zoom` behavior, while a categorical color legend uses `scaleOrdinal` with the `schemeSet3` palette to differentiate economy categories.

CCurran Kelleher

88% match

Loading thumbnail…

World Map

This interactive choropleth map displays GDP per capita (PPP, current international dollars) for 2020 across world countries, using a yellow-green-blue sequential color scale with missing data filled in green. The visualization fetches topojson country outlines and a CSV dataset, then renders them using d3.geoNaturalEarth1 projection and d3.geoPath. Color encoding relies on d3.scaleQuantile with d3.schemeYlGnBu, while country boundaries are joined via d3.selectAll and Promise.all handles asynchronous data loading. The map also draws graticule lines and an outline for geographic context.

LLakshmipriya-kalapala

85% match

Loading thumbnail…

world map

This example shows a choropleth world map colored by each country's economy classification, with a clickable color legend that filters and highlights matching countries while dimming others. The map uses d3.geoNaturalEarth1 and d3.geoPath to render TopoJSON world-atlas data, with d3.zoom enabling pan and zoom interactions. A d3.scaleOrdinal maps the spectral color scheme to the economy categories, and tooltips display country names and values. The SVG rendering includes CSS hover effects and opacity transitions for non-selected regions.

Zzhangfa

84% match

Loading thumbnail…

world map

A choropleth map of world countries colored by economy category, with an interactive legend that filters the map when clicking a category. Hovering a country displays its name and value via a tooltip. The visualization uses D3 v5 with d3.geoNaturalEarth1 projection, d3.geoPath for rendering, and d3.zoom for pan and zoom. Data comes from the world-atlas TopoJSON and TSV files, processed with topojson.feature and d3.tsv.

BBajiSharifPatan@my.unt.edu

84% match

Loading thumbnail…

A9 - World Choropleth Map

This example shows a world choropleth map of 2021 GDP values by country, with darker blue shading representing higher GDP. A tooltip displays the country name and GDP on mouseover, while a horizontal color legend encodes the scale. The visualization uses a geographic projection via `d3.geoMercator` and `d3.geoPath` to render GeoJSON features, with color mapping through `d3.scaleSequential` and `d3.interpolateBlues`. GDP data is loaded from a CSV using `d3.csv`, and the legend is built with the `d3-legend` library.

DDuc Pham

84% match

Loading thumbnail…

World Map

This example presents a choropleth world map visualizing countries colored by income group, with data sourced from World Atlas TopoJSON and TSV files. It uses D3 v5 with a geoNaturalEarth1 projection and d3.geoPath to render countries, while a color legend explains the ordinal color scale. The map supports zooming via d3.zoom, and hovering highlights countries in green. Animated transitions update the legend circles when the scale changes.

HHemanthh81

84% match