Points on a Map

100%

Points on a Map

✓ Published1🌍 Public

Last edited Nov 24, 2021

Created on Nov 22, 2021

This example plots the world’s most populous cities as translucent circles over a natural Earth projection, with circle size scaled by population using a square-root scale. A D3 geoPath renders country landmasses, graticules, and interior borders from World Atlas TopoJSON data, while React manages the component state and SVG rendering. City coordinates are projected via geoNaturalEarth1, and each point includes a tooltip showing city name, country, and longitude/latitude. Hovering over a country reveals its name through an SVG title element.

AI-generated description

Using React, D3, and World Atlas' TopoJSON data to display the world's most populous cities.

Mouse over a country to have it's information displayed.

MIT Licensed

Similar vizzes

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

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

94% match

Loading thumbnail…

points on a map

This example visualizes the world's most populous cities as circles on a natural Earth projection, with circle size encoding population via a square-root scale. The map displays land masses, country borders, graticules, and a sphere outline, rendered as SVG using React components. The code loads world atlas TopoJSON data for geographic features and city data from a CSV file, employing d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule for map generation, while React hooks (useState, useEffect) manage asynchronous data loading.

Sseanowh

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

93% match

Loading thumbnail…

Points on a Map

This visualization displays the world’s most populous cities as semi-transparent circles on a natural Earth projection, with circle size scaled by population using a square-root scale. The map renders landmasses, country interiors, graticules, and a sphere outline via d3.geoPath and geoNaturalEarth1. City positions are projected from latitude and longitude coordinates, with data loaded from a CSV of world cities using the d3.csv function. The SVG marks are built as React components, while the atlas topology comes from the world-atlas package.

Bbsolomon103

93% match

Loading thumbnail…

Points on a Map

A world map rendered with a Natural Earth projection displays global cities as semi-transparent circles, sized by population. The visualization uses React and D3 v7, with `geoNaturalEarth1` and `geoPath` to draw landmasses, graticules, and country interiors from TopoJSON data. City coordinates are projected and plotted as SVG circles, with a sqrt scale mapping population to radius. Data comes from a CSV of world cities loaded via `d3.csv`.

BBen Seebeck

93% match

Loading thumbnail…

Points on a Map

A world map displays country boundaries and graticules over a light gray sphere, with semi-transparent teal circles sized by city population. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render land, interiors, and sphere outlines from TopoJSON data. City coordinates are projected and drawn as SVG circles, with radii scaled using d3.scaleSqrt applied to population values from a CSV dataset. The React component structure manages state for both world atlas and city data.

Jj-PGi

93% match

Loading thumbnail…

World Map Points

A world map rendered with D3's geoNaturalEarth1 projection and geoPath displays cities as semi-transparent circles sized by population via a square-root scale. The map includes graticules, landmasses, and country borders from the world-atlas TopoJSON dataset, transformed with topojson.feature and topojson.mesh. City coordinates and populations load from an external CSV, while React manages the SVG rendering. This example demonstrates combining geographic basemaps with proportional point symbols in a single React component.

PPadoSensei

93% match