Points on a Map

100%

Points on a Map

✓ Published1🌍 Public

Last edited Jul 20, 2021

Created on Jul 20, 2021

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`.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Points on a Map

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.

KKtuzinowski

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

94% match

Loading thumbnail…

Points on a Map

This example visualizes cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. The map displays country boundaries, interiors, graticules, and a sphere outline, with circle size scaled by population using `d3.scaleSqrt`. The React-based visualization uses `d3.geoPath` for geographic rendering and `d3.geoNaturalEarth1` for projection, with city data loaded from Simplemaps via CSV and country shapes from World Atlas TopoJSON.

TToonysg

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

93% match

Loading thumbnail…

Points On A Map

This example displays global population data as scaled circles on a world map. Using the D3.js projection API `geoNaturalEarth1` and `geoPath`, it renders landmasses, graticules, and country interiors, while city points are positioned via the projection and sized with a square-root scale tied to population values. The visualization is built with React, uses the World Atlas TopoJSON dataset, and loads city data from a CSV file.

Tthomasjungcoe

93% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, country interiors, and graticules from TopoJSON data. City coordinates are projected and drawn as SVG circles, with data loaded from a CSV via `d3.csv` in React hooks. The map prioritizes geographic context over point density, using a light gray palette for boundaries and teal circles for city locations.

FFonda Irena Santoso

93% match