Skip to main content
SimilarExport ZIP
100%

Using Size

✓ Published1🌍 Public
Ppnlinyz
Last edited May 10, 2021
Created on May 10, 2021
Forked from Points on a Map

This example displays a world map using Natural Earth data, with city points sized by population. The visualization uses a square-root scale to map population values to circle radii, with a maximum radius of 12 pixels. Built with React and D3 v5, it employs `geoNaturalEarth1` projection, `geoPath` for rendering land and graticules, and the `scaleSqrt` API for size encoding. The map is styled with a light color palette and semi-transparent teal circles, presenting an aesthetically polished geographic view.

AI-generated description

A world map showing country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

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
94% match
Loading thumbnail…

Using Size

This visualization displays a world map with circles sized by city population, using a square-root scale to encode magnitude with area. The map renders landmasses, interiors, graticules, and the sphere via d3.geoNaturalEarth1 and d3.geoPath, while d3.scaleSqrt maps population values to circle radii up to 15 pixels. Data comes from a CSV of world cities loaded with d3.csv, and the map uses TopoJSON from world-atlas. React manages the SVG rendering, with circles styled semi-transparent teal.

NNikhil Reddy Manda
92% 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…

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

Using Size

A world map displays cities with populations over 50,000, using circle size to encode population magnitude with a square-root scale. The map includes country boundaries, graticules, and a sphere outline, rendered as SVG via React. It uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, with data from the Simplemaps World Cities Database and World Atlas TopoJSON, processed through `topojson.feature` and `mesh`.

MMichael Bergerson
91% match
Loading thumbnail…

using size with 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.

BBlake McCarty
90% match