Fork of Fork of Mountains on a Map-1

100%

Fork of Fork of Mountains on a Map-1

✓ Published0🌍 Public

Last edited Oct 16, 2021

Created on Oct 16, 2021

Forked from 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.

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…

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

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

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

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

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

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

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

85% match

Loading thumbnail…

Fork of world map w/ cities

A world map displays cities with populations exceeding 50,000, sized by population using a square root scale. The map uses a Natural Earth projection with a rotation offset, rendering land, graticules, geographic lines, and country boundaries as SVG paths via `d3.geoPath`. City data comes from Simplemaps, while country boundaries use World Atlas TopoJSON. An animated GIF pattern fills the land, and hovering over countries highlights them. Built with React and D3.

SSnapika

85% match