Sized Points on a Map

100%

Sized Points on a Map

✓ Published0🌍 Public

Last edited Apr 26, 2020

Created on Apr 26, 2020

The map displays hospital beds per 1000 people, with each city represented by a circle whose area is proportional to the value. The geographic context is drawn using `d3.geoPath` with a `geoNaturalEarth1` projection, incorporating graticules, land masses, and country interiors. City data is loaded via `d3.csv` and scaled using `scaleSqrt`. The visualization is rendered in a React component, producing SVG marks over a subtle, polished basemap sourced from the World Atlas TopoJSON.

AI-generated description

A world map showing hospital beds per 1000 people. Data from World Bank.

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 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

85% match

Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with cities colored by population, using sized points where larger circles represent more populous cities. The map displays graticules, sphere outlines, and country boundaries with interior borders for clarity. Built with React and D3 v5, it uses `geoNaturalEarth1` projection and `geoPath` for rendering the map, while a `scaleSqrt` function maps city populations to circle radii. City data comes from Simplemaps World Cities Database, with country boundaries from World Atlas TopoJSON, all rendered as SVG elements.

Ssophburke

85% 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

85% match

Loading thumbnail…

Sized Points on a Map

This visualization presents a world map with circular points sized proportionally to city populations, showing all cities with over 50,000 residents. The map uses d3.geoNaturalEarth1 projection with d3.geoPath to render land boundaries, graticules, and the globe sphere from World Atlas TopoJSON data, while city coordinates come from a CSV database. Point sizes are scaled using d3.scaleSqrt, with React managing the SVG rendering and D3 v5 handling geographic and data processing tasks.

Mmimimichelle

84% 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

84% 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

84% match

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with points sized proportionally to city populations, showing cities with over 50,000 residents. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for rendering country boundaries and graticules. City coordinates and populations come from a CSV loaded from Simplemaps, while country shapes use TopoJSON from World Atlas. The point radii are scaled with d3.scaleSqrt, and React manages component rendering.

KKhalid

84% match

Loading thumbnail…

Sized Points on a Map

This example displays a world map with city points sized by population. It uses a Natural Earth projection via D3's `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country interiors. The map’s cities, sourced from a Simplemaps database, are drawn as SVG circles with radii scaled by the square root of population using D3’s `scaleSqrt`. The visualization is built with React and D3, with styles for the land, sphere, and graticules defined in CSS, and data loaded asynchronously from external files.

Fftjyangf

84% match