Skip to main content
SimilarExport ZIP
100%

Scatter Plot (Bivariate)

✓ Published0🌍 Public
SShayRomayo
Last edited Feb 17, 2018
Created on Feb 17, 2018

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`.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

SShayRomayo
89% match
Loading thumbnail…

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.

SShayRomayo
84% match
Loading thumbnail…

Bar Graph

This bar graph displays the number of graduates in each major category for a selected year, with bars colored teal and axes labeled from the dataset’s header row. Built with p5.js, it loads a CSV file (`graduates.csv`) via `loadTable`, maps numeric values to pixel heights using `map`, and draws the chart in a 3000×1000 canvas. Mouse hover reveals the exact count for each major, while a loop dynamically extends the x-axis across all rows.

SShayRomayo
77% match
Loading thumbnail…

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.

SShayRomayo
74% match
Loading thumbnail…

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
72% match
Loading thumbnail…

Fork of Fork of Activity6_Task3

This scatter plot shows the relationship between the percentage of Asian, Black, and White residents with bachelor's degrees across U.S. states. Each circle represents a state, positioned by its Asian and Black bachelor's degree percentages, while its color indicates the White bachelor's degree percentage. The visualization uses D3.js v7 to create an SVG chart with linear axes and a sequential Viridis color scale, rendered via `d3.scaleLinear`, `d3.scaleSequential`, and `d3.axisBottom`/`d3.axisLeft`. A legend is included to map the color scale to White bachelor's degree percentages. The data is embedded directly in the JavaScript source.

Ssahithitoomu@gmail.com
72% match
Loading thumbnail…

Data Visualization Assignment 3

This interactive scatterplot explores relationships between attributes of college majors, such as total graduates, gender distribution, employment numbers, and median salary. Users select the X and Y axes from dropdown menus or swap them, and hovering over the categorical color legend highlights a specific major category. Built with React and D3 v6, the visualization renders SVG circles positioned by linear scales, with a color legend encoding major categories. Data is loaded from a FiveThirtyEight CSV, which is processed with D3's `csv` function.

HHowardHan99
71% match
Loading thumbnail…

Fork of Assignment 5 Bubble Plot D3

This animated scatter plot visualizes student enrollment trends across different degree types—bachelor's, master's, PhD, and jobs—tracking the number of students going abroad over time. The visualization cycles through each category every two seconds, updating both the data and the symbol shape (circle or square) to represent the current category. Built with D3 v3, the reusable `scatterPlot` function manages scales, axes, and transitions, while the main script loads CSV data from a GitHub gist and drives the animation loop using `setTimeout`.

Ssagamreddy929@gmail.com
71% match