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

100%

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

✓ Published0🌍 Public

Last edited Nov 2, 2020

Created on Nov 1, 2020

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

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.

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

95% match

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

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

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

80% match

Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a world map with a time-series bar chart to explore urban building density data. Users brush over the date histogram to filter cities on the map, with circles sized by total building counts via d3.scaleSqrt. The map uses d3.geoNaturalEarth1 and d3.geoPath to render land masses and graticules from World Atlas TopoJSON. React’s useMemo optimizes rendering, while d3.brushX links the two views for fast, responsive filtering.

AAbdul Salam Almadani

74% match

Loading thumbnail…

Fork of Multiple Views with Brushing

A world map displays cities with populations over 50,000 using a square-root size scale, while a histogram below shows the total dead and missing migrants over time. The visualization uses React with D3 v5, employing `d3.geoPath` and `d3.geoNaturalEarth1` for the map projection and `d3.brushX` for interactive brushing. Users can brush the histogram to filter the map points by date range. Data comes from Simplemaps and the World Atlas TopoJSON, with migrant records from a CSV. The map circles are semi-transparent to show overlapping points.

Wweny1109

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

72% match