Circles on a map

100%

Circles on a map

✓ Published0🌍 Public

Last edited Sep 29, 2020

Created on Sep 29, 2020

This map visualization displays circles sized by a country’s 2018 value, positioned at each country’s centroid using the `geoNaturalEarth1` projection and `geoPath` for rendering the world in SVG. The circles’ radii come from `scaleSqrt`, while countries are colored green or red based on whether they have a value, with a categorical `scaleOrdinal` color legend. Data is loaded from a CSV and TopoJSON via `d3.csv` and `d3.json`, processed with `topojson.feature`, and the SVG supports zooming through `d3.zoom`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization maps population by country using circles positioned at each country’s centroid, with circle area proportional to 2018 population data loaded from a CSV and joined to TopoJSON world geometry via d3.csv and topojson.feature. d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid project the map, while d3.scaleSqrt sizes the circles. The map supports pan and zoom through d3.zoom, and hovering reveals country names and population values via SVG title elements. A custom size legend and a separate color legend are rendered as SVG groups.

CCurran Kelleher

90% match

Loading thumbnail…

Circles on a Map

This visualization displays a world map with semitransparent circles overlaid on each country, sized proportionally to population data from 2018. The map renders using d3.geoNaturalEarth1 projection and d3.geoPath, while circle sizes are scaled with d3.scaleSqrt. Zooming is enabled via d3.zoom. The code includes color and size legends built with reusable functions, and loads data from a CSV and TopoJSON world atlas using d3.csv and topojson.feature.

NNeepaB

90% match

Loading thumbnail…

circles on the map

This visualization displays a world map with countries colored green or red based on data from a CSV file, indicating a binary attribute for the year 2020. The map uses the D3.js library with a `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features. TopoJSON data from the visionscarto-world-atlas is merged with the CSV data, and an SVG path is generated for each country. Zoom functionality is enabled via `d3.zoom`.

Nntech9613

90% match

Loading thumbnail…

Circles on a Map

A world map rendered with SVG paths uses proportional circles to visualize each country's 2018 population, with circle area scaled via `d3.scaleSqrt` and positioned by `d3.geoCentroid` under a `d3.geoNaturalEarth1` projection. The visualization supports pan and zoom through `d3.zoom`, and hovering over a country reveals its population in a tooltip. Missing-data countries appear in a lighter shade. A size legend built from `d3.scaleSqrt` ticks and a color legend accompany the map, with data loaded from a CSV and TopoJSON using `d3.csv` and `d3.json`.

Jjesramyep1263

89% match

Loading thumbnail…

Circles on a Map

This example displays two choropleth-style encoded variables on a world map. Country polygons are colored green or red based on a 2019 property, while circles sized with a square-root scale represent 2018 population data projected at each country’s centroid. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `geoCentroid` to render SVG paths and circles, with TopoJSON from the visionscarto-world-atlas source. A zoom behavior from D3 enables interactive panning and scaling of the entire map group.

Zzenoe

89% match

Loading thumbnail…

Circles on a map

This visualization displays a natural Earth projection map with circles overlaid on each country, sized proportionally to its 2018 population and colored by data availability. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while d3.scaleSqrt and d3.geoCentroid position the circles. Population data is loaded from a UN CSV file, merged with TopoJSON world geometry via topojson.feature, and filtered for valid values. Zooming is enabled through d3.zoom, and a size legend with formatted tick labels explains the circle scale. Countries missing data appear in red, and hover tooltips display the region and exact population.

ZZ-Richard

89% match

Loading thumbnail…

Circles on a Map

This visualization displays the 2018 population of countries using circles positioned on a natural Earth projection map. Circle area encodes population magnitude, with colors distinguishing countries that have data from those missing it. A size legend and color legend explain the encoding. Hovering reveals country names and population values, while pan and zoom enable exploration. The code uses d3.geoPath, d3.geoCentroid, d3.scaleSqrt, and d3.zoom, rendering with SVG. Data merges a CSV of population statistics with TopoJSON world geometry (50m resolution) loaded via d3.json and processed with topojson.feature.

Pputrafandy

89% match

Loading thumbnail…

Circles on a Map

This example displays a natural Earth projection world map with semi-transparent teal circles sized by each country’s 2018 population estimate, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to position circles at country centers. A d3.scaleSqrt maps population values to circle radii, and a custom size legend shows graduated tick marks. Countries missing data appear pink, and hovering highlights them turquoise. The visualization loads UN population CSV data and TopoJSON world geometry via d3.csv and d3.json, renders SVG paths and circles, and supports zooming through d3.zoom.

KKazushige Okuma

88% match