Miaya South

@msouth-code·7 public vizzes

A6 Charts

This example presents three coordinated data visualizations built with D3.js v7 and rendered as SVG. It demonstrates a bar chart of daily cigarette consumption in Australia from 1980 to 2012, a diverging bar chart of minimum temperatures across Colorado weather stations, and a scatterplot of cereal nutritional data. The code uses D3's `scaleBand`, `scaleLinear`, and `scaleSequential` APIs to construct the charts, which are loaded from CSV files via `d3.csv`. A color legend is generated using the `d3-svg-legend` library, and the visualizations include axis labels and titles.

Mar 4, 2025

Loading thumbnail…

A3 Graphs

This example visualizes the total number of smokers in Australia from 1980 to 2012 using a p5.js canvas. It renders a box plot displaying the minimum, maximum, average, and quartile values computed from data loaded via loadTable from a CSV file hosted on GitHub. The sketch sorts the raw values to calculate statistical summaries, then draws annotated axes and a distribution histogram using p5.js drawing functions.

Feb 13, 2025

Loading thumbnail…

A2 Graphs

This example presents three distinct data visualizations within a single p5.js canvas: a bar chart of female smokers in Australia over time, a dot plot of fiber content in bread, and a heat map of monthly precipitation in Seattle. The code loads CSV data from GitHub gists using `loadTable`. It directly renders shapes like `rect` for bars and heat map cells, and `circle` for dots, while manually annotating axes and using color thresholds to encode precipitation levels.

Feb 4, 2025

Loading thumbnail…

Fork of P5 CSV Loader

This example visualizes smoking rates by gender as a simple bar chart, where each bar’s width corresponds to the female percentage from a CSV file loaded from a GitHub gist. The p5.js `loadTable` function fetches the data in `setup()`, and `table.getColumn()` extracts the `Data.Percentage.Female` column for rendering. Using the p5.js Canvas API, it draws 9.5-pixel-high rectangles in a loop over the dataset, with a light purple fill on a gray background. The sketch is embedded in an HTML page that imports p5.js from a CDN.

Feb 1, 2025

Loading thumbnail…

P5 CSV Loader

This example visualizes the percentage of female smokers from a CSV dataset loaded from a GitHub gist. The p5.js `loadTable` API fetches the data in `setup()`, and `getColumn` extracts the numeric values for rendering. Each bar’s width maps linearly to the percentage via `rect`, using a lavender fill on a gray canvas. The code demonstrates a straightforward bar-chart construction with p5.js’s drawing functions, showing the distribution of values across records.

Feb 1, 2025

Loading thumbnail…

Fork of P5 CSV Loader

This example visualizes smoking rates for Australia across multiple years using a scatter-plot-like layout. It loads CSV data from a GitHub Gist via the p5.js `loadTable` function, then filters rows with `findRow` to isolate country-specific records. The sketch uses p5.js canvas drawing commands like `rect` and `text` to render bars and year labels, scaling values from the `Data.Percentage.Female` column. The chart encodes each year’s percentage as bar height, with a static y-axis baseline and x-axis spaced by year index.

Feb 1, 2025

Loading thumbnail…

Snowman in P5

This example shows a simple snowman character built from three white circles, with a black top hat, orange triangular nose, and two dot eyes. The p5.js code uses the `setup()` and `draw()` functions, with `createCanvas()` to define the drawing surface and `circle()`, `triangle()`, and `rect()` to render the shapes. The `background()` function fills the canvas with a light blue color. The sketch relies on fixed coordinates rather than user interaction or data input.

Jan 28, 2025