Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
AAbdul Salam Almadani
Last edited Oct 29, 2020
Created on Oct 29, 2020

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.

AI-generated description

A world map showing the number of completed highest structures in cities. The building should be greater than 100 meters high to be counted.

  • Height represents the number of buildings.
  • Color represents the city.

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 note: I am still working on latitude and longitude for every city. (last update 28 Oct 2020)

Colors inspired by UNHCR Streamgraph Explorer.

MIT Licensed

Similar vizzes

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
93% 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
93% match
Loading thumbnail…

Map of Cities Ranked by Number of Completed Structures

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.

AAbdul Salam Almadani
86% 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
81% 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
73% 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
73% 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
72% 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
72% match