Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published0🌍 Public
AAnnisa Farida
Last edited Sep 17, 2019
Created on Sep 17, 2019
Forked from Circles on a Map

This map visualizes population by country using circles sized with a square-root scale, where the area of each circle is proportional to a country's population. Users can pan and zoom the map, and hovering over a country reveals its name and population, while countries with missing data are colored differently. The visualization is built with D3 v5 and uses the `geoNaturalEarth1` projection, `geoPath` for rendering country shapes, and `scaleSqrt` for the circle sizes. Data comes from a CSV file and a TopoJSON world atlas, processed using the `topojson` library.

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 uses a natural Earth projection to display the population of each country as a circle, where the circle's area is proportional to the country's 2018 population. Users can pan and zoom the map, and hovering over a country reveals its name and population in a tooltip. The D3 code loads data from a UN CSV and a TopoJSON world atlas, computing circle sizes with `d3.scaleSqrt` and rendering the map using `d3.geoPath`. A size legend and a color legend for missing data are also included.

Ddtd-amiele
94% match
Loading thumbnail…

Circles on a Map

This visualization uses proportional circles to show each country’s population, with circle area scaled by the 2018 population data from a CSV file. The map renders with `d3.geoNaturalEarth1` projection and `d3.geoPath`, while a square-root scale (`d3.scaleSqrt`) determines circle radii. Users can pan and zoom via `d3.zoom`, and hovering a country reveals its name and population in a tooltip. A color legend and size legend are built with reusable D3 functions, and the map data comes from the visionscarto world atlas TopoJSON.

Yyakupermurat
93% match
Loading thumbnail…

Circles on a Map

This visualization displays global population by country using circles overlaid on a natural Earth projection map, with circle area proportional to 2018 population data. Users can pan and zoom the map and hover over countries to see region names and population figures. The implementation uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, and `scaleSqrt` for sizing, while loading data from a CSV file and TopoJSON world atlas. Circle positions derive from projected centroids, and a custom size legend communicates the population scale.

EElena Dreosti
93% match
Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection to display global population data for 2018, with each country represented by a circle whose area is proportional to its population. The map supports pan and zoom interactions, and hovering over a country reveals its population through a tooltip. Built with D3.js, it uses `d3.geoPath` for map rendering, `d3.scaleSqrt` for the size scaling, and custom legends to explain both the color scheme and circle sizes. Population data comes from a CSV file joined to a TopoJSON world atlas.

GGamue-cmd
93% match
Loading thumbnail…

Circles on a Map

This visualization displays the population of each country as a circle on a natural Earth projection map, with the circle’s area proportional to the 2018 population data. Hovering over a country reveals its name and population, while pan and zoom are enabled. The map is rendered as SVG using `d3.geoPath` with a `geoNaturalEarth1` projection, and population data is joined from a CSV to country geometries using `topojson`. A square-root size scale, implemented with `d3.scaleSqrt`, drives the circle radii, and a legend is built through custom `sizeLegend` and `colorLegend` functions.

Hhannahwilson2
93% 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
93% 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
93% match
Loading thumbnail…

Circles on a Map

This visualization maps global population data by country, using circle areas scaled with `d3.scaleSqrt` to represent each nation’s population. The world map is rendered with the Natural Earth projection via `d3.geoPath`, and users can pan and zoom using `d3.zoom`. Hovering over a country reveals its name and population, while circles are positioned at geographic centroids computed with `d3.geoCentroid`. Data comes from a CSV file loaded and processed alongside TopoJSON world geometry.

Iinroadings
93% match