A3 strip Plot gragh

100%

A3 strip Plot gragh

✓ Published0🌍 Public

Last edited Feb 20, 2025

Created on Feb 12, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

84% match

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

83% match

Loading thumbnail…

A3 Box Plot gragh

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.

Hhxu51@usfca.edu

82% match

Loading thumbnail…

Assignment 4: scatter plot with D3

This scatter plot visualizes the relationship between carrier delays and late aircraft delays using flight data loaded from a remote CSV file. Red circles represent individual data points, with axes labeled for each delay type and interactive tooltips appearing on hover to show exact values. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` for data loading, `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and mouse event handlers for tooltip interactions.

Hhxu51@usfca.edu

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

76% match

Loading thumbnail…

A7-Multi-Line Chart in D3

This multi-line chart visualizes flight delays by cause—Carrier, Late Aircraft, National Aviation System, and Weather—across months for a single year. It uses D3 v6 with SVG rendering, loading CSV data from a GitHub gist. The code employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate paths for each delay category, with a custom legend and axes drawn using `d3.axisBottom` and `d3.axisLeft`.

Bbhavi.kenia@gmail.com

75% match

Loading thumbnail…

A3 Strip Chart

A3 Strip Chart displays the distribution of mushroom stem widths as a scatter plot along a vertical axis, with each dot jittered horizontally to reduce overlap. The visualization reads data from a local CSV file loaded via p5.js’s `loadTable()`, then filters and sorts the values in `setup()`. Using the p5.js `createCanvas()`, `ellipse()`, and `random()` functions, it renders individual points on an 800×800 canvas with labeled tick marks and axis lines.

Ddonaldminer

75% match

Loading thumbnail…

A7 Multi-Line Chart

This multi-line chart visualizes average annual flight delays across four airline categories using CSV data from a GitHub-hosted airlines dataset. The visualization employs D3.js v7 with SVG rendering, displaying four distinct colored lines with interactive circle markers. The chart uses d3.scaleLinear, d3.line, and d3.axisBottom, while implementing hover-based tooltips to reveal specific year and delay values. ColorBrewer provides the categorical color scheme for distinguishing between airline groups.

Hhxu51@usfca.edu

75% match