Patrick

@pdotsani·9 public vizzes

Lab 3 Boxplot

This example displays a boxplot of quarterback points added per season, showing the median, interquartile range, and outliers as individual points. The visualization uses p5.js to load CSV data from a GitHub gist, filter positive values into a sorted array, and compute quartiles directly in JavaScript. Draw functions render the box, whiskers, and outlier circles on a canvas, with axis labels generated programmatically. The code demonstrates a manual approach to statistical visualization without external charting libraries.

Feb 10, 2025

Loading thumbnail…

Lab 3 Histogram

This visualization displays a histogram of quarterback ratings (QBR) from a CSV dataset loaded via p5.js’s `loadTable` function. The bars represent the frequency of QBR values grouped into ten-point bins, with axes labeled for QBR range and count. Using p5.js Canvas drawing, the sketch renders yellow bars, a grid overlay, and hover-based tooltips that reveal the exact count for each bin when the mouse enters a bar’s area.

Feb 9, 2025

Loading thumbnail…

Lab 3 Strip chart

This strip chart visualizes the distribution of ratings for bay area boba shops, with each shop represented as a jittered dot along the y-axis. The data is loaded from a CSV file using p5.js’s `loadTable` function, and the plot is rendered on an HTML5 Canvas via `createCanvas`. The sketch uses `preload` to fetch the data, then in `setup` it parses the rating column, applies random horizontal jitter, and draws axes and labels with the `text` and `line` functions.

Feb 9, 2025

Loading thumbnail…

Lab2 Heatmap

This example visualizes California avocado production across seven counties and multiple years using a heatmap rendered with p5.js. It displays county names on the y-axis and years on the x-axis, with each cell's color intensity reflecting the production volume, from lighter greens for lower values to darker greens for higher yields. The data is loaded from a remote CSV file using `loadTable()`, and the drawing loop iterates through the parsed table to populate the grid with colored squares via `square()` and `fill()`.

Feb 2, 2025

Loading thumbnail…

Lab2 Dot Plot

This dot plot visualizes the relationship between fuel efficiency (mpg) and model name for a selection of cars, with each vehicle represented as a small circle. The visualization uses the p5.js library to create an 800x800 pixel canvas and reads its data from a CSV file hosted on GitHub. The code directly accesses the 'mpg' and 'model' columns from the loaded table, plotting each car's mpg value horizontally at fixed vertical intervals and labeling each point with its model name in black text.

Feb 2, 2025

Loading thumbnail…

Lab2 Bar Chart

This bar chart visualizes fuel efficiency data from the mtcars dataset, plotting miles per gallon (mpg) for each car model. The p5.js sketch loads a CSV file from a GitHub gist using `loadTable`, then renders horizontal bars with `rect` on an 800x800 canvas. Each bar’s length is proportional to the mpg value, with car model names displayed as text labels. The visualization uses a fixed loop to draw all 32 rows, showing the relationship between car models and their fuel economy ratings.

Feb 2, 2025

Loading thumbnail…

Data Transfer Test

This example visualizes the `mtcars` dataset by rendering a horizontal bar chart of miles per gallon (mpg) values for each car. It uses the p5.js library to load the CSV data from a GitHub gist in `preload()` and draw the bars on an 800x800 canvas in `setup()` and `draw()`. Each bar’s length is scaled linearly by its mpg value, displaying the full dataset in a compact, static format.

Jan 30, 2025

Loading thumbnail…

Snowman in p5

This example demonstrates the foundational setup and drawing capabilities of the VizHub V3 Runtime Environment using the p5.js library. It renders a simple snowman composed of stacked white circles, an orange triangle nose, black dot eyes, and a red scarf ellipse onto a gray canvas. The sketch.js file initializes an 813x800 pixel canvas in the setup function and executes all drawing operations within the draw function. The code serves as a minimal template for exploring p5.js primitives like circle, triangle, and ellipse within VizHub's hot-reloading environment.

Jan 28, 2025

Loading thumbnail…

Snowman in p5

This example demonstrates the VizHub Version 3 runtime environment using a minimal "Hello World" sketch written in p5.js. The code exports a `main` function that receives a container DIV and sets its inner HTML to display static text whose font size is defined by a numeric variable. An accompanying video and course playlist illustrate how interactive widgets enable continuous hot reloading, allowing properties like font size to be adjusted by Alt-dragging a number in the editor. The example serves as a blank slate for building dynamic visualizations.

Jan 28, 2025