Skip to main content
SimilarExport ZIP
100%

Using Size

✓ Published1🌍 Public
NNikhil Reddy Manda
Last edited May 16, 2021
Created on May 16, 2021
Forked from Points on a Map

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.

AI-generated description

Using Size

MIT Licensed

Similar vizzes

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

Using Size

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.

Ppnlinyz
92% match
Loading thumbnail…

City sizes on a Map

This visualization displays global city populations using circles plotted on a world map, with dot radius scaled by the square root of population via d3.scaleSqrt. It uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and country interiors. React manages component state, while d3.csv and d3.json load city data from a gist and world-atlas TopoJSON. Circle opacity and fill are styled via CSS, showing cities over 50,000 inhabitants.

LLove Wessman
91% 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 visualization displays a world map with circles sized by city population, using a square-root scale to encode magnitude. The map includes landmasses, graticules, and country interiors rendered via d3.geoPath and a geoNaturalEarth1 projection. City coordinates and population data come from a CSV dataset, with React managing the component lifecycle and d3.v5 handling data loading and scaling. Semi-transparent teal circles are positioned using the projection and scaled up to a maximum radius of 15 pixels.

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

Sized Points on a Map

A world map displays cities with populations over 50,000, using circles sized by a square-root scale to represent population magnitude. The visualization employs a Natural Earth projection with graticules and country boundaries, rendered as SVG paths. City data comes from the Simplemaps World Cities Database, loaded via `d3.csv`, while country boundaries use TopoJSON from the World Atlas. The React app uses `d3.geoPath` for map geometry and `scaleSqrt` for circle radii, with semi-transparent teal circles overlaid on a light gray landmass.

EEric Ho
90% match