Circles on a Map

Circles on a Map

This visualization displays global population data for 2018, with each country represented by a circle whose area corresponds to population size. Pan and zoom interactions use d3.zoom. The map is rendered with d3.geoNaturalEarth1 and d3.geoPath, while circle radii are scaled by d3.scaleSqrt. Hovering reveals country names and population counts via SVG title elements. Data comes from a CSV joined with TopoJSON world atlas geometry, and a d3.scaleOrdinal color legend and size legend are included.

NNikhil

Circles on a Map

This example visualizes population by country using scaled circles overlaid on a natural Earth projection map, with circle area proportional to each country’s 2018 population. Pan and zoom are enabled via d3.zoom, and hovering over a country reveals its exact population through a title tooltip. The map is rendered as SVG using d3.geoPath and topojson, while a d3.scaleSqrt maps population values to circle radii. A size legend generated with custom d3 code displays population ticks, and the data is loaded from a CSV and a TopoJSON world atlas file.

Wwaqastufail

Circles on a Map

This visualization maps global population data by country, using circle area to represent population size for 2018. Users can pan and zoom across a natural Earth projection, and hover to reveal exact population counts. The visualization uses d3.geoPath, d3.geoNaturalEarth1, d3.scaleSqrt, and d3.zoom, with data from a CSV joined to TopoJSON world atlas geometry. A size legend and color legend are rendered as SVG, with circles and country borders styled for clarity.

LLeandro Souza

Circles on a Map

This example visualizes global population by country, with circle area encoding 2018 population values on a natural Earth projection. Users can pan and zoom the map, and hovering over countries reveals more details via tooltips. The visualization uses d3.geoPath for map rendering, d3.scaleSqrt for proportional circle sizing, and d3.zoom for interactive navigation. Data comes from a CSV file joined with TopoJSON world geometry, while d3.scaleOrdinal and size legends explain the visual encoding.

Ssophburke

circles on map

This visualization displays global population by country, with circle area scaled proportionally to 2018 population data from a CSV file. The map renders using d3.geoNaturalEarth1 projection and d3.geoPath with TopoJSON world atlas data, while hover tooltips reveal precise population figures. Interactive features include d3.zoom for panning and zooming, with circles positioned using geoCentroid. Population values drive a d3.scaleSqrt sizing scale, and a custom sizeLegend component visualizes the quantitative mapping alongside a color legend using d3.scaleOrdinal.

YYounes Mohamed ABDAT

Circles on a Map

This visualization displays global population data for 2018 using scaled circles positioned at country centroids on a natural Earth projection map. Circle area encodes population magnitude, while hovering reveals exact population figures and regional names. The map supports pan and zoom interactions through d3.zoom. Built with d3.geoNaturalEarth1 and d3.geoPath for map rendering, it uses d3.scaleSqrt for circle sizing and d3.scaleOrdinal with a spectral scheme for the categorical color legend. Population data comes from a CSV file processed alongside TopoJSON world boundaries.

EElena Dreosti

Circles on a Map

This visualization displays global population by country using scaled circles on a natural Earth projection map, with circle area proportional to each country's 2018 population. Users can pan and zoom via d3.zoom and hover over countries to see exact population figures through SVG title tooltips. The example uses d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and topojson for world geometry. Population data is loaded from a CSV file, and countries lacking data appear in red rather than gray.

Jjesramyep1263

Circles on a map

This map visualization displays the global population distribution for 2018 using circles sized by population count, placed at each country's geographic centroid over a natural Earth projection. The map uses `d3.geoPath` for rendering country boundaries and `d3.scaleSqrt` for circle sizing, with a legend showing population ranges. Users can zoom and pan using `d3.zoom`. Population data comes from a UN dataset (medium variant estimates), joined with TopoJSON world geometry via `d3.json` and `d3.csv`. A color legend marks missing data countries in red.

Ccornshoots