Points on a Map

100%

Points on a Map

✓ Published0🌍 Public

Last edited Nov 25, 2020

Created on Nov 25, 2020

This example displays a world map with cities whose populations exceed 50,000, plotted as semi-transparent circles. The map uses a Natural Earth projection via `d3.geoNaturalEarth1`, with landmasses, graticules, and country interiors drawn using `d3.geoPath` from the World Atlas TopoJSON dataset. City coordinates are projected from latitude and longitude into SVG circle positions, with the data loaded from a Simplemaps CSV via `d3.csv`. The rendering is handled in React, producing a clean, styled SVG visualization.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This example displays a world map with dots marking cities that have populations exceeding 50,000. The map uses a Natural Earth projection and renders land masses, graticules, and country borders as SVG paths. City positions are projected from longitude and latitude coordinates using `d3.geoPath` with `geoNaturalEarth1`, and each city is drawn as a semi-transparent circle. The visualization loads world atlas TopoJSON data and a city CSV dataset, with React managing the component lifecycle.

CCurran Kelleher

96% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with circles marking cities whose population exceeds 50,000, using the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. The map includes graticules and country boundaries from World Atlas TopoJSON, with city data sourced from Simplemaps. Circle radii are scaled by population using `scaleSqrt`, rendered as semi-transparent SVG elements in React. The implementation leverages React hooks for data loading and D3 v5 for geographic projections and CSV parsing.

Zzyniax

95% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, country interiors, and graticules from TopoJSON data. City coordinates are projected and drawn as SVG circles, with data loaded from a CSV via `d3.csv` in React hooks. The map prioritizes geographic context over point density, using a light gray palette for boundaries and teal circles for city locations.

FFonda Irena Santoso

95% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent dots. The visualization uses a natural Earth projection via d3.geoNaturalEarth1 and renders geographic features with d3.geoPath, including land masses and graticules. City coordinates are projected from latitude and longitude into SVG circle positions. The map loads country boundaries from World Atlas TopoJSON and city data from a Simplemaps CSV, with React managing the data-fetching hooks and rendering the SVG marks.

GGeniXiong

95% match

Loading thumbnail…

Points on a Map

This example visualizes cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. The map displays country boundaries, interiors, graticules, and a sphere outline, with circle size scaled by population using `d3.scaleSqrt`. The React-based visualization uses `d3.geoPath` for geographic rendering and `d3.geoNaturalEarth1` for projection, with city data loaded from Simplemaps via CSV and country shapes from World Atlas TopoJSON.

TToonysg

95% match

Loading thumbnail…

Points on a map

This example displays a world map with cities plotted as semi-transparent circles, where circle size reflects each city’s population. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render land, graticules, and country borders from TopoJSON data. City coordinates and populations come from a CSV loaded with `d3.csv`, and circle radii are scaled with `d3.scaleSqrt`. The visualization is built with React hooks for data fetching and renders as SVG.

LLewis Ward

94% match

Loading thumbnail…

Points on a Map

This visualization displays world cities with populations exceeding 50,000 as semi-transparent teal points on an SVG map. The map uses a Natural Earth projection via d3.geoNaturalEarth1, with landmasses, graticules, and interiors rendered using d3.geoPath. City locations are projected from latitude and longitude coordinates, then drawn as small circles. The underlying city data comes from Simplemaps, while country boundaries come from the World Atlas TopoJSON, both loaded asynchronously with d3.csv and d3.json. The React component structure uses custom hooks for data fetching.

SSabin Bhandari

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

94% match