Point on the map

100%

Point on the map

✓ Published1🌍 Public

Last edited Jul 13, 2021

Created on Jul 12, 2021

This example displays a world map with cities as semi-transparent blue circles, sized by population using a square-root scale. It shows geographical data in an SVG rendered with React and D3 v5. The map uses `geoNaturalEarth1` and `geoPath` for the sphere, graticules, land masses, and country borders, while city coordinates are projected and drawn as circles. Population data comes from a CSV of world cities, and the map data uses TopoJSON with the `world-atlas` package.

AI-generated description

Stylized Line Chart Working With Time

MIT Licensed

Similar vizzes

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

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent, radius-scaled circles proportional to population, using a Natural Earth projection. The visualization, built with React and D3 (v5), renders SVG paths for land, graticules, and sphere outlines via `geoPath`, while circles are projected using `geoNaturalEarth1`. City data comes from a CSV of world cities, and the map’s geographic basemap is provided by the `world-atlas` TopoJSON, processed through `topojson.feature` and `topojson.mesh`.

RRajat Dangat

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

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

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

92% match

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent teal circles, sized proportionally to population using a square-root scale with a maximum radius of 15 pixels. The visualization combines a Natural Earth projection with graticules, land masses, and country borders, rendered via `d3.geoPath` and TopoJSON from the world-atlas dataset. Point positions are calculated using `d3.geoNaturalEarth1`, while city data comes from a CSV loaded with `d3.csv`. React manages the component state, and SVG circles represent each urban center.

KKevin McMorrow

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

91% match