Wilson Fong

@wilsonfong56·6 public vizzes

Simple Histogram

This interactive histogram visualizes the distribution of average Mathematics GPAs from a CSV file of school scores. The p5.js sketch renders the data as a bar chart with a grid, axis ticks, and a hover tooltip that shows the specific GPA range and frequency count for each bin. It uses `loadTable()` for data access and `map()` for scaling values into graphical coordinates.

Feb 6, 2025

Loading thumbnail…

Simple Heat Map

This heat map visualizes average GPA scores across seven U.S. states over six years, using a white-to-dark blue color scale to represent low, mid, and high academic performance. Built with p5.js, the sketch loads a CSV file containing school scores, then renders a grid of colored cells with state and year axis labels, followed by a legend explaining the color thresholds. The example demonstrates how to transform tabular data into a matrix-based visualization using standard p5.js drawing functions like `rect`, `text`, and `line`.

Feb 3, 2025

Loading thumbnail…

Simple Dot Plot

This dot plot visualizes average math GPAs for seven states using data loaded from a CSV file hosted as a GitHub gist. The p5.js sketch draws labeled axes, tick marks, and colored circles to map each state’s GPA value along a continuous scale from 2.5 to 4.0. The visualization uses `loadTable` in `preload()` for data loading, `createCanvas` for the drawing surface, and `map()` to position elements within a fixed margin and graph area.

Feb 3, 2025

Loading thumbnail…

Simple Bar Chart

This bar chart visualizes the average SAT Math scores for male and female students, derived by computing column means from a CSV dataset loaded via p5.js's `loadTable()` function. It uses the p5.js drawing API (`createCanvas`, `rect`, `line`, `text`) within the `draw()` loop to render horizontal bars and axes, mapping numeric scores to pixel widths via `map()`. The visualization directly compares two categorical averages, with tick labels and axis annotations clarifying the score scale.

Feb 1, 2025

Loading thumbnail…

Fork of Snowman in P5

A fork of the classic snowman drawing uses p5.js to render three stacked white circles on a red background, with black dots for eyes and a smile. The sketch.js file defines traditional p5.js `setup()` and `draw()` functions, calling `createCanvas(600, 600)` and using `fill()` and `circle()` to compose the figure. The simple, static composition demonstrates basic shape drawing and coordinate placement within a single frame.

Jan 28, 2025

Loading thumbnail…

Snowman in P5

This example demonstrates a minimal interactive widget in the VizHub V3 runtime, showing how to render text that updates in real time by alt-dragging a number in the code editor. The implementation exports a `main` function that sets the container’s inner HTML with a dynamic font size value, which the runtime detects and hot-reloads without a refresh. It uses plain DOM manipulation via `container.innerHTML`, relying on VizHub’s state management and interactive widget system rather than any external visualization library.

Jan 28, 2025