Points on a Map, Using Size

100%

Points on a Map, Using Size

✓ Published1🌍 Public

Last edited Mar 26, 2021

Created on Mar 26, 2021

This visualization shows a world map with circles representing cities whose population exceeds 50,000 people. The size of each circle is proportional to the city's population, using a square root scale to map population values to radii. The map displays land masses in gray, graticules and interiors as thin lines, and the cities as semi-transparent teal dots. The code uses `d3.geoPath` with the `geoNaturalEarth1` projection to render the map, and `d3.scaleSqrt` to create the size encoding. City data comes from a CSV file containing global city populations, while country boundaries are loaded from a world-atlas JSON file.

AI-generated description

A map of the world with cities, whose population is larger than 50,000 people (https://gist.githubusercontent.com/curran/13d30e855d48cdd6f22acdf0afe27286/raw/worldcities_clean.csv). City mark size correlates to population.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map with Size

A world map displays city populations as semi-transparent circles, with point size encoding each city’s population value via a square-root scale. The visualization uses the Natural Earth projection via d3.geoNaturalEarth1 and renders graticules, land masses, and country interiors with d3.geoPath. City coordinates are projected from longitude and latitude, while the map geometry comes from World Atlas TopoJSON processed with topojson.feature and topojson.mesh. React components manage the SVG rendering, and the data is loaded asynchronously from a CSV of world cities using d3.csv.

FFloorNummer

92% match

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…

Sized Points on a Map

A world map displays cities with populations over 50,000, with each city shown as a semi-transparent circle whose radius is proportional to population via a square-root scale. The map uses a natural Earth projection and includes graticules, country land masses, and interior boundaries. The visualization is built with React and D3, using `d3.geoNaturalEarth1` and `d3.geoPath` for rendering the map, `d3.scaleSqrt` for the circle sizes, and data loaded from a Simplemaps world cities CSV.

TTatyana Milanova

92% match

Loading thumbnail…

Points On a Map

This visualization displays a world map with cities rendered as circles, where the radius of each circle is proportional to the city's population using a square-root scale. The map uses an equal-area natural Earth projection with graticules and land masses drawn via `d3.geoPath`, while city coordinates are projected through the same projection. City population data comes from a CSV file, and the visualization is built with React and D3 v6, rendering all elements as SVG.

AAndres de la Garza

92% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, where the area of each teal point is proportional to city population via a square-root scale. The map includes landmasses, country boundaries, and graticules, all rendered as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from the Simplemaps World Cities Database, loaded with `d3.csv` in React. Point sizes are computed with `d3.scaleSqrt`, with circles rendered at projected coordinates from `d3.geoPath`.

Llukastieber

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

91% match

Loading thumbnail…

Points on a Map (with Size)

This visualization shows world cities as semi-transparent circles on a natural Earth projection map, with circle size encoding each city's population using a square root scale. The map displays land masses, graticules, and country interiors rendered via `d3.geoPath`. City positions are projected from coordinates, while population data loads from a CSV using `d3.csv`. The React component structure uses hooks like `useState` and `useEffect` to fetch and manage both TopoJSON world atlas data and city data.

WWaseem Medhat

91% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with cities plotted as scaled circles representing population. The map uses the Natural Earth projection with graticules, country boundaries, and interiors rendered via D3's `geoPath` and `geoNaturalEarth1` projection. City positions come from a CSV file, and circle radii are scaled using D3's square-root scale (`scaleSqrt`) based on population data. The visualization is built with React and renders SVG marks, including land masses, a sphere outline, and graticule lines, all styled with a clean grayscale aesthetic.

Ccshm407

91% match