A3 Box Plot gragh

100%

A3 Box Plot gragh

✓ Published2🌍 Public

Last edited Feb 11, 2025

Created on Feb 11, 2025

This example displays a box plot of National Aviation System delay counts from a filtered airline dataset, loaded from a GitHub-hosted CSV file and rendered with p5.js. It visualizes the distribution with quartiles, whiskers, and individual outliers, calculated using a custom quantile function and the 1.5×IQR rule. The sketch maps data values to canvas coordinates via the `map()` function, draws the plot with p5.js primitives like `rect()` and `ellipse()`, and includes interactive hover tooltips that show exact values when the mouse is near a statistical point.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bad A3 Box Plot gragh

This p5.js visualization critiques a box plot of National Aviation System delays from a filtered airlines CSV dataset. The plot maps delay values to the x-axis while annotating known flaws: a fixed axis maximum of 10,000 seconds compresses the central data, raw outlier dots are drawn at y-axis count positions, and stylized labels exaggerate trends. The code uses p5.js loadTable for data loading, map() for coordinate scaling, and dist() for interactive tooltips on quartile markers and outlier points. The sketch overlays text annotations explaining the misleading design choices.

Hhxu51@usfca.edu

90% match

Loading thumbnail…

Assignment 10: Fixed A3 box plot

This example presents a horizontal box plot of National Aviation System delay counts, drawn with D3.js v7 and rendered as SVG. It visualizes the distribution of delays through a box spanning the interquartile range, whiskers, median line, and steel-blue outlier circles. The chart starts its x-axis at zero for accurate proportional comparison, as noted in an annotation. Using `d3.csv`, `d3.quantile`, and `d3.axisBottom`, the code computes summary statistics and plots them. English annotations, created with the `d3-svg-annotation` library, label the origin, IQR, median, and outliers, while the data comes from a remote CSV file.

Hhxu51@usfca.edu

86% match

Loading thumbnail…

A3 strip Plot gragh

This interactive strip plot visualization uses p5.js to display the distribution of late aircraft delays from a CSV dataset of airline statistics. The visualization renders each delay value as a blue circle along the x-axis, with vertical jittering to prevent overlapping points. Hovering over any point triggers a tooltip showing the exact delay count. The chart includes labeled axes and tick marks, with data loaded via `loadTable` from a remote CSV file and mapped to canvas coordinates using p5.js's `map()` function.

Hhxu51@usfca.edu

82% match

Loading thumbnail…

A3 histogram gragh

This p5.js visualization displays a histogram of airline carrier delay counts, loaded from a remote CSV file hosted on GitHub. The sketch uses `loadTable()` to fetch the data before drawing, then computes 10 bins from the delay values and renders them as blue rectangles on a canvas with grid lines and labeled axes. Tooltips reveal exact counts when the mouse hovers over each bar. The x-axis labels carrier delays while the y-axis shows the number of delays, with axis titles rotated via `translate()` and `rotate()`.

Hhxu51@usfca.edu

81% match

Loading thumbnail…

A3-Boxplot

This visualization displays a boxplot of the number of innings batted by players in T20 cricket, drawn with the p5.js library. The sketch loads a CSV dataset with `loadTable`, computes quartiles and outliers via a custom `quantile` function, and renders the plot on a canvas using shapes like `rect`, `line`, and `ellipse`. Purple dots mark outlier values beyond the whiskers, with labeled axes indicating statistical landmarks.

Bbhavi.kenia@gmail.com

76% match

Loading thumbnail…

box plot A3

This visualization displays the distribution of monthly rainfall data using a box plot. It presents five key statistics—minimum, first quartile, median, third quartile, and maximum—computed from the dataset. The code loads rainfall values from a CSV file using p5.js’s `loadTable()` function, calculates the quartiles with a custom quantile function, and renders the plot on an 800×400 canvas. The p5.js drawing API constructs the box, median line, whiskers, and caps, with the median value labeled beside the plot. The visualization is titled "Rainfall Distribution" and uses a scaling factor of 50 to map data values to canvas coordinates.

KKwasi Acquaye

76% match

Loading thumbnail…

A4 - Boxplot in D3

This example visualizes the distribution of year values from flight data using a boxplot rendered with D3.js. It computes quartiles, median, and whisker bounds from the Time.Year column of the flightsData.csv dataset. The SVG chart displays a box with whiskers and labels for min, Q1, median, Q3, and max, using D3 scales and axes to position elements along a linear year axis.

Rronnieferrufino4908@gmail.com

76% match

Loading thumbnail…

BoxPlot A3

This example visualizes city fuel consumption data from a CSV file using a box plot. The p5.js sketch loads the dataset with `loadTable`, extracts the `FuelInformation.City` column, and computes quartiles with a custom `getQuartile` function. It draws the five-number summary, including whiskers, a blue box, median line, and axis labels, layered over a grid. The chart highlights statistical distribution through Canvas rendering in a 800×500 pixel space.

SSukhraj Singh

75% match