Skyscraper Boxplot

100%

Skyscraper Boxplot

✓ Published0🌍 Public

Last edited Feb 15, 2022

Created on Feb 15, 2022

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.

AI-generated description

Skyscrapers in this dataset are not necessarily completed.

Certain outliers were not able to be drawn on the chart, as they were quite far outside the bounds of the canvas, and too small in count to justify a logarithmic scale y axis as that would distort the box plot itself.

Height of outliers not included: 518, 541.02001953125, 541.29998779297, 609.48999023438, 609.59997558594, 1609.3599853516

Also, I could not find from the dataset the unit of height used, but it as it is an international dataset and many current buildings built during the duration of the dataset are over the largest value if it were in feet, I have written meters as the unit of height.

MIT Licensed

Similar vizzes

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

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

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

73% match

Loading thumbnail…

Assignment 3 - Histogram - P5.js

This visualization displays a boxplot of billionaire ages from the billionaires.csv dataset, summarizing the distribution through quartiles, median, and outliers. It highlights the interquartile range with a colored rectangle, extends whiskers to the upper and lower fences, and marks outlier values as grey circles. Built with p5.js, the sketch loads the CSV in `preload()`, calculates statistical measures in `cleanData()`, and renders interactively in `draw()`. A tooltip appears when the mouse hovers over the box, revealing the computed five-number summary values.

SSimon Hackbert

73% match

Loading thumbnail…

Box Plot-A3

This example visualizes the distribution of Broadway show gross earnings using a box plot, highlighting the median, quartiles, whiskers, and outliers. The visualization is rendered with p5.js, which loads a CSV file from a GitHub gist in the `preload()` function and computes the five-number summary and interquartile range for outlier detection. The plot includes labeled axes, a box spanning the interquartile range, and individual points for values falling outside the upper and lower fences.

Jjrcuster@dons.usfca.edu

71% match

Loading thumbnail…

Lab 3 Boxplot

This example displays a boxplot of quarterback points added per season, showing the median, interquartile range, and outliers as individual points. The visualization uses p5.js to load CSV data from a GitHub gist, filter positive values into a sorted array, and compute quartiles directly in JavaScript. Draw functions render the box, whiskers, and outlier circles on a canvas, with axis labels generated programmatically. The code demonstrates a manual approach to statistical visualization without external charting libraries.

PPatrick

71% match

Loading thumbnail…

vertical boxplot

This example shows a vertical boxplot for each day in a small dataset, displaying the minimum, maximum, median, and quartile values as distinct graphical elements. The chart uses a green color scheme with rounded rectangles for the interquartile range, thin lines for the range, and white circles for the median. The visualization is built with D3.js (version 3.5.5) using an SVG rendering, with scales for the x-axis (day) and y-axis (values from -2 to 2). The data is loaded from an external CSV file, and the code defines custom scales, axes, and shapes to construct the plot.

AA6Brgeuka

70% match

Loading thumbnail…

Box Plot

This example visualizes earthquake magnitudes in Hawaii during 2016 using a box plot, displaying the median, quartiles, and outliers from a CSV dataset. The plot highlights values above magnitude 4 as red outlier points and includes a labeled axis. Built with p5.js, the code loads data via `loadTable()`, calculates statistical summaries manually, and renders the chart using Canvas drawing functions like `rect()`, `line()`, and `point()`.

CChandana Srinivas

70% match