Map

100%

✓ Published0🌍 Public

Last edited May 14, 2020

Created on May 14, 2020

This map visualizes global population data from a CSV file (accessed via `d3.csv`), with each country’s population represented by a semi-transparent circle overlaid on a geographic projection. The circles’ areas are scaled using `d3.scaleSqrt`, and the map is rendered with `d3.geoPath` and `d3.geoNaturalEarth1` on an SVG. Users can pan and zoom via `d3.zoom`, and hovering over a country reveals a tooltip with its regional name and population. A size legend, built with custom `sizeLegend.js`, and a color legend (`colorLegend.js`) accompany the visualization. Interactive encoding uses the `join` pattern to update SVG elements.

AI-generated description

Visualizing population by country using circles on a map! The area of each circle corresponds to the population of the country it represents. You can also pan & zoom, and hover over each country for more information.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization displays global population by country using scaled circles positioned at each country’s geographic centroid. Circle area corresponds to population magnitude, with a square-root scale controlling radius. The map supports pan and zoom, and hovering over a country reveals its name and population. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering country outlines from TopoJSON, and `d3.zoom` for interaction. Population data is loaded from a CSV file, and a custom size legend displays tick values using `d3.scaleSqrt`.

Jjiangxu1298

86% match

Loading thumbnail…

Circle on a Map

This example visualizes global population data by overlaying semi-transparent circles on a natural Earth projection map. The circles are sized using `d3.scaleSqrt` based on 2018 population figures, and hovering over countries reveals their population via a tooltip. The visualization uses `d3.geoPath` with `geoNaturalEarth1` for map projection, `d3.zoom` for panning and zooming, and includes both a color legend and a size legend built from `d3.scaleOrdinal` and `d3.scaleSqrt`. Data is loaded from a CSV file and TopoJSON world atlas using `d3.csv` and `d3.json`.

Ggabcoderboi

86% match

Loading thumbnail…

Circles on a Map

This visualization shows global population by country, with circles positioned at each country’s centroid. Circle area encodes population size, while a size legend communicates the scale; hovering reveals exact values or “missing data.” Users can pan and zoom the map. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, `d3.zoom` for interaction, and `d3.scaleSqrt` for area encoding. Country boundaries come from TopoJSON, with population data loaded via CSV.

LLittledevil7

86% match

Loading thumbnail…

Circles on a Map

This interactive map visualizes global population by country in 2018, using circles whose area scales with population size. Users can pan, zoom, and hover over countries to see population details or a missing-data note. The visualization uses D3 v5, with `d3.geoPath` and the Natural Earth projection to render country outlines, while `d3.scaleSqrt` maps population to circle radii. Interactive zoom is handled via the `d3.zoom` module, and a custom size legend provides scale reference. Data comes from a UN population CSV merged with TopoJSON world atlas geometry.

0007ebey

85% match

Loading thumbnail…

Circles on a Map

This example visualizes global population data for 2018 by placing semi-transparent circles on a natural Earth projection map, where each circle’s area corresponds to a country’s population. Users can pan and zoom the SVG scene, and hover over countries to see their name and exact population in a tooltip. The code uses d3.geoNaturalEarth1, d3.geoPath, d3.geoCentroid, d3.zoom, d3.scaleSqrt, and d3.scaleOrdinal, with population data loaded from a CSV and country boundaries from TopoJSON. A custom size legend and color legend are implemented using SVG groups.

Yyuyang

85% match

Loading thumbnail…

Circles on a Map

This map visualization depicts world population by country, with circle area scaled to the 2020 population figures. Users can pan and zoom across the interactive SVG, and hovering over a country highlights it while revealing a tooltip with the region name and population. The visualization is built with d3.v5, using geoNaturalEarth1, geoPath, and geoCentroid for the map projection, while loadAndProcessData merges CSV population data with TopoJSON world atlas shapes. A square-root scale controls circle size, and custom legends render the data encoding.

Jjesramyep1263

85% match

Loading thumbnail…

Circles on a Map

Jjesramyep1263

85% match

Loading thumbnail…

Circles on a Map

This interactive map displays global population data using proportional circles positioned over each country’s centroid, with a color-coded legend for categories and a size legend for population values. Built with D3 v5, it renders world geography via `d3.geoPath` and a Natural Earth projection, while applying `d3.zoom` for panning. Population values from a CSV are joined to TopoJSON features, and `d3.scaleSqrt` determines circle radii, with tooltips showing region names and formatted numbers. SVG elements and transitions animate legend updates.

Ggilbster

85% match