VizColor - AE — VizHub

Experiment AE

This interactive scatterplot explores eye-tracking data from a WPI MAPLE Lab study, showing how problem order relates to metrics like average fixation duration, response time, or no-fixation percentage. Users select the y-axis variable via a menu, and each point is colored by correctness. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and displays a red trend line computed via linear regression. Hovering over the d3 color legend highlights correct or incorrect data points. Data is loaded from a CSV and parsed with d3.csvParse.

82% match

Scatter Plot Simple - AE

A scatter plot displays the relationship between problem order and average duration of fixations for participants in a WPI MAPLE Lab eye-tracking study. Each circle represents a single math problem solved by one participant, with the x-axis showing the problem's order in the experiment and the y-axis the average fixation duration in milliseconds. The visualization uses d3.scaleLinear and d3.extent to map data values to screen coordinates, with circles rendered via selection joins. Data is loaded from a CSV file using d3.csvParse.

80% match

Many plots. Part 3

This visualization presents a small-multiple grid of scatter plots, with each plot showing data from one participant who solved math problems while their eye movements were tracked. The x-axis consistently represents problem order, while the y-axis can be toggled via a menu to display either average fixation duration, no-fixation percentage, or response time. A second menu sorts the individual participant plots by their average response time or percentage of correct answers. Overlaid red trend lines reveal whether the chosen y-axis measure changes over the course of the experiment. The plots are colored by correctness, and a legend allows filtering points to view only correct or incorrect responses. The visualization is built with D3 v7, using its selection API and scale functions, and renders participant-specific trend lines calculated from the data.

79% match

Interactive Menu in Scatter Plot

This scatter plot visualizes eye-tracking data from a study of 86 undergraduate students solving math problems. The x-axis shows the order of problems in the experiment, while the y-axis displays the average duration of fixations in milliseconds. Each point is colored according to whether the participant's response was correct or not, with a color legend that users can hover over to highlight points of a specific outcome. The visualization is rendered as an SVG using D3 v7, with axes and tick marks generated via D3's `scaleLinear` and `axisLeft`/`axisBottom` functions. Data is loaded asynchronously from a GitHub gist containing the CSV dataset.

Curve AE

This visualization shows a line chart tracking how average fixation duration changes over the course of an eye-tracking experiment with 86 undergraduate students solving math problems. The chart plots response time against experimental order, with data from the WPI MAPLE Lab study, showing whether fixation patterns vary across participants over time. The code uses D3 v7’s `scaleTime`, `scaleLinear`, and line generator, loading data from a CSV file via `csvParse` and rendering axes with reusable `axisLeft` and `axisBottom` functions from the `d3` module.

Many plots. Part 1

The visualization is a small-multiple grid of scatter plots, one per participant, showing eye-tracking metrics across 24 math problems. Each plot displays the problem order on the x-axis and a selectable y-axis metric (average fixation duration, no-fixation percentage, or response time), with points colored by correctness. A red trend line shows the linear relationship, and a color legend filters points by hovering. The interface uses a dropdown menu to change the y-axis metric. Data comes from a WPI MAPLE Lab eye-tracking study with 86 students, parsed from CSV and rendered using the d3 library (v7), with helper modules for axes, color legend, and scatter plot rendering.

Dropdown menu AE

This interactive scatter plot shows how students’ average fixation durations change over the order of problems in an eye-tracking study, with points colored by correctness. A dropdown menu allows switching the y-axis among fixation duration, fixation percentage, and response time. The visualization uses d3.csvParse to load the dataset, d3.scaleLinear for axes, and d3.scaleOrdinal with schemeCategory10 for color encoding. A red trend line computed via least squares regression highlights overall patterns, while d3.axisBottom and d3.axisLeft render the axes.

Scatter Plot with mean trend

This scatter plot displays the relationship between problem order and average fixation duration for 86 undergraduate students, with each point colored by whether the response was correct. A red trend line, calculated via linear regression using cumulative sums, shows the overall direction of the data. The visualization uses d3.v7 with SVG rendering, employing `selectAll` joins for marks and axes, `scaleOrdinal` with `schemeCategory10` for coloring, and `extent` for domain scaling. Data originates from a WPI MAPLE Lab eye-tracking study from 2021-2022.