World Map with Data Points

100%

World Map with Data Points

✓ Published1🌍 Public

Last edited Feb 25, 2022

Created on Feb 25, 2022

This visualization displays world city population data as scaled circles on a natural Earth projection. The React app combines D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to render landmasses, country interiors, and graticules, while `scaleSqrt` maps population values to circle radii. Data comes from a preprocessed world cities CSV, with city coordinates projected via D3’s `projection` function to position each semi-transparent point.

AI-generated description

World map... [Population Data] https://gist.githubusercontent.com/curran/13d30e855d48cdd6f22acdf0afe27286/raw/0635f14817ec634833bb904a47594cc2f5f9dbf8/worldcities_clean.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map with City Points Sized

A world map with city points sized by population. The visualization uses a natural Earth projection with graticules and land boundaries rendered as SVG paths. City populations are scaled using a square root scale, mapping to circle radii with a maximum of 15 pixels. The chart is built with React, D3 v5's `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, and loads city data as CSV and world atlas topology JSON.

SSam Hege

91% match

Loading thumbnail…

World Map

This example visualizes global population distribution by rendering a world map with cities represented as scaled circles. The map displays land masses, graticules, and country borders, while city markers use a square-root scale to encode population size. The visualization is built with React and D3 v5, using `geoNaturalEarth1` projection via `d3.geoPath` and topojson data from the world-atlas package. Population data comes from a CSV of world cities, with React hooks managing asynchronous data loading.

MMatias Conde

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

This visualization displays a Natural Earth projection world map with semi-transparent circles sized by city population. The map renders landmasses, country borders, and graticules using d3.geoPath and d3.geoNaturalEarth1, with data from World Atlas TopoJSON. City locations and populations come from a CSV file, with circle radii scaled by d3.scaleSqrt. The React component structure uses hooks to load both datasets asynchronously, and all marks are drawn as SVG elements.

Ssuserocc

91% match

Loading thumbnail…

World Map

This visualization displays a natural Earth projection world map with cities represented as semi-transparent circles sized by population. The map renders land masses in light gray with graticules and country borders overlaid. Built with React and D3 v6, it uses `geoNaturalEarth1` and `geoPath` for geographic projections, while `scaleSqrt` maps population data to circle radii. City coordinates and populations come from a CSV of world cities, and country boundaries derive from TopoJSON world-atlas data.

Ssophievanderhorst

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…

World Map

A world map visualization displays global cities as semi-transparent circles sized by population, overlaid on a natural Earth projection. The map renders landmasses, country interiors, and graticules using `d3.geoNaturalEarth1` and `d3.geoPath`. City coordinates and population data load via `d3.csv` from a world cities dataset, while geographic boundaries come from TopoJSON world-atlas data. React manages the asynchronous data loading and SVG rendering, with a square-root scale mapping population values to circle radii.

Uuplusv

90% match

Loading thumbnail…

Points on a Map

This example renders a world map with city populations using a natural Earth projection. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw landmasses, graticules, and country interiors, while scaled circles overlaid onto the map encode each city’s population with a square-root scale. The data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv`. The React application asynchronously fetches the world atlas and city data, then renders the visualization as an SVG.

TThomas Cormican

90% match