Mountains on a Map

100%

Mountains on a Map

✓ Published0🌍 Public

Last edited Oct 20, 2020

Created on Oct 20, 2020

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.

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

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

85% match

Loading thumbnail…

Mountains on a Map

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.

Jjblaskovich

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

82% match

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

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

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

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

79% match

Loading thumbnail…

World Map

This world map visualization displays landmasses and country borders using a natural Earth projection with d3.geoPath and d3.geoGraticule. The SVG rendering, built with React, layers a light gray sphere, teal land fills, green interior boundaries, and cyan graticule lines. Data comes from the world-atlas TopoJSON dataset, processed through topojson.feature and topojson.mesh to extract land geometry and internal borders. The visualization emphasizes clean, stylized geographic outlines rather than thematic data encoding.

Mmclee933

79% match