Skip to main content
SimilarExport ZIP
100%

Box Plot

✓ Published0🌍 Public
CChandana Srinivas
Last edited Feb 12, 2024
Created on Feb 11, 2024
Forked from HTML Starter

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

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 3 - Box Plot - P5.js

This example presents a box plot visualizing earthquake magnitudes across South American countries, with the chart drawn using P5.js. The visualization displays statistical quartiles, median, and minimum/maximum values for the dataset. The code loads earthquake data from a CSV file hosted on GitHub using P5.js’s `loadTable` function, then manually renders the box plot elements—including the box, whiskers, and dashed lines—through canvas drawing commands like `line()` and `rect()`. Axis labels and rotated text are also drawn using P5.js text functions, while the data is mapped to screen coordinates via `map()`.

SSimon Hackbert
82% match
Loading thumbnail…

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.

CChandana Srinivas
79% match
Loading thumbnail…

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.

CChandana Srinivas
78% match
Loading thumbnail…

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

Fork of D3-Histogram

This example presents a histogram of earthquake impact magnitudes in Hawaii, using a bar chart to display the frequency distribution across magnitude bins. The chart includes labeled axes for impact magnitude and earthquake count, with a title indicating the dataset’s subject. Built with D3 v6 and React, the visualization loads CSV data via `d3.csv`, computes bins using `d3.histogram`, scales positions with `d3.scaleLinear`, and renders SVG rectangles styled with a teal fill. Axes are generated through `d3.axisBottom` and `d3.axisLeft`.

Aatifroome@gmail.com
76% match
Loading thumbnail…

D3-Histogram

This visualization displays the frequency distribution of earthquake impact magnitudes in Hawaii using a histogram. The chart, rendered with SVG, plots impact magnitude on the x-axis and earthquake count on the y-axis. It loads data from a CSV file via d3.csv and uses `d3.histogram()` with `x.ticks(10)` to bin the values. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with bar heights scaled by a linear `d3.scaleLinear` for the y-axis. The code is built with D3 v6 and embedded in a plain HTML page.

CChandana Srinivas
76% match
Loading thumbnail…

A2_DotPlot

This dot plot visualizes the average earthquake magnitude for countries with values above 4.0, using data loaded from a CSV file via p5.js’s `loadTable`. Each dot’s color indicates whether the magnitude exceeds 4.8 (red) or falls below (orange), with Japan and Afghanistan labeled as highest and lowest. The visualization computes averages through nested loops, renders points and axes on a p5.js canvas, and includes a hover tooltip that displays country and magnitude details when the mouse moves near a dot.

DDuc Pham
75% match
Loading thumbnail…

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

CChandana Srinivas
74% match