world map with points

100%

world map with points

✓ Published0🌍 Public

Last edited May 12, 2022

Created on May 11, 2022

This example visualizes global population distribution using a natural Earth projection, plotting cities as semi-transparent circles sized by population. The map renders SVG paths for land, graticules, and sphere outlines via `d3.geoPath`, while React hooks load world atlas TopoJSON and city CSV data, with `d3.scaleSqrt` mapping population to circle radii.

AI-generated description

scatter plot with react and d3

[Data (https://gist.github.com/curran/a08a1080b88344b0c8a7).

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Point on a World Map

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.

Hhunsingeruk@gmail.com

92% match

Loading thumbnail…

Points on a Map

A world map populated with semi-transparent circles representing the populations of cities from a cleaned World Cities dataset. The visualization uses a Natural Earth projection rendered with `d3.geoPath`, layering graticules, land masses, and country borders beneath the points. Circle radii are scaled with `d3.scaleSqrt` based on population, capped at a maximum radius of 15 pixels. The React component fetches TopoJSON world atlas data and CSV city data, then renders the SVG marks with D3 v5.

Wwindwaver

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

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

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

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

91% match