ShayRomayo

Assignment 5

This interactive multi-line chart displays daily average temperatures for New York, San Francisco, and Austin from October 2011 to April 2012, with each city represented by a colored line that users can click to toggle visibility or hover to highlight. The visualization uses d3.tsv to load the data, d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis, and d3.zoom for panning and scaling the time axis. City labels are clickable, and hovering dims other lines while moving the selected line to the front.

Apr 14, 2018

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin across one year, with each city represented by a colored line and labeled at its final data point. The visualization is rendered as an SVG using D3 v4, loading data from a TSV file via `d3.tsv` and parsing dates with `d3.timeParse`. It encodes the time axis with `d3.scaleTime`, the temperature axis with `d3.scaleLinear`, and city colors with `d3.scaleOrdinal` using `d3.schemeCategory10`. Lines are drawn with `d3.line` using basis curve interpolation, while axes are generated through `d3.axisBottom` and `d3.axisLeft`.

Apr 14, 2018

Line Graph (d3)

This line graph shows the number of delayed flights for Atlanta’s Hartsfield-Jackson International Airport across each month of 2004, with the x-axis representing time and the y-axis representing delay counts. The visualization uses D3 v4 to parse the CSV data, filter it by year and airport code, and render an SVG path via the `d3.line` generator. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the chart includes a title indicating the airport and year.

Trivariate Scatterplot (d3)

This example visualizes airline performance data for October 2003, plotting the total number of flights against the number of on-time flights for major U.S. airports. Each circle represents an airport, with its size encoding the count of delayed flights, and airport codes label each point. The visualization uses d3.csv to load the data, d3.scaleLinear for positioning and sizing, and d3.axisBottom and d3.axisLeft to render the axes. A legend in the right margin shows the mapping between circle radius and delay count, while the filtered dataset focuses on a single month from the airlines.csv file.

Trellis Plot (d3)

This visualization displays the number of delayed flights in 2004 for three airports (ATL, BOS, LAX), broken down by month. It is a trellis plot constructed with d3.v4, using an SVG rendering. The code loads data from a CSV file, filters it by the specified airports and year, and uses `d3.scaleBand` and `d3.scaleLinear` to position bars. Twelve separate x-axes are drawn, one per month, with a shared y-axis, showing monthly delay counts for each airport.

Bivariate Scatterplot (d3)

This scatterplot displays the relationship between total flights and delayed flights for a single month, with each circle representing an airport and labeled by its code. The visualization uses D3 v4 to load CSV data, filter for October 2003, and render SVG circles positioned via d3.scaleLinear. The x-axis maps total flights while the y-axis maps delayed flights, and text labels are placed above each point. Axes are generated with d3.axisBottom and d3.axisLeft, with custom titles and a chart heading.

Bar Graph (d3)

This bar graph displays the number of delayed flights for various U.S. airports in July 2003, sourced from an airlines CSV file. It uses d3.v4 with an SVG rendering approach, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. The data is filtered by the label “2003/07” before being plotted as steel-blue rectangles.

Node-Link Graph

A force-directed node-link graph visualizes a network of 200 nodes and over 400 undirected edges derived from a CSV file. The p5.js sketch implements a custom layout simulation, iteratively calculating repulsive forces between all node pairs and attractive forces along edges to position vertices. Nodes are rendered as purple ellipses, edges as black lines, and hovering over a node highlights its adjacent edges in cyan while displaying the node ID. The code uses p5.js functions like `loadTable`, `dist`, and `ellipse` to handle data loading, interaction, and drawing.

Mar 3, 2018

Matrix Graph

This matrix graph visualizes a network of 200 nodes and over 500 edges as a symmetric adjacency matrix. Each row and column represents a node, and a colored square marks the presence of an edge, with the plot mirrored along the diagonal to show both directions of each connection. The visualization is built with the p5.js library, loading edge data from a CSV file and sorting unique node IDs to calculate grid positions. Hovering over a square highlights it and reveals the corresponding node labels along the axes, and the code also draws the transpose position for each edge.

Mar 3, 2018

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.

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

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.

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.

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.