points on map

100%

✓ Published0🌍 Public

Last edited May 11, 2021

Created on May 10, 2021

Forked from word map

A world map scatter plot displays the population of cities as semi-transparent circular points, sized by a square-root scale so larger cities appear with proportionally larger radii. The visualization uses an equal-earth projection with graticules and country boundaries, rendered via D3’s `geoPath` and `geoGraticule` in SVG. City data comes from a CSV of world cities, with sphere and country shapes drawn from a TopoJSON world atlas. React manages the interface, while D3’s `scaleSqrt` maps population values to visual radius.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a map

A geographic scatter plot displays city populations using a square-root size scale for circles overlaid on a landmass map. The visualization uses React with D3’s `geoMercator` projection and `geoPath` to render country boundaries, while the `scaleSqrt` function scales circle radii by population data. The map data comes from TopoJSON, and the city dataset originates from the Data Canvas Sense Your City dataset.

Vvigneswaran009

91% match

Loading thumbnail…

Points on a World Map

A world map displays population data for cities as scaled circles, with marker size proportional to population using a square-root scale. The visualization uses D3’s geoNaturalEarth1 projection, geoPath, and geoGraticule to render land masses, country borders, and graticules, while React manages state and renders SVG circles. City coordinates and populations come from a CSV file, with world geography from a TopoJSON dataset. Circles are semi-transparent blue, overlaid on gray land and sphere outlines.

DDeborah Ong

91% match

Loading thumbnail…

Points on a Map

A world map displays the geographic distribution of cities, with circles sized by population. The visualization uses a natural Earth projection with graticules, land masses, and country borders. Built with React and D3 v6, it employs `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the SVG. City data comes from a CSV of world cities, while country boundaries derive from World Atlas TopoJSON. Circle radii are scaled using `scaleSqrt` based on population values.

Ee-ines

91% match

Loading thumbnail…

points on a map redo

This visualization displays a world map with city population data rendered as proportional circles. The map uses an equal-area natural Earth projection with graticule lines and geographic boundaries. City markers are sized using a square-root scale based on population values, allowing for comparison of relative magnitudes. The example loads geospatial data from the world-atlas package and city data from a CSV file, then renders everything as SVG elements using React and D3's geoPath and geoGraticule APIs. The visualization highlights the distribution of populated cities across continents with a clean, minimalist aesthetic.

SSong Tao Chen

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

91% match

Loading thumbnail…

Points on world map

This visualization displays world cities as scaled circles on a natural Earth projection, with marker size encoding population using a square-root scale. The map renders land masses, graticules, and country borders in muted grays, while semi-transparent teal points overlay major urban centers. Built with React and D3 v7, it uses `geoNaturalEarth1` with `geoPath` for geographic projection, TopoJSON for world atlas data, and `scaleSqrt` to map population values to circle radii. City coordinates and populations come from a CSV dataset loaded via D3’s `csv` function.

AAlex Stulov

91% match

Loading thumbnail…

Points on a Map

This example displays a world map with city points scaled by population, using a natural Earth projection. The visualization layers graticules, land masses, and country borders beneath translucent teal circles. React components manage the rendering, while D3 utilities handle geographic projections and data loading. The size of each circle is determined by a square root scale mapping population values to a maximum radius of 15 pixels, with city data sourced from a CSV of world cities and geographic features from a TopoJSON world atlas.

LLaura Johnson

91% match

Loading thumbnail…

Points on a Map

A world map displays cities scaled by population using semi-transparent teal circles. The visualization renders geographic landmasses, graticules, and interior borders via d3.geoPath with a Natural Earth projection, while a d3.scaleSqrt maps population values to circle radii. City locations are projected from latitude and longitude coordinates, and data is loaded from a CSV using d3.csv. The React application overlays these marks on an SVG canvas.

SSerind Joshua McCue

90% match