hannahwilson2

@hannahwilson2·3 public vizzes

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.

Nov 27, 2020

Loading thumbnail…

Circles on a Map

This example visualizes population by country using circles on a world map, with circle area proportional to 2018 population data. Users can pan and zoom the map, and hover over countries to see detailed figures. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath for map outlines, d3.scaleSqrt for circle sizing, and a custom size legend. Population data is loaded from a CSV file, while country boundaries come from TopoJSON, and map interactions are enabled through d3.zoom.

Nov 27, 2020

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 as colored circles positioned on a natural Earth projection map. Countries are shaded with a spectral color scale, while circle size encodes population magnitude using a square-root scale. The code loads CSV and TopoJSON data with d3.csv and d3.json, then renders the map using d3.geoPath and d3.geoNaturalEarth1, with circles placed via d3.geoCentroid and scaled by d3.scaleSqrt.

Nov 27, 2020