Fork of Circles on a Map

Fork of Circles on a Map

This map visualizes global population by country, with circle area proportional to 2018 population figures. Users can pan and zoom, and hovering over countries reveals detailed population data with a tooltip. The visualization uses D3 v5 with `d3.geoPath` and `geoNaturalEarth1` projection to render world boundaries from TopoJSON, while `d3.scaleSqrt` sizes the circles. Population data comes from a CSV file merged with the geometry. A size legend and color legend provide reference, and SVG rendering supports interactive zoom events.

DDonald Bagwell

Fork of Circles on a Map

This visualization shows global population by country using scaled circles on a natural Earth projection map. Circle area corresponds to 2018 population data, while pan and zoom interactions allow exploration, and hovering reveals country names and population figures via tooltips. The implementation uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, d3.zoom for navigation, and TopoJSON for world geography. A color legend and size legend explain the encoding, with data loaded from a CSV file merged with the TopoJSON world atlas.

JJuyeonee

Fork of Circles on a Map

This visualization displays global population by country with circles positioned at each nation’s centroid, where circle area encodes the 2018 population value. Users can pan and zoom the natural Earth projection, while hovering reveals country names and exact figures. The code uses D3 v5 APIs including `geoPath`, `geoCentroid`, `geoNaturalEarth1`, `scaleSqrt`, and `zoom`. A size legend with formatted tick labels explains the circle scaling, and countries lacking data appear in a distinct red shade. Population data loads from a CSV joined with TopoJSON world geometry, rendered as SVG.

Mmunpro2002

Fork of Circles on a Map

This visualization displays global population data as proportional circles positioned on a world map. Each circle's area corresponds to a country's 2018 population, with hover tooltips revealing specific values. The map supports pan and zoom interactions. Built with D3 v5, it uses `geoNaturalEarth1` for the projection, `geoPath` for rendering country boundaries, and `scaleSqrt` for circle sizing. Population data comes from a CSV dataset merged with TopoJSON world atlas geometries. A size legend and color legend are generated using custom D3 modules.

KKainsli

Fork of Circles on a Map

This visualization displays global population by country using circles sized with a square-root scale, projected onto a natural Earth map with pan and zoom. Hovering reveals country names and population values, while missing data appears in red. Built with D3 v5, it uses `geoPath`, `scaleSqrt`, and `geoNaturalEarth1` for map generation, and a custom size legend for circle scaling. Population data comes from a UN CSV file, joined with TopoJSON country geometries.

Vvivianaaai@qq.com

Fork of Circles on a Map

This visualization shows global population for 2018 using circles on a natural Earth projection map, with circle area proportional to population and hover tooltips revealing country names and values. Users can pan and zoom the map. The code uses d3.geoNaturalEarth1, d3.geoPath, d3.geoCentroid, and d3.zoom, with population data from a CSV processed via d3.csv and country geometries from TopoJSON. A square-root size scale and a custom size legend with tick labels display the quantitative mapping.

Mmunpro2002

Fork of Circles on a Map

This visualization displays global population by country using proportional circles overlaid on a natural Earth projection map. Circle area corresponds to each country’s 2018 population, with missing data marked in red. Users can pan and zoom via d3.zoom, while hovering reveals country names and population counts. Built with D3 v5, it uses d3.geoPath, d3.geoCentroid, and d3.scaleSqrt to position and size circles, sourced from a CSV of UN population data and TopoJSON world boundaries.

AAbdouEnsaj

Fork of Circles on a Map

This visualization displays world population by country using proportional circles on a natural Earth projection map. The area of each circle corresponds to the country’s 2018 population, with data sourced from a UN CSV and a 50m world atlas TopoJSON. The visualization supports pan and zoom interactions, and hovering over a country reveals its name and population. The code uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and custom sizeLegend and colorLegend components to create legends, with SVG as the rendering format.

Yyouness-cyber