Skip to main content
SimilarExport ZIP
100%

Fork of Mountains on a Map-1

✓ Published1🌍 Public
NNita
Last edited Jan 3, 2021
Created on Jan 3, 2021
Forked from Mountains on a Map

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`.

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 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
95% 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
92% 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
91% 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
91% 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
90% 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
90% match
Loading thumbnail…

Fork of world map w/ cities & countries pop!

This visualization displays a world map with cities exceeding 50,000 population and country-level population data. Cities appear as scaled circles based on population, while countries vary in opacity according to their population figures. The map uses React with d3-geo-projection’s `geoNaturalEarth1` projection and `geoPath` for rendering. City data comes from Simplemaps, country boundaries from World Atlas TopoJSON, and population values from a UN 2019 dataset. Additional geographic lines and graticules enhance the map’s spatial context.

Rradhadevarapu
85% match
Loading thumbnail…

Fork of world map w/ cities & countries pop!

This visualization displays a world map with cities exceeding 50,000 population and country-level population data. Cities appear as scaled circles based on population, while countries vary in opacity according to their population figures. The map uses React with d3-geo-projection’s `geoNaturalEarth1` projection and `geoPath` for rendering. City data comes from Simplemaps, country boundaries from World Atlas TopoJSON, and population values from a UN 2019 dataset. Additional geographic lines and graticules enhance the map’s spatial context.

Rradhadevarapu
85% match