Points on a map

100%

Points on a map

✓ Published1🌍 Public

Last edited May 20, 2021

Created on May 19, 2021

Forked from Fork of Fork of Salem map class added-extract

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.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

points on 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.

TTsaiJie

91% match

Loading thumbnail…

Points on a Map

This map visualization displays the global distribution of cities, with points sized according to population using a square root scale to encode area proportionally. The geographic context is rendered using D3’s `geoNaturalEarth1` projection, with landmasses, graticules, and country interiors drawn via `geoPath`. City data, loaded from a CSV via `d3.csv`, is plotted as semi-transparent circles, and population values are scaled using `d3.scaleSqrt` to ensure visual accuracy. The visualization is built with React, leveraging the `useWorldAtlas` and `useCities` hooks to asynchronously fetch and process TopoJSON and CSV data.

Ddaneslutzky

90% match

Loading thumbnail…

Points on a map

This example displays a world map with city points scaled by population using a square-root scale. The map is rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, showing land masses, interiors, graticule, and sphere outlines. City circles are positioned via the projection and styled with opacity, while the component structure uses React with custom hooks to load TopoJSON world data and CSV city data. The visualization clearly communicates population distribution across the globe.

Ccynichole

89% match

Loading thumbnail…

Points on a map

This example visualizes global population distribution by plotting circles for cities on a natural Earth projection map. Circle radius encodes population using a square-root scale, with semi-transparent styling to show overlapping urban areas. The visualization uses React for component rendering, D3 v5 for geographic projections (`geoNaturalEarth1`), path generation (`geoPath`), and graticule creation, alongside TopoJSON to process world-atlas land and interior boundary data. City coordinates and populations come from a CSV dataset loaded via D3’s `csv` utility.

Rrajamrit-singh

89% match

Loading thumbnail…

Points on a map

This example displays city populations as scaled dots on a world map, using a square-root size scale to encode population values. The map is rendered with a D3 geoEqualEarth projection and geoPath, drawing land masses, graticules, and the sphere. Data comes from a CSV of world cities, fetched via D3’s `csv` method, while geographic topology is loaded as JSON and processed with TopoJSON’s `feature` and `mesh` functions. Circles are positioned by projecting each city’s latitude and longitude, with opacity set to 0.3 for a layered effect.

JJosh Zalcman

89% match

Loading thumbnail…

Points on a Map

This example visualizes global population data by plotting cities as semi-transparent circles on a Natural Earth projected world map. A square-root scale maps each city’s population to circle radius, with the largest cities appearing most prominent. The visualization uses React for component structure and D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt`. Country boundaries and graticules come from the World Atlas TopoJSON, while city coordinates and populations are loaded from a clean CSV dataset.

Qqtrfx

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

88% match

Loading thumbnail…

Points on a Map

This map visualization plots world city populations using circles projected onto a Natural Earth base. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country interiors, while a sqrt scale maps population values to circle radii. The React-based component loads city data from a CSV and renders SVG marks, using a world atlas TopoJSON for geographic context.

Ttrissentety

88% match