Point on a World Map

100%

Point on a World Map

✓ Published1🌍 Public

Last edited Oct 17, 2023

Created on Oct 17, 2023

This example visualizes global population distribution by plotting cities as points on a natural Earth projection world map, with point size scaled by population. The map renders land masses, graticules, and country borders from TopoJSON 50m world-atlas data using d3.geoNaturalEarth1 and d3.geoPath. City coordinates are projected from latitude/longitude, with circle radii determined by a square-root scale mapping population values to a maximum radius of 8 pixels. React manages the SVG rendering, while d3.csv loads the world cities dataset.

AI-generated description

A program that shows a world map using 50m topo json data.

Data: World Map 50m - TopoJson.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Points on a World Map

This example displays global population distribution by plotting cities as semi-transparent circles on a natural Earth projection, with circle size scaled by population using a square-root scale. The visualization uses React for component structure, D3 v7’s `geoNaturalEarth1` and `geoPath` for map rendering, and TopoJSON to load world country boundaries. City coordinates and populations come from a CSV dataset, projected onto the map with `projection([lng, lat])`.

Ppranav-vis

92% match

Loading thumbnail…

Points on a map

This visualization displays a world map with city points scaled by population. Country outlines and graticules are rendered using d3.geoPath and the geoNaturalEarth1 projection, with city populations mapped to point radii via a d3.scaleSqrt. Data comes from a CSV of world cities and TopoJSON world atlas features, rendered as SVG within a React application.

AAmnaRizvi-S

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

92% match

Loading thumbnail…

Points on a Map with Size

A world map displays city populations as semi-transparent circles, with point size encoding each city’s population value via a square-root scale. The visualization uses the Natural Earth projection via d3.geoNaturalEarth1 and renders graticules, land masses, and country interiors with d3.geoPath. City coordinates are projected from longitude and latitude, while the map geometry comes from World Atlas TopoJSON processed with topojson.feature and topojson.mesh. React components manage the SVG rendering, and the data is loaded asynchronously from a CSV of world cities using d3.csv.

FFloorNummer

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

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

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

92% match