Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map

✓ Published0🌍 Public
JJane Wang
Last edited Apr 26, 2020
Created on Apr 26, 2020

This visualization presents a world map with semi-transparent circles representing cities, where point size encodes each city’s area value. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, interior borders, and graticules. City positions are projected from latitude/longitude coordinates, with circle radii scaled using `d3.scaleSqrt`. The React component fetches world atlas TopoJSON and city data from a CSV URL, rendering SVG elements within a `Marks` component.

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 visualization displays global cities as sized points on a natural Earth projection map, with circle radii scaled proportionally to population using d3.scaleSqrt. The map renders landmasses, graticules, and country interiors as SVG paths generated via d3.geoPath, while city positions are projected from longitude and latitude coordinates. The React component loads world atlas TopoJSON and city CSV data asynchronously, then applies semi-transparent teal circles to highlight population distribution across continents.

SSong Tao Chen
94% match
Loading thumbnail…

Sized Points on map

This example displays a world map with cities represented as sized points, where the radius of each circle corresponds to the city's population. The visualization uses a natural Earth projection, rendered via SVG in a React application, with the `d3.geoNaturalEarth1` projection and `d3.geoPath` for geographic boundaries. Graticules and land interiors are styled with subtle gray strokes, while city circles are drawn using `projection([d.lng, d.lat])` and scaled with `d3.scaleSqrt`. Data comes from a CSV of world cities and the World Atlas TopoJSON.

SShantanu
93% match
Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with cities as sized points, where each circle’s radius reflects population using a `scaleSqrt` in d3. It renders a natural Earth projection with `geoNaturalEarth1` and `geoPath` for country boundaries, interior borders, and graticules. City coordinates are projected from longitude and latitude, with population data loaded via `d3.csv` from a Simplemaps dataset. The React-based code uses reusable `Marks` components, while SVG circles are semi-transparent to reveal overlapping urban areas.

GGiovanni Kaaijk
93% 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
93% 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
93% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using data from the Simplemaps World Cities Database. The map renders geographic features with d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while country boundaries load from World Atlas TopoJSON. City points are placed via projection coordinates and scaled with d3.scaleSqrt, all built within a React component using SVG. The visualization includes graticules and styled land, sphere, and interior paths for a polished cartographic look.

GGustavoRiveraM
93% match
Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with circles sized proportionally to city populations, using data from Simplemaps and country boundaries from World Atlas TopoJSON. The map is rendered with SVG and React, employing d3.geoNaturalEarth1 and d3.geoPath for geographic projections, while a d3.scaleSqrt maps population values to circle radii. The visualization includes graticules and land/interior boundaries, with semi-transparent teal circles marking cities with populations over 50,000.

Ggilbertlmw
92% 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
92% match