kmduncan2@dons.usfca.edu

@kmduncan2·11 public vizzes

Fork of HTML Starter

This example shows a minimal HTML page displaying the static message "Hello HTML!" centered in a large font. The page is a starter template, not a data visualization. It consists of an `index.html` file that links to a `styles.css` stylesheet, applying a 12em font size and text alignment, and an `index.js` file that logs "hello world" to the console. The code uses no visualization libraries or datasets, relying solely on basic HTML, CSS, and JavaScript structure.

Sep 18, 2025

Loading thumbnail…

A4 - Scatter Plot

A scatter plot displays annual rainfall in Ecuador from 1940 to 1950, with each circle representing a year’s total precipitation in millimeters. The visualization uses D3 v7 to load CSV data from a GitHub gist, scale the x-axis as a band for years and the y-axis as a linear scale for precipitation values. SVG circles are positioned using the scale functions, while D3’s axis generators render labeled axes with custom CSS styling for points and typography.

Feb 17, 2025

Loading thumbnail…

A4 - Bar Chart

This bar chart visualizes total rainfall in Ecuador from 1940 to 1950, with each bar representing a year’s precipitation in millimeters. The chart uses D3 v7 to load CSV data from a Gist, scales the values with d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, and renders axes with d3.axisBottom and d3.axisLeft. Bars are drawn as SVG rectangles with a light blue fill, styled via a linked CSS file, and the layout includes margins, a title, and rotated axis labels.

Feb 15, 2025

Loading thumbnail…

A3 - Box Plot

This example displays a box plot of population growth rates in Ecuador from 1940 to 2024, with values ranging from 1.5% to 3.5% plotted on an 800×800 pixel canvas. The visualization includes a blue interquartile range box, median line, and whiskers extending to the minimum and maximum values, computed manually from CSV data loaded via p5.js’s `loadTable()`. The rendering uses p5.js drawing functions such as `rect()`, `line()`, and `text()` to construct the plot and axis labels.

Feb 11, 2025

Loading thumbnail…

A3 - Histogram

This example visualizes the distribution of total precipitation in Ecuador from 1940 to 2024 using a histogram. Rainfall data is loaded from a CSV file via the p5.js `loadTable` function, with values manually binned into fixed ranges. Each bin’s count is then rendered as a blue rectangle on a canvas using p5.js `rect` calls, with axes and gridlines drawn via `line` and `text` functions. The resulting chart communicates the frequency of precipitation totals across Ecuadorian regions.

Feb 11, 2025

Loading thumbnail…

A2 - Dot Plot

This dot plot visualizes total precipitation in Ecuador from 1995 to 2005, with each blue circle representing a year’s rainfall on a Cartesian grid. The p5.js sketch loads CSV data from a GitHub gist via `loadTable` in `preload()`, then draws the chart in `setup()` using functions like `circle`, `line`, and `text`. Gridlines mark 500-mm intervals, axes are labeled, and the data range is derived from the `total_precipitation` and `Year` columns.

Feb 4, 2025

Loading thumbnail…

A2 - Bar Graph

A bar chart displays total precipitation in Ecuador for each year from 1995 to 2005, with the y-axis labeled in millimeters and the x-axis marked by year. The visualization uses the p5.js library within a Processing-style sketch, loading rainfall data from a CSV file hosted on GitHub Gist via the `loadTable` function. Bars are drawn with `rect()` calls, and axis labels are rendered using `text()` and `rotate()` for orientation.

Feb 4, 2025

Loading thumbnail…

A2 - Heat Map

This heat map visualizes total precipitation across seven cities from 1995 to 2005, using color intensity to represent rainfall amounts. The p5.js sketch loads CSV data from a GitHub gist via `loadTable`, then plots color-coded rectangles for each city-year combination. Countries appear on the y-axis, years on the x-axis, with a legend showing the precipitation scale. Colors range from light green for low rainfall to dark teal for higher totals.

Feb 4, 2025

Loading thumbnail…

Cars

This example visualizes fuel economy data from a CSV file of cars, showing each vehicle’s miles-per-gallon rating as a horizontal bar sorted by row order. The bars, drawn in yellow on a gray background, increase in length proportionally to the fuel efficiency value. The code loads the dataset using p5.js’s `loadTable` with a header row, retrieves the numeric `economy (mpg)` column, and renders the rectangles in the `draw` loop. The visualization uses the p5 canvas API with `createCanvas`, `rect`, and `fill`.

Jan 30, 2025

Loading thumbnail…

Snowman in P5

This example illustrates how to create a classic snowman using the p5.js library. It draws a series of overlapping circles to form the body and head, adds facial features, and includes a hat made from rectangles. The sketch uses p5.js functions such as `createCanvas`, `circle`, `rect`, and `triangle` within the `setup` and `draw` functions. The code is a basic demonstration of procedural drawing in a 400x400 canvas with a dark blue background.

Jan 28, 2025

Loading thumbnail…

Snowman in P5

This example demonstrates the fundamental capabilities of the VizHub V3 Runtime Environment, the platform’s new interactive coding foundation. It uses a simple `main` function exported from `index.js` to render a large “Hello World!” string inside a provided `container` DIV, with the text style controlled by numeric properties. The example highlights the environment’s continuous hot reloading feature, where holding the Alt key and dragging a number in the editor instantly updates the visualization, offering real-time feedback without manual refresh.

Jan 28, 2025