Untitled

100%

✓ Published0🌍 Public

Last edited Feb 7, 2020

Created on Feb 3, 2020

This example shows a world map with cities whose populations exceed 50,000, rendered as semi-transparent circles sized by the square root of their population. The map includes landmasses, country interiors, graticules, and a background sphere, all drawn using `d3.geoPath` with the Natural Earth projection (`geoNaturalEarth1`). City data comes from a Simplemaps CSV loaded via `d3.csv`, while country boundaries are derived from World Atlas TopoJSON processed with `topojson.feature` and `mesh`. The visualization is built with React and D3 v4, using `scaleSqrt` to map population values to circle radii.

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…

Untitled

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles scaled by population size. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations are loaded via d3.csv, with circles positioned using the projection and sized through a linear scale. The SVG is built in React, with static styling applying a light fill to land and subtle borders.

VVineel Gannu

93% match

Loading thumbnail…

Untitled

This example displays a world map with cities whose populations exceed 50,000, using circles sized by population via a square-root scale. It renders country boundaries and graticules using `d3.geoPath` with TopoJSON data from World Atlas, while city locations come from the Simplemaps World Cities Database. The React app uses `useWorldAtlas` and `useCities` custom hooks to load data, then passes a size scale and value accessor to a `Marks` component that draws the SVG output.

Eerahma

92% match

Loading thumbnail…

World Map with cities

A world map visualization displays cities as semi-transparent circles, with circle area proportional to each city’s population. The map uses the Natural Earth projection via D3’s `geoNaturalEarth1` and `geoPath`, rendering graticules, land masses, and interiors from TopoJSON data. City coordinates and populations come from a CSV file, and the D3 `scaleSqrt` function maps population values to a maximum radius of 20 pixels.

CCarlos Caballero

89% match

Loading thumbnail…

World Map

A world map visualization displays global cities as semi-transparent circles sized by population, overlaid on a natural Earth projection. The map renders landmasses, country interiors, and graticules using `d3.geoNaturalEarth1` and `d3.geoPath`. City coordinates and population data load via `d3.csv` from a world cities dataset, while geographic boundaries come from TopoJSON world-atlas data. React manages the asynchronous data loading and SVG rendering, with a square-root scale mapping population values to circle radii.

Uuplusv

89% match

Loading thumbnail…

World Map

This visualization displays a natural Earth projection world map with cities represented as semi-transparent circles sized by population. The map renders land masses in light gray with graticules and country borders overlaid. Built with React and D3 v6, it uses `geoNaturalEarth1` and `geoPath` for geographic projections, while `scaleSqrt` maps population data to circle radii. City coordinates and populations come from a CSV of world cities, and country boundaries derive from TopoJSON world-atlas data.

Ssophievanderhorst

89% match

Loading thumbnail…

Cities on World Map

This example displays a world map with city populations overlaid as semi-transparent circles. Country boundaries appear as gray landmasses with interior borders, alongside graticules and a sphere outline. The visualization uses D3’s geoNaturalEarth1 projection and geoPath to render the map, with a sqrt scale mapping city population to circle radius. Data comes from a CSV of world cities and TopoJSON land geometry, rendered as SVG within a React framework.

CCatalina Vajiac

89% match

Loading thumbnail…

Points on a Map

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.

GGiovanniD_

89% match

Loading thumbnail…

Point on the map

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.

YYenTingWu

89% match