Skip to main content
SimilarExport ZIP
100%

Circle on the Map

✓ Published0🌍 Public
Tthanhtrant219
Last edited Apr 12, 2020
Created on Apr 12, 2020
Forked from Circle on the Map

This example visualizes population projections through 2030 using animated circles over a Natural Earth map projection. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render country boundaries, while d3.scaleSqrt maps population values to circle radii. Through d3 transitions, circles continuously animate their size across multiple years, with color coding distinguishing countries that have population data from those lacking it. A size legend and color legend provide reference for interpreting the animated population estimates.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Circle on the Map3

This visualization displays population projection data on a world map over time, with animated circles representing values for each country from 2020 to 2030. The map is rendered using d3.geoNaturalEarth1 and d3.geoPath, while circle radii are scaled with d3.scaleSqrt. The animation cycles through decades sequentially, updating the displayed year and circle sizes via d3.transition. Data comes from CSV files with country coordinates and population estimates, and the visualization includes interactive zoom functionality through d3.zoom.

Jjesramyep1263
93% match
Loading thumbnail…

Circle on the Map

This visualization animates population projections for countries from 2020 to 2030, using circles positioned at geographic centroids on a natural Earth projection. Circle radius encodes population magnitude via a square-root scale, with a color legend distinguishing regions and a size legend showing population values. The map loads TopoJSON world data and CSV population data, rendering countries as SVG paths and animating circles through sequential transitions with delays. The code uses d3.geoPath, d3.geoCentroid, d3.zoom, and transition methods to create the dynamic overlay.

Jjesramyep1263
90% match
Loading thumbnail…

Circle on the Map3

A world map displays population changes by country from 2020 to 2030 using animated, scaled circles. D3's `geoNaturalEarth1` projection and `geoPath` render the landmasses, while `transition().delay()` sequentially animates each country circle's radius to reflect yearly population estimates from a CSV file. A legend using `scaleSqrt` and `sizeLegend` explains the circle-size mapping, and hovering highlights individual countries.

Ssathishkanna11
90% match
Loading thumbnail…

Circle on the Map3

This visualization animates population projections on a world map, displaying how the size of circles at country locations changes over time from 2020 onward. The map is rendered using D3 v5 with an SVG projection via `d3.geoNaturalEarth1` and `d3.geoPath`, while the circles use `d3.scaleSqrt` for sizing. A timestamped sequence of transitions animates the circles’ radii across years, driven by data from a CSV of population estimates. The map also supports zooming through D3’s `zoom` behavior, with hover tooltips highlighting country details.

VVidhuS
90% match
Loading thumbnail…

Circle on the Map

This interactive map visualizes projected population changes from 2020 through 2030, with circles sized by population using a square-root scale. The visualization animates growth by iterating through years, transitioning circle radii with `transition.delay` and `transition.duration`. It uses D3 v5 with `geoNaturalEarth1` projection, `geoPath`, and TopoJSON world data merged with UN population CSV data, offering zoom via `d3.zoom` and a legend showing population values.

Jjesramyep1263
89% match
Loading thumbnail…

Fork of Circle on the Map

A world map animates shifting population projections from 2020 through 2030, with circles sized by projected population using a square-root scale. Countries missing data appear in pink. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for country outlines, and d3.zoom for panning. Animated transitions update circle radii sequentially, while a size legend and color legend appear. Population data comes from a CSV file, merged with country geometries from TopoJSON via the topojson library.

Jjesramyep1263
89% match
Loading thumbnail…

Circles on a Map

This example visualizes the population of each country using circle markers overlaid on a natural Earth projection map. The area of each circle is proportional to the country's population, allowing for quick comparison. Users can pan and zoom the map, and hovering over a country reveals its name and population, with missing data shown in red. The implementation uses `d3.geoPath` and `d3.geoNaturalEarth1` for the map projection, `d3.scaleSqrt` for sizing, and `d3.zoom` for interaction. Population data comes from a UN dataset, with map outlines from the VisionsCarto World Atlas.

BBrandon Lehr
88% match
Loading thumbnail…

Circles on a Map

This example visualizes the population of each country using circle markers overlaid on a natural Earth projection map. The area of each circle is proportional to the country's population, allowing for quick comparison. Users can pan and zoom the map, and hovering over a country reveals its name and population, with missing data shown in red. The implementation uses `d3.geoPath` and `d3.geoNaturalEarth1` for the map projection, `d3.scaleSqrt` for sizing, and `d3.zoom` for interaction. Population data comes from a UN dataset, with map outlines from the VisionsCarto World Atlas.

BBrandon Lehr
88% match