Skip to main content
SimilarExport ZIP
100%

A3 Strip Chart

✓ Published0🌍 Public
Ddonaldminer
Last edited Feb 14, 2022
Created on Feb 14, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A3 Box Plot

This example visualizes the distribution of mushroom stem lengths using a box plot. It displays the minimum, maximum, median, and interquartile range of the dataset, which is loaded from a CSV file. The visualization is built with the p5.js library, using its `createCanvas`, `loadTable`, `sort`, and drawing functions. Data is processed by computing quartiles and the median, then rendered as a vertical line for range, a rectangle for the interquartile range, and a line for the median on a 500×500 canvas with custom axis labels.

Ddonaldminer
82% match
Loading thumbnail…

A3 Histogram

This visualization displays the distribution of mushroom cap diameters from a CSV dataset, using a bar chart where each bar represents the log-scaled count of caps within a 5-centimeter bin. The p5.js TypedDict stores counts per diameter, while the canvas renders grid lines, axis labels, and colored bars. The code loads data via `loadTable` from a GitHub Gist and uses `log` to compress the y-axis values, with a legend and header text clarifying the measurement units.

Ddonaldminer
80% match
Loading thumbnail…

A3 - Visualizing Distributions using P5

This example visualizes distributions using three interactive P5.js plots: a histogram, a box plot, and a strip plot, each embedded as separate VizHub links. The histogram displays the frequency of numeric values across bins, the box plot summarizes the data’s median, quartiles, and outliers, and the strip plot shows individual data points along a single axis. The visualizations use P5.js for canvas rendering and drawing shapes, with data organized into arrays and processed for statistical summaries. The page is built with plain HTML and CSS links, referencing external VizHub projects for each plot.

DDuc Pham
74% match
Loading thumbnail…

A3_StripPlot

A strip plot displays the distribution of AI engineer salaries from a 2023 dataset, with each salary represented as a jittered dot along a horizontal axis. The chart maps salary values using p5.js functions like `map()`, `min()`, and `max()`, while random vertical offsets reduce overplotting. Salary range markers and axis labels are drawn with p5.js primitives, and the data is loaded via `loadTable()` from a CSV file hosted on GitHub.

DDuc Pham
74% match
Loading thumbnail…

CS360 A3 Strip Chart

This example displays a histogram of average math SAT scores for each U.S. state, using data from a CSV file loaded via p5.js’s `loadTable` function. The chart divides scores into bins of 20 points, from 380 to 620, and renders blue bars with grid lines and labeled axes on a canvas created by `createCanvas`. The code uses p5.js’s `map` and `normalize` functions to scale frequencies and positions, with text labels drawn via `text` and rotated for the y-axis title.

EEric Yao
71% match
Loading thumbnail…

Strip Chart

This strip chart shows the distribution of Apple’s monthly share price from July through December 2021, with each month’s data points jittered horizontally to reveal density and spread. It loads a CSV from a GitHub gist using p5.js’s `loadTable()`, then renders points with `point()` on a 700×600 canvas. The x-axis labels months, the y-axis maps price per share, and random jitter is applied per point within each month’s column using `random()`. The code uses p5.js’s `setup()`, `draw()`, and `noLoop()` to generate the static visualization.

PPranay Matalia
70% match
Loading thumbnail…

A2 Bar graph

This visualization displays the number of poisonous mushrooms across different families, using horizontal yellow bars on a gray canvas. The p5.js code loads a CSV dataset from a GitHub gist, processes it with a p5.TypedDict to count occurrences, and renders each family name as a label with a proportional bar. A scaled axis below the bars marks count values with tick lines. The algorithm tracks the maximum count to scale the chart appropriately.

Ddonaldminer
70% match
Loading thumbnail…

CS360 A3 Strip Chart

This interactive strip chart visualizes average math GPAs across U.S. states from 2005 to 2015, with each year’s data points jittered along the x-axis to reveal distribution. The p5.js sketch loads a CSV of SAT scores, maps values to canvas coordinates, and renders blue ellipses for individual data points. Axis labels, a chart title, and rotated axis titles are drawn using p5.js text functions, while `random()` adds horizontal scatter to reduce overplotting.

EEric Yao
69% match