Skip to main content
SimilarExport ZIP
100%

using size with points on a map

✓ Published1🌍 Public
BBlake McCarty
Last edited May 15, 2022
Created on May 15, 2022
Forked from points on a map

This example visualizes the world's most populous cities as circles overlaid on a natural Earth projection map, using square-root-scaled radii to encode population size. The map includes land masses, graticule lines, and country interiors. The visualization is built with React, uses d3.geoNaturalEarth1 and d3.geoPath for geographic projections, d3.scaleSqrt for sizing, and fetches city data from a CSV via d3.csv.

AI-generated description

Half of the smiley HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on Map Size

This example visualizes the world's largest cities as proportional circles on a natural Earth projection, using a square-root size scale to encode population. The map is built with React and D3 v5, employing `geoNaturalEarth1` and `geoPath` to render land masses, graticules, and a sphere, while `geoGraticule` adds reference lines. City data originates from a CSV of world cities, loaded via D3's `csv` function, and the World Atlas TopoJSON supplies country boundaries. The SVG circles, styled with a teal fill and opacity, are positioned using the projection and sized based on population.

MMark Lam
92% match
Loading thumbnail…

Using Size with Points on a Map

This example uses a natural Earth projection to render a world map with country boundaries and graticules, overlaid with circles representing cities with populations above 50,000. Circle size encodes population using a square root scale, with a maximum radius of 15 pixels. The visualization is built with React and D3 v5, employing `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for the map, and `scaleSqrt` for sizing. City data comes from the Simplemaps World Cities Database, rendered as semi-transparent SVG circles.

Jjwlam83
92% 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
91% match
Loading thumbnail…

sized points on a map

This example visualizes the world’s most populous cities as circles sized by population, overlaid on a map of country borders and graticule lines. The cities’ circle radii are scaled with a square root scale from D3, mapping population values to a maximum radius of 18 pixels. The map uses the `geoEqualEarth` projection, `geoPath`, and `geoGraticule` from D3, with country and interior boundaries processed via TopoJSON’s `feature` and `mesh`. Geographic data comes from a World Atlas JSON file and city data from a CSV file, rendered as SVG with React.

MMATTE-blz
91% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
91% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
91% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
91% match
Loading thumbnail…

Size and Points on a Map

This map shows the population of cities worldwide as scaled symbols overlaid on a geographic projection. Using React with D3 v6, it renders a Natural Earth projection with graticules and land boundaries via `geoNaturalEarth1` and `geoPath`. City populations are encoded as circle radii using a square root scale (`scaleSqrt`) ranging up to 15 pixels, with the data sourced from a cleaned world cities CSV file. The visualization demonstrates a hybrid React-D3 approach, where D3 handles the mathematical projection and scaling while React manages the SVG markup and component lifecycle.

HHollyClarke19
91% match