Circles on Map

Circle on a Map

This example visualizes global population data by overlaying semi-transparent circles on a natural Earth projection map. The circles are sized using `d3.scaleSqrt` based on 2018 population figures, and hovering over countries reveals their population via a tooltip. The visualization uses `d3.geoPath` with `geoNaturalEarth1` for map projection, `d3.zoom` for panning and zooming, and includes both a color legend and a size legend built from `d3.scaleOrdinal` and `d3.scaleSqrt`. Data is loaded from a CSV file and TopoJSON world atlas using `d3.csv` and `d3.json`.

Ggabcoderboi

Circles on a Map

A choropleth-style map of global population for 2020, where each country is positioned using the D3 `geoNaturalEarth1` projection and drawn with `d3.geoPath`. Circle markers, sized with a `d3.scaleSqrt` legend, indicate relative population per country, and users can pan and zoom via `d3.zoom`. The visualization also includes a color legend built with the `colorLegend` module and a size legend using `tickFormat`, with data loaded from a CSV and a TopoJSON world atlas.

Jjesramyep1263

Circles on a Map

This example visualizes global population data for 2018 by coloring countries on a natural Earth projection map, with missing data highlighted in red. It uses D3 v5's `geoNaturalEarth1` and `geoPath` to render the map, `scaleSqrt` for proportional sizing, and `scaleOrdinal` with `schemeSpectral` for color encoding. The visualization supports zooming via `d3.zoom`, and tooltips appear on hover showing region names and population counts. Data comes from a CSV joined with TopoJSON world atlas geometry, loaded through `Promise.all` and processed with `topojson.feature`.

TTaheniataallah

Circles on a Map

This visualization displays country populations on a natural Earth projection map, using circles sized by population and a color legend. It renders world geography with `d3.geoPath` and `geoNaturalEarth1`, while `scaleSqrt` maps population values to circle radii. The map is interactive through `d3.zoom`, and hover effects highlight countries. Population data comes from a CSV file, merged with topology from a TopoJSON world atlas, and the visualization uses SVG rendering with D3 v5.

OOleg

Circles on a map

This example displays a natural Earth projection world map with semi-transparent teal circles overlaid on each country, sized according to estimated 2018 population data from the UN. The map uses `d3.geoPath` and `d3.geoNaturalEarth1` to render country outlines from TopoJSON, while `d3.scaleSqrt` maps population values to circle radii. A legend with `d3.scaleSqrt` ticks and a color legend for missing data accompany the visualization, which supports zooming via `d3.zoom`.

AAjit Singh

Circles on a Map

This visualization combines a choropleth map with proportional circles to display population data by country. The map uses D3’s geoNaturalEarth1 projection and geoPath, while circles are positioned via pathGenerator.centroid and sized with a square-root scale. Population data from a CSV is joined to TopoJSON world boundaries, and countries missing 2018 data are shaded red. An interactive size legend is rendered using custom D3 components, and zooming is enabled through the event and zoom APIs.

Zzhangfa

Circles on the Map

This example displays a natural Earth projection world map where each country is filled with a light gray or pink color based on whether population data exists for 2020. Circles sized by population are placed at each country’s centroid using `geoCentroid` and scaled with `scaleSqrt`. The visualization uses `d3.geoPath` to render the map, `d3.zoom` for panning and zooming, and includes size and color legends built from reusable components. Data comes from UN population CSV files and TopoJSON world atlas geometry, processed with `topojson.feature`.

MMunTatt Yap

Circles on a Map

This visualization maps global population data by country, using circle areas scaled with `d3.scaleSqrt` to represent each nation’s population. The world map is rendered with the Natural Earth projection via `d3.geoPath`, and users can pan and zoom using `d3.zoom`. Hovering over a country reveals its name and population, while circles are positioned at geographic centroids computed with `d3.geoCentroid`. Data comes from a CSV file loaded and processed alongside TopoJSON world geometry.

Iinroadings