Bar Graph

Line Graph

This line graph shows the number of Asian graduates for a selected major, plotted across years, with the major and data column configurable in the code. The visualization uses the p5.js library, loading data from a CSV file, and employs `map()` to scale values between the computed min and max labels for the y-axis, while rendering lines and text labels. It dynamically calculates axis intervals and displays the count on hover for each data point.

82% match

Trellis Plot Visualization

This trellis plot displays the number of graduates in various majors, broken down by employment-related categories such as total, employed, and unemployed counts. The visualization uses p5.js to read a CSV file and render horizontal bars for each quantitative column, with each major assigned its own section. The code filters the data by a specific year and selected major names, then maps the maximum value to a consistent scale. The current output shows six majors, including Chemistry, Psychology, and Economics, with each bar's length representing the count for that category.

81% match

Scatter Plot (Bivariate)

This interactive scatter plot compares the number of Asian graduates against White graduates for a selected major, using data from a CSV file. The p5.js sketch maps quantitative values to x and y axes, scales the axes dynamically, and draws points as semi-transparent ellipses. Hovering over a point displays its exact x and y values. The chart is generated using p5.js functions such as `createCanvas`, `loadTable`, `map`, `ellipse`, and `text`.

77% match

Scatter Plot (Trivariate)

This scatter plot visualizes the relationship between the number of Asian graduates (y-axis) and White graduates (x-axis) for Chemistry majors, with circle size encoding the number of minority graduates across different years. Built with p5.js, the sketch loads data from a CSV file and maps three quantitative columns to horizontal position, vertical position, and circle diameter, while allowing the user to change the major by editing a variable. The axes are labeled with column headers from the data file, and a legend shows the range of the size-encoded variable, with hovering over a circle displaying its exact values.

74% match

Bar Graph-A2

This bar graph visualizes Broadway attendance aggregated by year, using data loaded from a remote CSV file. It uses the p5.js library’s `loadTable()` function in `preload()`, then aggregates the `Statistics.Attendance` values per `Date.Year` in `setup()`. In `draw()`, it renders a Cartesian coordinate system with labeled axes, gridlines, and blue bars whose heights are mapped from the maximum attendance value, using p5.js’ `map()` and `rect()` functions.

Jjrcuster@dons.usfca.edu

Histogram

This example displays a histogram of median salaries for recent graduates, using a dark background with light blue bars to visualize frequency distribution across 20 salary bins. The p5.js sketch loads CSV data from a GitHub gist, processes the salary column, and generates the chart on an HTML canvas. It includes labeled axes, gridlines for frequency, and animated rendering through setup and draw functions. The code uses p5.js’s loadTable, map, and rect APIs, with custom binning logic to exclude zero values.

RRiya Mathur

Assignment 4: Bar Chart

This example shows the number of women in five selected STEM majors in a bar chart, with the count of females on the y-axis and the major names on the x-axis. The data is loaded from a CSV file derived from the Corgis graduates dataset. The chart is rendered as an SVG using D3 v7, with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to draw the axes.

Aamrubal

prototype scatterplot

This prototype scatterplot visualizes the correlation between total graduates and median salary for 173 graduate programs, with points colored by major category using d3.scaleOrdinal. The code loads CSV data via d3.csv, applies d3.scaleLinear for both axes, and renders SVG circles with axis labels and gridlines via d3.axisLeft and d3.axisBottom. A legend enables interactive filtering by category through click events that adjust circle opacity. Data originates from FiveThirtyEight’s college majors dataset, and the chart uses d3.v5 with an SVG rendering approach.

YYF