A2_DotPlot

100%

✓ Published0🌍 Public

Last edited Apr 2, 2024

Created on Feb 6, 2024

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

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

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

84% match

Loading thumbnail…

A2_HeatMap

A heatmap visualizes earthquake magnitudes across different countries and months, with each cell color-coded to indicate impact level, where pink represents high magnitude and blue represents low magnitude. The visualization also includes a legend and tooltip that displays country, month, and magnitude details when hovering over a cell. Built with p5.js, the code loads earthquake data from a CSV file using `loadTable()` and renders rectangles via the Canvas API, using color interpolation based on magnitude values to encode severity.

DDuc Pham

81% match

Loading thumbnail…

Bar Chart

This example displays a bar chart comparing the average impact magnitude of earthquakes across different locations, highlighting that Japan has the highest average and Afghanistan the lowest. Built with the p5.js library, the visualization loads CSV data from a GitHub gist, filters locations with magnitudes above 3.0, and calculates the mean per location. Rendered on a 1000x600 canvas, it uses p5 rect() for bars, text() for labels, and line() for the axes and grid ticks, with results shown on a scale from 0.5 to 4.5.

CChandana Srinivas

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

75% match

Loading thumbnail…

ICE 6 Bar Chart

This bar chart displays the average impact magnitude of earthquakes across different locations, filtering for values above 3.0. It reads data from a CSV file containing earthquake records, processing it with p5.js’s `loadTable` and custom sorting logic in `setup`. The visualization uses p5.js’s `createCanvas` and drawing functions, including `rect` for bars and `text` for labels and tick marks, to plot each location’s average magnitude. Japanese and Afghan averages are highlighted directly on the chart.

MM Hema

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

73% match

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

73% match