Points on a Map

100%

Points on a Map

✓ Published1🌍 Public

Last edited Jul 29, 2021

Created on Jul 29, 2021

This example visualizes the global distribution of cities, with circle size encoding each city’s population using a square-root scale. A Natural Earth projection renders landmasses, graticules, and country borders via `d3.geoPath` and `geoNaturalEarth1`, while city points are positioned using the same projection. Data comes from a CSV of world cities and TopoJSON world-atlas geometry, all drawn as SVG within a React component.

AI-generated description

Scatterplot of iris dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This visualization maps global cities as points on a natural Earth projection, with circle size encoding population. It uses React for rendering SVG elements, D3 v5 for geographical projections and scales, and loads world atlas TopoJSON data plus city CSV data from external URLs. The code employs d3.geoPath, d3.geoNaturalEarth1, and d3.geoGraticule to draw landmasses, graticules, and sphere outlines, while d3.scaleSqrt maps population values to circle radii.

LLawrence Liu

95% match

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

94% match

Loading thumbnail…

Points on a Map

This visualization displays world cities as semi-transparent circles overlaid on a natural Earth projection map, with circle size encoding population via a square root scale. The map includes land masses, country borders, graticules, and a sphere outline. React manages the component structure, while D3 v7 handles geo projection and path generation through `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from a CSV loaded with `d3.csv`, and world geography uses TopoJSON from the world-atlas package, rendered as SVG.

KK3zter

94% match

Loading thumbnail…

Points on a Map

This example visualizes global population distribution by plotting cities as semi-transparent points on a natural Earth projection map. The map includes graticules, landmasses, and country borders, with each circle’s radius scaled proportionally to its city’s population using `d3.scaleSqrt`. The visualization uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for geographic rendering, with React managing state and SVG elements for drawing. The underlying city data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv`, while world topology is fetched from the World Atlas TopoJSON file and processed with `topojson.feature` and `topojson.mesh`.

AAudrey

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

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

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

94% match

Loading thumbnail…

Points on a Map

A world map rendered with a Natural Earth projection displays global cities as semi-transparent circles, sized by population. The visualization uses React and D3 v7, with `geoNaturalEarth1` and `geoPath` to draw landmasses, graticules, and country interiors from TopoJSON data. City coordinates are projected and plotted as SVG circles, with a sqrt scale mapping population to radius. Data comes from a CSV of world cities loaded via `d3.csv`.

BBen Seebeck

94% match