Dot Plot

100%

✓ Published0🌍 Public

Last edited Apr 8, 2024

Created on Feb 4, 2024

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.

AI-generated description

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

Similar vizzes

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

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

79% match

Loading thumbnail…

D3 - Scatterplot

This scatterplot visualizes earthquake data, plotting the significance level of earthquakes on the x-axis against their magnitude on the y-axis. Built with React and D3 v7, it renders an SVG chart with a light gray background, labeled axes, and title. The code uses `d3.csv` to load data from a GitHub Gist, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` to generate ticks. Individual data points are drawn as purple circles with the `.dot` class, with the chart layout adjusted through SVG `rect`, `g`, and `line` elements.

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

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

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

77% match

Loading thumbnail…

Untitled

This example presents earthquake frequency and impact data from a CSV file across four small multiples, each plotting one magnitude bin (5.0–5.9, 6.0–6.9, 7.0–7.9, 8.0+) against time. The charts share a linear y-axis for quake counts, with point size encoding estimated deaths via a square-root scale. The code uses D3 v5 to parse the data, create time and linear scales, and render SVG axes and symbols for each subset. Circle, triangle, diamond, and square shapes distinguish the magnitude categories across the four linked views.

Ddarshue

77% match

Loading thumbnail…

Dot Plot

This dot plot visualizes average chocolate ratings by company location, filtering to show only locations with ratings above 3.0. It uses p5.js to load a CSV dataset via `loadTable()`, compute averages, and render the plot on a canvas. Each row displays a location name and its corresponding average rating, with points positioned horizontally based on a transformed rating value using exponentiation. The chart includes axis lines and tick marks, with text labels drawn for each data point.

BBhumika Srinivas

77% match