Skip to main content
SimilarExport ZIP
100%

Skyscrapers Boxplot

✓ Published0🌍 Public
Ssyu36
Last edited Feb 22, 2022
Created on Feb 22, 2022
Forked from HTML Starter

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.

AI-generated description

A boxplot comparing statistics for the floors that are above ground of skyscrapers in the U.S.

Several rows of data contained the value of '0' for number of floors above ground. These have been removed since those buildings are buildings not yet completed/started and for visual clarity.

I decided to use a log scale to be able to display the outliers properly while still maintaining the general boxplot information.

MIT Licensed

Similar vizzes

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
83% match
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
79% 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
78% 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
75% match
Loading thumbnail…

Skyscrapers Scatterplot

This scatterplot maps the latitude and longitude of U.S. skyscrapers, revealing the country’s general outline with clusters in major cities and isolated points for Alaska and Hawaii. Points with coordinates of (0, 0) are filtered out, as they represent buildings whose locations are not yet finalized. The visualization uses D3.js (v7) with SVG rendering, employing a linear scale and axis with grid lines to plot each building as a cornflowerblue dot.

Ssyu36
75% match
Loading thumbnail…

Year Completed Skyscraper Histogram

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.

Ssyu36
71% match
Loading thumbnail…

Barchart of the 10 Highest Skyscrapers in the USA

This example displays a bar chart of the ten highest skyscrapers in the USA, with each bar labeled with its height in feet. Built with D3 v5, it uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles within a group. The chart reads data from a static JavaScript array, applies a blue fill to the bars, and appends text labels above each bar. The code also relies on D3 selections to append an SVG container and a title to the page.

NNigel
69% 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
69% match