Map of Cities Ranked by Number of Completed Structures

100%

Map of Cities Ranked by Number of Completed Structures

✓ Published1🌍 Public

Last edited Nov 2, 2020

Created on Oct 28, 2020

This interactive map depicts cities ranked by their number of completed structures, with each city represented by a triangular marker whose height corresponds to building count and color to rank. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country boundaries from World Atlas TopoJSON, while city data comes from a CSV of ranked structures. The visualization employs `scaleLinear` for height scaling and `scaleOrdinal` with HCL color interpolation, displaying tooltips on hover.

AI-generated description

A world map showing cities with number of completdh highest structures greater then 100 meters high

Height represents number of building.
Color represents rank.

City data from Cities Ranked by Number of Completed Structures.

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

I add Latitude and Longitude by using Latitude and Longitude Finder

Colors inspired by UNHCR Streamgraph Explorer.

MIT Licensed

Similar vizzes

Loading thumbnail…

like submistion: Multiview for Cities Ranked by Number of skyscraper Completed Structures

This multiview visualization ranks cities by the number of completed skyscraper structures, using a global map where each city is marked by a triangular "mountain" whose height corresponds to the total building count and whose color distinguishes the country. A time-series histogram below aggregates the total number of buildings by the year the first 150-meter structure was completed. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic projections, while the histogram employs d3.scaleTime, d3.scaleLinear, and d3.histogram for binning. Data comes from a CSV of city building counts, with country boundaries from the World Atlas TopoJSON.

AAbdul Salam Almadani

86% match

Loading thumbnail…

Multiview for Cities Ranked by Number of skyscraper Completed Structures with improve performance optimaization

This interactive visualization combines a world map with a time-series histogram to explore skyscraper construction across cities. The map displays each city as a triangular mountain, with height encoding the total number of completed structures over 100 meters, while color distinguishes countries. A brushable histogram below filters cities by the date of their first building over 150 meters. Built with React and D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` for the map, `scaleLinear` for heights, and `brushX` for interactive filtering. Data comes from a CSV of city building counts with coordinates added manually.

AAbdul Salam Almadani

84% match

Loading thumbnail…

Project:Multiview for Cities Ranked by Number of skyscraper Completed Structures

This multiview visualization combines a world map with a time-series histogram to explore cities ranked by the number of completed skyscraper structures over 100 meters tall. The map uses d3.geoNaturalEarth1 projection and geoPath to render land, graticules, and triangular markers whose height reflects building counts and color encodes rank, with hover tooltips showing city details. A linked d3.brushX histogram beneath displays annual building completions, filtering the map to selected date ranges. Data comes from a CSV of city statistics, with country boundaries from World Atlas TopoJSON, all rendered as SVG within a React framework.

AAbdul Salam Almadani

84% match

Loading thumbnail…

The number of completed highest structures in the world cities

This histogram shows the total number of completed buildings in world cities, binned by the year each city first completed a building taller than 150 meters. The chart uses D3’s `scaleTime`, `histogram`, and `timeYears` functions to bin the data, with React components for rendering the axes and marks as SVG rectangles. The data is loaded via `d3.csv` from a GitHub gist, and each bar represents the sum of all buildings across cities in that year range, with hover tooltips showing exact counts.

AAbdul Salam Almadani

79% match

Loading thumbnail…

Points on a Map

This map displays world cities as glowing gold points, with point size proportional to population using a square-root scale. Landmasses appear in muted brown, interior borders in blue-gray, and a graticule overlays the sphere. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath` for shapes, and `geoGraticule` for the grid. City coordinates and populations load from a CSV via D3’s `csv` parser, while world topology comes from a TopoJSON file processed with `topojson`’s `feature` and `mesh` functions.

AAnthony Zornig

75% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with circles positioned at the coordinates of cities. The size of each circle is proportional to the city's population, using a square root scale to visually encode the data. Built with React and D3 version 5, the map uses the `geoNaturalEarth1` projection and `geoPath` to render land, graticules, and country interiors from World Atlas TopoJSON. City data is loaded from a CSV file, and the visualization is rendered as SVG.

EEFezerKW

75% 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.

75% match

Loading thumbnail…

D3 course - World Map With Cities >50000

This interactive world map displays all cities with populations exceeding 50,000, using circle size to encode population magnitude through a square-root scale. Built with React and D3 v7, the visualization renders SVG paths from TopoJSON world atlas data alongside city coordinates from a CSV dataset. The natural Earth projection draws graticules and styled landmasses, while hover tooltips reveal country, city name, and formatted population using d3.format.

JJames Rhodes

74% match