Andrew Blakeslee Moore

proj-choropleth

A9 - Choropleth

A8 - Node-Link with Force Directed Layout

This visualization shows the Advogato social network’s 1,000-member connection structure as a node-link diagram, with gray lines representing edges and green circles for nodes. Using D3 v7’s `d3.forceSimulation`, it applies `forceManyBody` for repulsion, `forceLink` for edge spacing, and `forceCenter` for layout, updating positions via the simulation’s tick event. The SVG renders at 3500×2500 pixels, requiring zoom or scroll to view fully, and loads data from a CSV in the Network Data Repository.

A6 - Bar Chart w/ Sequential Color Scale

This example visualizes new AIDS diagnoses in 2020 for six countries, using a horizontal bar chart where bar height encodes the diagnosis count and a sequential red color scale encodes the same quantitative value. The visualization includes an axis, gridlines, and a legend for the color scale. The chart is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateReds` for the color mapping. The legend is generated via the `d3.legendColor` API. Data comes from UNAIDS via CORGIS.

Bubble Chart in D3

This bubble chart visualizes the prevalence of AIDS in six African countries, plotting the number of individuals living with the disease on the y-axis against the year on the x-axis. The bubble size encodes the number of new diagnoses, while color distinguishes countries. The visualization uses D3.js v7 with SVG rendering and d3.csv for data loading, d3.scaleLinear for scales, and custom legends for size and color. It includes axes with formatted tick labels and a title, requiring side scrolling due to the chart's dimensions.

Bar Chart in D3

This bar chart displays the maximum hours of music listened to per day across surveyed ages, omitting ages not present in the dataset. It uses D3 v7 to load a CSV file, aggregates the data with `d3.group`, and computes the maximum per age via `d3.max`. The SVG rendering uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axes labeled using `d3.axisBottom` and `d3.axisLeft`. Bars are purple rectangles with white value labels, and hovering over a bar changes its fill to mediumpurple.

A3 - Visualizing Distributions using P5

A bar chart visualizes the maximum hours of music listened to per day across ages 10 to 65, using data from a CSV file. The p5.js library handles canvas rendering, while the `loadTable` API preloads and parses the remote data. Bars are drawn with `rect` calls, with axis ticks and labels positioned manually. The chart aggregates hourly values by age, filtering out hours exceeding 24, and displays purple bars against a white background with gridlines.

a2-visualizing-amounts-p5

This visualization presents a grouped bar chart comparing the number of survey participants with self-reported mental health disorders—depression, anxiety, and insomnia—across four primary streaming services: Spotify, Apple Music, YouTube Music, and Pandora. Built with the p5.js library, the sketch loads CSV data from a Gist URL, aggregates counts for participants with a severity score of five or higher, and renders horizontal bars. The chart includes a legend and labeled axes, highlighting the observation that YouTube Music outranks Apple Music despite the latter's larger user base.

Fork of P5.js Starter

This example demonstrates a p5.js sketch rendered in the VizHub environment with hot reloading, showing three concentric target patterns of varying gray shades on a canvas. The code imports the p5 library and manually instantiates it to bypass the default global functions, binding methods like `createCanvas`, `background`, `fill`, and `ellipse` to the p5 instance. It defines `setup` and `draw` functions within the sketch, attaching them to the instance, and uses the canvas `parent` method to attach the canvas to the container element, enabling seamless updates during development.