Circles on Map

100%

Circles on Map

✓ Published1🌍 Public

Last edited Mar 17, 2020

Created on Mar 17, 2020

This visualization displays circles on a world map, with each circle positioned at the centroid of its corresponding country. The circles are rendered on top of countries colored in orange, using a natural Earth projection. The code loads asylum data from a CSV file and country geometries from TopoJSON, and uses `d3.geoPath` and `d3.geoCentroid` to project and place the circles. Zooming is enabled through `d3.zoom` on an SVG canvas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on Map

Aankita1mit

100% match

Loading thumbnail…

Circles on Map

This visualization displays asylum seeker data on a world map using a natural Earth projection. Small black circles mark the approximate centroid of each country, with circle size not varying by value. The map is rendered with SVG paths and supports zoom and pan through d3.zoom. Data comes from a CSV file of asylum claims, loaded and joined with TopoJSON country boundaries using TopoJSON's feature method and d3.csv.

Aankita1mit

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

88% match

Loading thumbnail…

Circles on Map

This example displays a world map with circles positioned at the centroids of countries, sized to reflect their 2018 population estimates. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic boundaries with `d3.geoPath`, while circle radii are scaled with `d3.scaleSqrt`. Populated countries appear with teal circles, and gray or pink fills indicate data availability. The visualization loads population data from a CSV and country geometries from TopoJSON, and supports zooming through `d3.zoom`. Hovering reveals a tooltip with the region name and population count.

Aankita1mit

87% match

Loading thumbnail…

Circles on a map

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`.

Bbencestubnya

86% match

Loading thumbnail…

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.

AAnnisa Farida

86% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 as circles on a natural Earth projection map. Countries without data are shown in one color, while those with data use a square-root size scale to encode population magnitude. The code uses d3.geoPath for map rendering, d3.geoCentroid for positioning, and d3.scaleSqrt for circle sizing. Data comes from a CSV file joined with TopoJSON world atlas features, with interactive zoom via the d3.zoom API.

TTaheniataallah

86% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 by projecting circles onto a natural Earth map, with circle area proportional to each country’s population. Users can pan and zoom, and hovering reveals country names and population values. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for the map and interactions. Data comes from a CSV joined with TopoJSON world atlas geometries, and circles are rendered as SVG elements. A square-root scale controls circle sizes, accompanied by custom size and color legends.

Pputrafandy

86% match