Fork of Points on a Map

100%

Fork of Points on a Map

✓ Published0🌍 Public

Last edited Aug 13, 2024

Created on Aug 13, 2024

This example displays a world map with circles representing cities over 50,000 people, sourced from Simplemaps’ World Cities Database. The map uses a natural Earth projection with graticules and country boundaries from World Atlas TopoJSON. Built with React and D3 v5, it employs `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to render the geographic features, while city points are positioned via the projection and drawn as translucent SVG circles.

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…

Fork of Points on a Map

This example displays a natural Earth projection world map with cities over 50,000 people plotted as small circles. The visualization uses D3 v5’s `geoNaturalEarth1` and `geoPath` for map geometry, with graticules and country borders styled via CSS. City coordinates are projected from latitude and longitude, and React manages the SVG rendering. Mouse hover changes a city’s fill color. Data comes from a Simplemaps world cities CSV, while country boundaries use the World Atlas TopoJSON.

DDan Peerapatanapokin

96% match

Loading thumbnail…

Fork of Points on a Map

This example displays a world map with circles marking cities whose populations exceed 50,000, using data from Simplemaps. The visualization renders geographic features with d3.geoPath and geoNaturalEarth1, including land masses, graticules, and country interiors. City coordinates are projected onto the SVG using the same projection, with semi-transparent circles indicating locations. The map is built with React hooks, d3.v5, and TopoJSON for world atlas data.

Mmmei-d

95% match

Loading thumbnail…

Fork of Points on a Map

This visualization displays a world map populated with circles representing cities with populations over 50,000. The map uses a Natural Earth projection with visible graticules, country boundaries, and landmasses rendered in muted grays. City coordinates are projected from longitude and latitude data using D3’s `geoNaturalEarth1` and `geoPath`, with circles drawn as SVG elements. The example is built with React, relies on D3 v5 for data loading and projection, and sources city data from Simplemaps and country boundaries from the World Atlas TopoJSON.

SSam

95% match

Loading thumbnail…

Fork of Points on a Map

This example renders a world map using a Natural Earth projection, showing cities with populations over 50,000 as semi-transparent points. The visualization loads geographic boundaries from World Atlas TopoJSON and city data from Simplemaps, then draws them with SVG paths and circles via `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. The React components manage data fetching through custom hooks, while D3’s `csv` and `json` methods load the datasets.

Cchar0496

95% match

Loading thumbnail…

Fork of Points on a Map

This example displays a world map with cities having populations over 50,000, plotted as semi-transparent teal circles. It uses a natural Earth projection via `geoNaturalEarth1` and renders both graticules and country interiors with `geoPath`. The map is built with React, loading geographic data from World Atlas TopoJSON and city coordinates from a Simplemaps CSV. City positions are projected using `[d.lng, d.lat]` to determine circle placement within an SVG.

Ddas888530

95% match

Loading thumbnail…

Fork of Points on a Map

This visualization displays a world map with cities whose populations exceed 50,000, sourced from the Simplemaps World Cities Database. The map uses a natural Earth projection, rendered as SVG through React, with country boundaries from the World Atlas TopoJSON. D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` functions draw the sphere, graticules, and landmasses, while city coordinates are projected and plotted as semi-transparent teal circles. The styling employs muted grays for geographic features, creating a clean backdrop for the city data points.

RRupendra Pamisetty

94% match

Loading thumbnail…

Fork of Fork of Points on a Map

This example displays a world map with cities having populations over 50,000, sourced from the Simplemaps World Cities Database, overlaid on country boundaries from the World Atlas TopoJSON. The visualization uses React for component management and d3.geoNaturalEarth1 projection with d3.geoPath to render the sphere, graticules, land, and interiors. City points are projected and drawn as semi-transparent circles, using d3.csv for data loading and topojson’s feature and mesh functions to prepare the geographic data.

Mmmei-d

94% match

Loading thumbnail…

Fork of Points on a Map

This example shows a world map of cities with populations above 50,000, plotted as small teal circles over light gray landmasses and graticules. The visualization uses React to render SVG elements, with D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map projections and boundary lines. City coordinates come from a Simplemaps CSV, while country outlines derive from TopoJSON world atlas data, with interiors drawn as mesh strokes.

Vvigneswaran009

94% match