ctan13@dons.usfca.edu

Tester

[A11] My Chart

[A11] Starter Chart (Brushing, Filtering, and Zoom/Pan)

Final Project

[A10] CPI of Meats in 2015 (Intentional Black + White Redesign)

[A10] (Previous Black Hat + White Hat Redesign in D3)

[A10] Bar Chart of 2016 Election Data (Found Black Hat + White Hat Redesign)

[A7] CPI of Various Grains from 2000 - 2015 (Multi-Line Chart with a Color Legend)

This multi-line chart displays the Consumer Price Index (CPI) for corn, rice, rye, and wheat from 2000 to 2015, using color-coded lines and circles for each grain. The visualization loads data from a CSV file and renders it with SVG using d3.v7, applying d3.line for the paths, d3.axisBottom for the x-axis, and d3.legend for a color legend. Hovering over a circle highlights it in orange and displays a tooltip with the year, CPI value, and grain type. The chart includes labeled axes and a title.

[A9] World Birth Rate (World Choropleth Map)

[A9] Cost Index per State (Proportional Symbols)

[A9] US Population 2020(Choropleth Map)

[A8] High Tech Firm Matrix (Adjacency Matrix)

This visualization displays an adjacency matrix of high-tech firm connections, using a CSV dataset with source and target nodes. The square grid uses steelblue cells to indicate existing links and white cells for absence, with hover tooltips revealing specific node pairs. The code builds the matrix from flat data, assigns each row and column to a firm, and labels both axes. It renders with D3 v7 SVG elements, using `data.flatMap` and `Array.from` to extract unique nodes and constructing the binary matrix before drawing cells at a fixed 35-pixel size.

[A8] High Tech Firm Network (Force-Directed Node-Link Diagram)

This force-directed node-link diagram visualizes the high-tech firm network from a CSV dataset, showing connections weighted by link strength. It uses D3 v7’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while SVG lines and circles render the graph. Interactive tooltips appear on hover via D3 event handlers, and the animation updates positions on each tick event.

[A7] (Small Multiples of Lines Chart with a Color Legend)

This example uses small multiples to display the Consumer Price Index (CPI) of four grains—Corn, Rice, Rye, and Wheat—from 2000 to 2015, with each grain in its own line chart. A color legend identifies each grain’s stroke color. The code loads CSV data via `d3.csv`, renders SVG line charts using `d3.line` and `d3.axisBottom`, and builds the legend with `d3.legendColor` from the d3-legend library.

[A7] (Heat Map for Time Series Data with a Color Legend)

This visualization displays a heat map of the Consumer Price Index for various grains (Corn, Rice, Rye, Wheat) from 2000 to 2015, using a sequential color scale from light to dark yellow-orange to represent CPI values. The example renders time series data as a grid of colored rectangles, with each column representing a year and each row a grain type, alongside a color legend and axes. It uses D3 v7 and the d3-legend library, implementing scales such as `d3.scaleLinear` for the year axis and `d3.scaleSequential` with `d3.interpolateYlOrBr` for coloring. Tooltips appear on mouseover to reveal the exact year, grain, and CPI value, while the data is loaded from a CSV file.

[A6] Vehicle Power vs. MPG (Scatter Plot With Qualitative Color Scale)

This scatter plot compares vehicle torque and horsepower, with each point’s size encoding MPG. The chart uses a qualitative color scale to distinguish car makes—Audi in blue, Chevrolet in red, and Volvo in green—via `d3.scaleOrdinal` and a `d3.legendColor` legend. Data from a CSV file is loaded with `d3.csv`, parsed, and mapped to linear scales for the x- and y-axes, while circle radii are scaled by MPG using `d3.scaleLinear`. The SVG rendering is handled by D3 v7, with axes, labels, and a triangular-symbol legend drawn programmatically.

[A6] Min Temp Readings from Alabama Weather Stations on 01/03/2016 (Bar Chart with a Sequential Color Scale)

This example visualizes minimum temperature readings from Alabama weather stations on January 3, 2016, using a bar chart with a sequential color scale. Each bar’s height and fill color encode the recorded minimum temperature, ranging from light blue for cooler readings to dark blue for warmer ones. The chart includes axes for weather station location and temperature in degrees Fahrenheit, along with a horizontal legend showing the color gradient. The code uses D3 v7 to load CSV data via `d3.csv`, apply `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateBlues` for color mapping, while the legend is rendered with the `d3.legendColor` helper from the d3-legend plugin.

[A6] Jan 2016 Average Temperature Readings in Alaska Cities (Diverging Bar Chart with Diverging Color Scale)

This diverging bar chart displays average January 2016 temperatures across Alaska cities, with each bar extending left or right from a central zero line based on temperature. The visualization uses a red-blue diverging color scale to emphasize cold versus warm readings. The code employs D3 v7’s `scaleLinear`, `scaleBand`, and `scaleSequential` with the `d3.interpolateRdBu` interpolator, while rendering bars as SVG rectangles. Data is loaded from a CSV via `d3.csv`, and the legend is generated using the d3-legend library’s `legendColor` function.

[A5] Beef CPI from 2000 - 2015 (Line Chart)

This line chart visualizes beef Consumer Price Index (CPI) values from 2000 to 2015, sourced from a CSV file. The chart displays data points as gray circles connected by a line, with hover interactions that change a point's color to orange and display a tooltip showing the specific year and CPI value. Built with React and D3.v7, the visualization uses d3.scaleLinear for axis scaling, d3.axisBottom and d3.axisLeft for axes, and d3.line for the connecting line, all rendered as SVG elements in a full-window canvas.

[A5] Vehicle Power vs. MPG (Bubble Chart)

This bubble chart visualizes the relationship between vehicle torque (x-axis), horsepower (y-axis), and fuel efficiency (bubble size) for Audi, Chevrolet, and Volvo cars, with color encoding by make. Hovering over a bubble highlights it in orange and displays a tooltip with exact values. The visualization uses D3 v7’s `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG circles, with data loaded from a CSV file and rendered in a React-compatible HTML page.

[A4] Daily Average Temp Readings from Alabama in January (Histogram)

This example shows a histogram of daily average temperature readings from Alabama in January, with temperature on the x-axis and the count of readings per bin on the y-axis. The visualization uses D3 v7’s `d3.csv` to load data from a GitHub Gist, `d3.histogram()` to bin the temperature values, and `d3.scaleLinear` along with `d3.axisBottom` and `d3.axisLeft` to render the SVG axes. Gray bars fill each bin, and hovering over a bar turns it orange while displaying the count as a text tooltip.

[A4] MPG vs. Horsepower (Scatter Plot)

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of vehicles, with each gray circle representing a data point. Hovering over a point highlights it in orange and displays a tooltip showing its exact MPG and horsepower values. The visualization uses D3.js v7’s scaleLinear and axisBottom/axisLeft to map the data and render axes, while the SVG circles respond to mouseover and mouseout events. Data is loaded asynchronously via d3.csv from a remote GitHub gist.

[A4] MaxTemp Readings from January 2016 in Alabama (Box Plot)

This visualization displays a box plot of maximum temperature readings from January 2016 in Alabama, drawn as an SVG using D3.js v7. The plot includes a gray box spanning the interquartile range with lines for the minimum, median, and maximum values, all positioned along a linear temperature axis. The code loads CSV data via `d3.csv`, computes quartiles with `d3.quantile`, and renders the chart using `d3.scaleLinear` and `d3.axisBottom`. Hovering over the box highlights it in orange and displays a tooltip with the five-number summary.

[A4] CPI of Meats in 2015 (Bar Chart)

This example displays the Consumer Price Index (CPI) of various meats in 2015, using the base year 1990, as horizontal bars. It loads CSV data via `d3.csv` and maps each meat type to a band scale (`d3.scaleBand`) while the CPI values determine bar widths through a linear scale (`d3.scaleLinear`). Bars are rendered as SVG rectangles, with mouseover events that temporarily change the fill color and append a text tooltip showing the exact CPI value, which is removed on mouseout. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`. The visualization uses a fixed margin layout and SVG rendering.

[A3] January MinTemps in Alaska and California (Stripplot)

This visualization uses a stripplot to compare January minimum temperatures in Alaska and California. The p5.js sketch loads a CSV file and separates temperature readings by state, plotting each data point as a small blue ellipse. The dots for each state are jittered randomly within a narrow horizontal band, while their vertical positions map to temperature values on a custom-drawn axis. The rendering includes manually drawn axes, state labels, and a rotated y-axis title, with the data sourced from a GitHub-hosted CSV file.

[A3] MaxTemp Readings from January 2016 in Alabama (Box Plot)

This visualization displays a box plot of maximum temperature readings from January 2016 in Alabama, drawn on a p5.js canvas. The plot shows the distribution of temperatures with a box spanning the interquartile range, whiskers extending to the minimum and maximum values, and a median line. The data is loaded from a remote CSV file using p5.js’s `loadTable` function. The sketch calculates quartiles using a custom linear interpolation method and maps the values to screen coordinates to render the box, whiskers, axis marks, and labels.

[A3] Day-to-Day Average Temp Readings from Alabama in January (Histogram)

This histogram visualizes day-to-day average temperature readings from Alabama in January, showing the frequency of temperatures binned into five-degree ranges from 10–15°F up to 46–50°F. The chart displays eight bars, with bar height representing the count of days in each temperature bin. The visualization loads CSV data via p5.js’s `loadTable` function and renders the plot using p5.js canvas drawing methods, including custom axes, grid lines, and labeled tick marks. The code manually sorts temperature values into bins using conditional logic and draws each bar with `rect`, while labels and a rotated y-axis title are positioned with `text` and `rotate`.

A2 - Temps (Heatmap)

This heatmap visualizes average monthly temperatures for seven U.S. states in 2016, using a yellow-to-orange color scale where warmer temperatures appear brighter. The p5.js sketch loads CSV data via `loadTable`, processes it in `preload()` and `setup()`, and renders colored squares for each state–month combination on a Canvas. A legend explains the color range, and axis labels identify states and months. The code uses p5.js drawing functions like `fill()` and `square()` to construct the grid.

[A2] Revenue by Class (Bar Chart)

This bar chart visualizes the total revenue collected from first, second, and third class passengers on the Titanic, revealing that second class generated the least income. The chart is rendered using p5.js, with data loaded from a CSV file via `loadTable`. The `setup()` function creates a full-window canvas, and `draw()` computes cumulative fares per class from the `Pclass` and `Fare` columns, then draws horizontal bars scaled to revenue values along labeled axes. Axis tick marks increment by thousands to indicate revenue amounts.

A2 - Passengers per Class (Dot Plot)

This dot plot visualizes the number of Titanic passengers per class using p5.js, with CSV data loaded via the `loadTable` function from a GitHub gist. The sketch counts passenger records by class and renders three circles with labels, revealing an inverse relationship between class affluence and passenger count. A light blue background, axis lines, and annotations highlight the trend. The visualization displays passenger counts (Class 1: 216, Class 2: 184, Class 3: 491) on a canvas sized to the window, with axes labeled from 0 to 300 in increments of 100.

A2 - Revenue by Class [Bar Chart]

This bar chart displays the total revenue collected from each passenger class on the Titanic, using a simple p5.js sketch. It draws three horizontal bars that show the sum of all fares paid by first, second, and third class passengers, with each bar labeled and accompanied by its total fare value. The visualization highlights the surprising finding that second class generated the least revenue. The data is loaded from a remote CSV file using p5.js’s `loadTable` and rendered on a canvas with basic shapes.

A2 - Revenue by Class [Bar Chart]

This bar chart visualizes revenue by class, displaying distinct categorical values as vertical bars. The P5.js sketch renders the visualization dynamically, using the canvas size derived from the container’s client dimensions. The chart employs P5’s `createCanvas`, `background`, and `fill` functions to draw the bars, with the data drawn from the `ctan13dons` source. The sketch runs continuously, updating via P5’s `setup` and `draw` loop, while hot reloading allows for live edits to the underlying numbers.

Revenue by Passenger Class

This visualization shows the total revenue collected from each passenger class on the Titanic, aggregated from a CSV dataset loaded via `loadTable`. The p5.js `draw()` function iterates through every row, summing the `Fare` values per `Pclass` and mapping the totals to horizontally scaled rectangles. Revenue amounts are labeled at the end of each bar, with an x-axis manually marked in increments of 1000 from 0 to 5000. The chart uses the Canvas API through p5.js's `rect` and `text` functions, and the axis lines are drawn with p5.js’s `line` method.

Revenue by Pclass

This example visualizes the distribution of Titanic passenger fares by passenger class (Pclass) using vertical bars rendered with p5.js. Each row in the dataset corresponds to a passenger, and the width of each bar represents the fare paid. The data is loaded from a Google Sheets CSV file via `loadTable`, and the visualization uses `createCanvas`, `rect`, and `noLoop` to draw the static chart. The sketch is set up for VizHub’s hot reloading environment.