Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map

✓ Published1🌍 Public
LLaurentVuillon
Last edited Dec 24, 2019
Created on Dec 24, 2019

This example displays a world map with city points sized by population, using a square-root scale to encode population values as circle radii. The visualization combines geographic context from World Atlas TopoJSON data with city data from Simplemaps, rendering both through React and SVG. The code uses d3.geoNaturalEarth1 for projection, d3.geoPath for country boundaries and graticules, and d3.scaleSqrt for sizing, with translucent Cornsilk circles overlaid on dark landmasses and green borders.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sized Points on a Map

This example shows a world map with cities represented as sized points, where circle radius encodes each city’s population using a square-root scale. It uses d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, and interiors from World Atlas TopoJSON, while city data comes from a Simplemaps CSV loaded via d3.csv. The React component passes a d3.scaleSqrt to SVG circles, with rendering handled in React and styling via CSS.

Bbootshine2
96% match
Loading thumbnail…

Sized Points on a Map

This example shows a world map with cities represented as sized points, where circle radius encodes each city’s population using a square-root scale. It uses d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, and interiors from World Atlas TopoJSON, while city data comes from a Simplemaps CSV loaded via d3.csv. The React component passes a d3.scaleSqrt to SVG circles, with rendering handled in React and styling via CSS.

Bbootshine2
96% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as sized points, using a square-root scale to map population to circle radius up to 15 pixels. The visualization is rendered as SVG via React, with geographic features drawn using `d3.geoPath` and a Natural Earth projection from `d3.geoNaturalEarth1`. Country boundaries and graticules come from the World Atlas TopoJSON, while city coordinates and populations load from a Simplemaps CSV. The map uses `d3.scaleSqrt` for point sizing and an opacity of 0.3 for the city circles.

Mmkt-ds
96% match
Loading thumbnail…

Sized Points on a Map

This example renders a world map with circles sized by population for cities over 50,000 inhabitants, using a square-root scale to encode the data. The map is drawn with React and SVG, projecting geographic coordinates through D3’s `geoNaturalEarth1` and `geoPath`, with graticules and country boundaries from the World Atlas TopoJSON. City data comes from Simplemaps, and each point’s radius is determined by `scaleSqrt` mapping maximum population to a 15-pixel radius.

IIbrahim Hussain
95% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with sized points representing cities, where the circle radius encodes each city's population using a square root scale with a maximum radius of 15 pixels. It renders the Natural Earth projection via d3.geoPath, including graticules and land boundaries from Topojson World Atlas data. City coordinates and population values come from a CSV dataset, and the visualization uses React for component structure alongside D3 v6 for geographic projections and scales, with all marks drawn as SVG elements.

WWolfgang
95% match
Loading thumbnail…

Sized Points on a Map

This example uses a geographic map to visualize the populations of cities worldwide. The visualization shows cities as sized points on a world map. A square-root scale maps a city's population to the radius of its corresponding circle. The visualization is rendered using SVG and the React framework. The code uses d3's `geoNaturalEarth1` projection, `geoPath`, `geoGraticule`, and `scaleSqrt`. The underlying geo data comes from the World Atlas TopoJSON, and city data comes from a CSV file.

Ssleyus
95% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using a square root scale to encode population values. The visualization renders geographic landmasses, graticules, and interiors via D3’s `geoNaturalEarth1` projection and `geoPath`, while city points are positioned with the same projection. Data comes from a Simplemaps CSV of cities with populations over 50,000, and country boundaries from TopoJSON’s world-atlas. React manages the component state, and SVG circles use a max radius of 15 pixels with a teal fill.

RRochelle
95% match
Loading thumbnail…

Sized Points on a Map

This example presents a world map with cities sized proportionally to their population, using a square-root scale to encode the data. The visualization renders geographic features like landmasses, graticules, and country boundaries using `geoNaturalEarth1` and `geoPath`, while city points are drawn as SVG circles positioned via the projection. The map is built with React and D3 v5, pulling city data from a CSV of the Simplemaps World Cities Database and country topology from World Atlas TopoJSON.

CCurran Kelleher
95% match