Mountains on a Map

100%

Mountains on a Map

✓ Published1🌍 Public

Last edited Aug 28, 2020

Created on Aug 28, 2020

The visualization renders a world map where each city with a population over 50,000 is drawn as a small triangular "mountain" whose height corresponds linearly to population and whose color encodes the country. The map includes graticules, country boundaries, and a light sphere background. It uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule`, with React managing the SVG rendering and data loading via `useCities` from a Simplemaps CSV. Color is assigned using `scaleOrdinal` with `hcl` hues.

AI-generated description

A world map showing cities with population greater than 50,000.

Height represents population.
Color represents country.

City data from Simplemaps: World Cities Database.

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

Colors inspired by UNHCR Streamgraph Explorer.

Technique inspired by New York Times: See How the Coronavirus Death Toll Grew Across the U.S..

MIT Licensed

Similar vizzes

Loading thumbnail…

Mountains on a Map

This visualization depicts a world map where each city with a population over 50,000 is represented as a small triangular "mountain" whose height encodes population size and whose color encodes the country. The map is rendered using React and D3’s `geoNaturalEarth1` projection with `geoPath`, including graticules and land boundaries from World Atlas TopoJSON. City data comes from Simplemaps, with tooltips displaying city name, country, and formatted population via `format`. Hovering increases stroke width on the mountain paths.

Ggeorgeeeee

96% match

Loading thumbnail…

Mountains on a Map

This visualization presents a world map where cities with populations over 50,000 are depicted as triangular mountains, with peak height encoding population size and fill color encoding country. The geographic base uses D3’s `geoNaturalEarth1` projection and `geoPath` for landmasses, graticules, and country interiors from TopoJSON world-atlas data. City data comes from Simplemaps and is rendered as SVG paths within React. The color scale is generated using D3’s `hcl` interpolation, and hover effects highlight individual mountains.

CCurran Kelleher

96% match

Loading thumbnail…

Mountains on a Map

A world map represents cities with populations over 50,000 as triangular "mountains" whose height encodes population and color encodes country. Built with React and D3 v5, it uses `geoNaturalEarth1` projection with `geoPath` for land, graticules, and borders. City positions derive from longitude and latitude through the projection, with hover tooltips revealing details. Data comes from the Simplemaps World Cities Database, while country boundaries use World Atlas TopoJSON.

DDHasanC

94% match

Loading thumbnail…

Mountains on a Map

A world map displays cities with populations over 50,000 as triangular "mountains," where each peak’s height encodes population size and its color encodes the country. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` for rendering landmasses and graticules in SVG. City data comes from Simplemaps, with country boundaries from World Atlas TopoJSON. Hovering a mountain reveals a tooltip with the city, country, and formatted population, inspired by the New York Times’ coronavirus death toll graphic.

NNita

93% match

Loading thumbnail…

Fork of Mountains on a Map-1

This visualization displays a world map with cities over 50,000 population as triangular “mountains.” The height of each mountain encodes the city’s population, while its color distinguishes the country. The map includes graticules and country borders, with a dark sphere background. Built with React and D3 v5, it uses `geoNaturalEarth1` for projection, `geoPath` for land and graticules, and `geoGraticule` for the grid. City data comes from Simplemaps, processed via `d3.csv`, while country boundaries originate from the World Atlas TopoJSON. Colors are generated using `scaleOrdinal` and `hcl`.

NNita

92% match

Loading thumbnail…

Fork of Fork of Mountains on a Map-1

This visualization displays a world map with cities over 50,000 inhabitants, using triangular "mountain" marks to encode population as height and country as color. A natural Earth projection renders landmasses, graticules, and borders, with city data from a Simplemaps CSV. The React-based code uses D3 v5’s geoPath, geoNaturalEarth1, and scaleLinear for sizing, while scaleOrdinal assigns hues from a color scale; interactive tooltips appear on hover.

AAnthony Zornig

89% match

Loading thumbnail…

Mountains on a Map

A world map displays space missions as circles, with radius encoding the number of missions per city and color representing the country, overlaid on a Natural Earth projection. Using d3.geoPath for land, graticules, and sphere rendering, the visualization employs d3.scaleSqrt for circle sizing and React for component structure. The data comes from a CSV of space mission coordinates, with country boundaries from World Atlas TopoJSON, styled with muted fills and opacity for overlapping points.

Nnaisargidave

83% match

Loading thumbnail…

world map w/ cities

This visualization displays a world map with cities whose populations exceed 50,000, using a natural Earth projection that spins to reveal different hemispheres. The map incorporates country boundaries, interior borders, graticules, and geographic lines, with land areas filled by an animated pattern. City markers are sized by population using a square-root scale, while country boundaries include tooltips on hover. The project uses React with D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, sourcing city data from Simplemaps and country shapes from World Atlas TopoJSON, all rendered as SVG elements.

Zzach b.

83% match