Points on a Map

100%

Points on a Map

✓ Published1🌍 Public

Last edited Apr 23, 2021

Created on Apr 23, 2021

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.

AI-generated description

A scatterplot of The Iris Dataset using D3 utilities and React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This example displays a world map with points representing cities, with circle sizes scaled by population using a square-root scale. It shows a natural Earth projection with graticules and country boundaries overlaid. The visualization uses React to manage state and rendering, while D3 v5 provides `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt`. City data comes from a CSV file, and world geography is loaded as TopoJSON. Circles are semi-transparent teal, plotted via projected longitude and latitude coordinates.

Aazharahmad0

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

95% match

Loading thumbnail…

Points on a Map

This example displays a world map with cities sized by population. Natural Earth projection renders landmasses, graticules, and country borders using d3.geoPath. City points from a CSV dataset are projected onto the map and drawn as semi-transparent circles, with radius scaled by population using d3.scaleSqrt. React manages component state and rendering, while d3.v7 handles geographic calculations and data loading.

BBen Brophy

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

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

94% match

Loading thumbnail…

Points on a Map

A world map rendered with a natural Earth projection displays cities as semi-transparent teal circles, with circle area scaled by population using a square-root scale. The visualization pairs D3’s geoNaturalEarth1 projection and geoPath with React components to draw landmasses, graticules, and country interiors. City coordinates and population data come from a CSV file, while geographic boundaries load via TopoJSON from the world-atlas package.

RRMartins11

94% match

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent teal circles, sized proportionally to population using a square-root scale with a maximum radius of 15 pixels. The visualization combines a Natural Earth projection with graticules, land masses, and country borders, rendered via `d3.geoPath` and TopoJSON from the world-atlas dataset. Point positions are calculated using `d3.geoNaturalEarth1`, while city data comes from a CSV loaded with `d3.csv`. React manages the component state, and SVG circles represent each urban center.

KKevin McMorrow

94% match

Loading thumbnail…

Points on a Map

This example displays world cities as semi-transparent circles on a natural Earth projection, with circle size encoding each city's population. The map renders landmasses and country borders from the world-atlas TopoJSON dataset, with graticules and a sphere outline providing geographic context. Using React hooks to load data asynchronously, the visualization applies d3.geoNaturalEarth1 and d3.geoPath for projection, d3.scaleSqrt for radius scaling, and maps city coordinates through the projection to position SVG circles.

Jjbruzzo

94% match