Year Completed Skyscraper Histogram

100%

Year Completed Skyscraper Histogram

✓ Published0🌍 Public

Last edited Feb 15, 2022

Created on Feb 15, 2022

This histogram visualizes the distribution of skyscraper completion years using 10-year bins from 1850 to 2019, with outliers removed. Hovering over a bar displays a tooltip with the exact count. Built with the p5.js library, the visualization loads data from a CSV via `loadTable`, computes bin counts in `calculateBins`, and renders the chart using `rect` and interactive mouse-position detection for tooltips.

AI-generated description

A large number of outliers are excluded from this histogram. All but one have a year of '0', which is possibly because the building is not yet completed or because the year completed may be unknown (I could not find a source to confirm this from the original dataset). The other value was a single skyscraper built in 2020, which I chose to exclude as I did not want to include it in the previous bin, nor did I want to have it have its own bin since it doesn't really contain 10 years of data.

Hover over the bars to see the exact number!

MIT Licensed

Similar vizzes

Loading thumbnail…

Skyscrapers Histogram

This histogram shows the distribution of construction start years for U.S. skyscrapers, with bins set at ten-year intervals. The chart uses `d3.bin` to group the data and `d3.scaleTime` with `d3.axisBottom` for the time axis. Bars are drawn as SVG rectangles, colored `cornflowerblue`, on a gray background with horizontal grid lines. The data comes from `skyscrapers.csv`, which is filtered to exclude rows where construction has not started.

Ssyu36

82% match

Loading thumbnail…

Skyscraper Boxplot

This visualization shows the distribution of skyscraper heights as a boxplot, with the median, quartiles, and outliers displayed against a scaled y-axis labeled in meters. The chart calculates the five-number summary from a CSV dataset and renders it using p5.js, drawing lines and text on a canvas. Outliers beyond the whiskers appear as red jittered points, while extreme values exceeding the canvas bounds are excluded and logged to the console. The dataset is loaded asynchronously via loadTable(), and the drawing logic uses p5.js primitives such as line(), point(), and text() to construct the plot.

Ssyu36

73% match

Loading thumbnail…

Skyscrapers Bar Chart

A bar chart displays the counts of material types used in U.S. skyscrapers up to 2016, with categories such as steel, concrete, and composite. The chart uses D3 v7 and SVG rendering, loading data from a CSV file. The code aggregates material counts with `d3.rollups`, scales the axes with `d3.scaleLinear` and `d3.scaleBand`, and renders bars and axes via D3’s selection and scale APIs.

Ssyu36

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

71% match

Loading thumbnail…

Skyscrapers Boxplot

This visualization uses a log-scale boxplot to compare the number of above-ground floors for U.S. skyscrapers from a 2016 CSV dataset, filtering out buildings with zero floors that are not yet completed. Outliers are highlighted as jittered orange dots, while the box, median, and quartile lines are drawn using D3 v7 SVG elements with explicit `d3.scaleLog`, `d3.quantile`, and `d3.median` calls.

Ssyu36

71% match

Loading thumbnail…

Skyscraper Floors Strip Plot

This strip plot shows the distribution of aboveground floor counts among skyscrapers, with one outlier value of 528 excluded. Each green point represents a building, jittered horizontally and plotted vertically according to its floor count on a labeled axis. The visualization uses p5.js and its `loadTable`, `createCanvas`, and `point` functions to render the data from a CSV file loaded via a remote URL. The chart includes an axis with tick labels, a rotated y-axis title, and a main heading, all styled with custom text settings.

Ssyu36

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

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

66% match