macodiero@yahoo.com

@Bkwala2011·4 public vizzes

snowmanp5

This example displays a histogram of car fuel economy data from a CSV file, with bars representing the frequency of miles-per-gallon values across ten bins. It uses the p5.js library, loading the dataset through `loadTable` in `preload()`, then computing bin counts and rendering the chart in `setup()` and `drawHistogram()`. The visualization includes labeled axes, faint grid lines, and blue bars scaled to the maximum count.

Feb 19, 2025

Loading thumbnail…

Histogram

This visualization displays a histogram of average miles per gallon for vehicles in North America, using data from a CSV file loaded via p5.js's `loadTable`. The sketch, built with p5.js, counts data points into bins and renders bars with `rect`, scaled by maximum frequency. It includes axis labels and tick values, with a dark background and blue bars.

Feb 11, 2025

Loading thumbnail…

Barchart

This bar chart visualizes fuel economy (miles per gallon) for individual car models from a CSV dataset, ordered vertically. The code uses p5.js with `createCanvas`, `loadTable`, and `rect` to render bars proportional to each car's mpg value, with car names labeled along the y-axis. Height adjusts dynamically based on the number of rows, and the chart includes axes and a title. The visualization prioritizes clear comparison of fuel efficiency across a wide range of vehicles.

Feb 5, 2025

Loading thumbnail…

Dot-plot

This dot plot visualizes the fuel economy of various car models, with each dot’s horizontal position encoding miles per gallon (MPG) on a single axis. The sketch, built with p5.js, loads a CSV dataset from a GitHub Gist, scales the values against the maximum MPG, and places each car’s name along the vertical axis. The chart includes axis labels, a title, and a margin-based layout, using ellipses as the primary glyphs for data points.

Feb 5, 2025