Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Aug 11, 2020

Created on Aug 7, 2020

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.

AI-generated description

数据源整理

sizeLegend.js组件

计算不规则重心

重心画圆

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization displays population by country using proportional circles on a natural Earth projection map, with circle area corresponding to each nation's 2018 population. Users can pan and zoom the map via d3.zoom and hover over countries to reveal population details in a tooltip. The code uses d3.geoPath, d3.geoCentroid, and d3.scaleSqrt to position and size circles, while a custom size legend and color legend are built with D3 selections. Population data originates from a CSV file, joined with TopoJSON world geometry using topojson.feature.

Jjesramyep1263

94% match

Loading thumbnail…

Circles on a Map

This visualization maps global population by country using proportional circles centered on each nation’s geographic centroid. The area of each circle encodes the 2018 population estimate, with missing data shown in red on a gray map. Users can pan and zoom via d3.zoom, and hover over countries to reveal population values in tooltips. The code uses d3.geoPath, d3.geoNaturalEarth1, and topojson for map rendering, with a d3.scaleSqrt for circle sizing and a custom size legend.

Pputrafandy

94% match

Loading thumbnail…

Circles on a Map

This visualization uses proportional circles to show each country’s population, with circle area scaled by the 2018 population data from a CSV file. The map renders with `d3.geoNaturalEarth1` projection and `d3.geoPath`, while a square-root scale (`d3.scaleSqrt`) determines circle radii. Users can pan and zoom via `d3.zoom`, and hovering a country reveals its name and population in a tooltip. A color legend and size legend are built with reusable D3 functions, and the map data comes from the visionscarto world atlas TopoJSON.

Yyakupermurat

94% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles centered on each country, with area encoding population size. The map supports pan and zoom, and hovering reveals a tooltip with the country name and exact population. It uses a natural Earth projection via d3.geoNaturalEarth1, with d3.geoPath for country boundaries and d3.scaleSqrt for circle sizing. A custom size legend and color legend (d3.scaleOrdinal with schemeSpectral) provide context. Data comes from a CSV file merged with world topology from TopoJSON, rendered as SVG. The implementation uses d3.zoom for interaction and d3.geoCentroid to position circles.

KKevinw97

93% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles overlaid on a natural Earth projection map. The area of each circle represents the population of its corresponding country, with circles positioned at the centroid of each nation. The map uses d3.geoPath for rendering country boundaries and a d3.scaleSqrt for sizing circles. Users can pan and zoom through the d3.zoom API, and hovering over a country reveals its population via a title tooltip. Data comes from a CSV joined with a TopoJSON world atlas, and a custom size legend communicates the circle-to-population mapping.

Jjesramyep1263

93% match

Loading thumbnail…

Circles on a Map

Jjesramyep1263

93% match

Loading thumbnail…

Circles on a Map

This interactive map displays global population data using proportional circles positioned over each country’s centroid, with a color-coded legend for categories and a size legend for population values. Built with D3 v5, it renders world geography via `d3.geoPath` and a Natural Earth projection, while applying `d3.zoom` for panning. Population values from a CSV are joined to TopoJSON features, and `d3.scaleSqrt` determines circle radii, with tooltips showing region names and formatted numbers. SVG elements and transitions animate legend updates.

Ggilbster

93% match

Loading thumbnail…

Circles on a Map

This visualization shows global population distribution using proportional circles on a natural Earth projection map. Circle size encodes each country’s 2018 population, with missing data shown in a distinct color. The map uses D3’s `geoNaturalEarth1` projection and `geoPath` to render borders. A `scaleSqrt` size legend and an ordinal color legend are included, and the interaction is a zoomable, event-driven map. Data comes from a UN CSV and a TopoJSON world atlas, processed via `topojson.feature`.

AAntonio Rungo

93% match