Assignment 3 - Box Plot - P5.js

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()`.

82% match

Dot Plot

A dot plot visualizes the average impact magnitude of earthquakes across different locations, filtering to show only those with magnitudes above 4.0 and highlighting the highest values in black. The p5.js sketch loads earthquake data from a CSV file, computes averages per location, and renders labeled dots along a scaled axis in a canvas. It uses `createCanvas`, `loadTable`, and `point` to draw the plot, with horizontal grid lines and tick marks for magnitude values ranging from 4.0 to 5.0.

77% match

Strip Plot

This visualization uses a strip plot to display the number of earthquakes recorded across eight different locations during 2016. Built with p5.js, it loads a CSV dataset and groups earthquakes by location (e.g., Afghanistan, Alaska, Japan), plotting each month’s count as a colored point jittered horizontally along the x-axis. The y-axis encodes the earthquake count, with grid lines and labels, while each location gets a distinct color and a fixed column. The code processes the data in `setup()`, then draws the axes, labels, and points in `draw()` using p5.js functions like `point()`, `stroke()`, and `text()`.

75% match

A2_BarChart

This bar chart visualizes the average earthquake magnitude for different countries, sorted alphabetically, with bars colored orange and highlighted green on hover. It displays a tooltip showing the country name and average magnitude when the mouse moves over a bar. The visualization is built using p5.js, loading earthquake data from a CSV file via `loadTable()`, and uses custom drawing functions like `rect()`, `line()`, and `text()` to render the chart, axes, and labels.

DDuc Pham

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

Histogram

This visualization displays the frequency of earthquake impact magnitudes from 2016 as a histogram, with seven bins covering ranges from 0-0.9 up to 6-6.9. The p5.js library loads CSV data from a GitHub gist, parses the "impact magnitude" column, and counts values into bins. The draw loop renders axes, gridlines, and interactive bars using p5.js `rect()` and `text()` functions, showing the count when hovering over each bar. The chart includes labeled axes for frequency and magnitude ranges.

P5 BoxPlot

This example renders a boxplot of industrial natural gas prices in Hawaii using p5.js. It loads CSV data from a GitHub gist, computes quartiles and median from the price array, and draws the plot with rectangles, lines, and text labels. The chart displays minimum, maximum, and quartile values on a numeric scale, with axes marked from 0 to 800. The sketch uses p5.js functions like `loadTable`, `createCanvas`, and `rect` within the `setup` and `draw` loops.

Mmariahdiaz