Skip to main content
SimilarExport ZIP
100%

Dropdown menu AE

✓ Published1🌍 Public
AAlena Egorova
Last edited Mar 29, 2023
Created on Mar 20, 2023

This interactive scatterplot lets users explore eye-tracking data from a study of 86 undergraduates solving math problems. A dropdown menu, built with D3.js, dynamically switches the y-axis between average fixation duration, no fixation percentage, and response time. Each point represents a problem, colored by correctness, with a regression line revealing trends over problem order. The visualization highlights associations between response time, fixation patterns, and performance. Data is fetched from a remote CSV and rendered using D3's scaleLinear, scaleOrdinal, and axes utilities.

AI-generated description

This is a dataset from WPI MAPLE Lab study conducted in 2021-2022. 86 undergraduate students solved math problems in the lab and their eye-movements during the solving process were collected with eye-tracking software. Each participant solved 24 problems: 12 with and 12 without brackets.

Data dictionary:

  • Participant_ID' - Anonymized participant ID. Categorical.
  • 'Problem_ID' - Problem title. Categorical.
  • 'Order' - The order of the problem in the experiment. Ordinal.
  • 'Brackets' - If equation contains brackets. Categorical.
  • 'Response_time' - How long did it take fot participant to response. Quantitative.
  • 'Correct_or_not' - If participant’s response was correct ot not. Categorical.
  • 'Average_duration_of_fixations' - How long participant fixated on each digit (on average). Quantitative.
  • 'No_fixation_percentage' - On how many digits participant did not fixate? Quantitative.

The following information could be visualized:

  1. Did average fixation duration change over the time of the experiment? Did it change differently in different participants?
  2. Was response time associated with correctness? Did this association change over the time of the experiment?
  3. Did people tent to answer longer in problems with brackets and did this association change over the time of the experiment?
  4. Was tendency to use peripheral vision associated with response corectness? Did this association change over the time of the experiment?
MIT Licensed

Similar vizzes

Loading thumbnail…

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.

AAlena Egorova
96% match
Loading thumbnail…

Fork of Dropdown menu cleaned AE

The visualization plots eye-tracking data from a study of 86 undergraduates solving math problems, showing how response metrics change over problem order. A dropdown menu selects which quantitative variable (average fixation duration, no-fixation percentage, or response time) appears on the y-axis, with points colored by correctness and a red trend line. The scatter plot uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color, and a hovering color legend that highlights correct or incorrect responses. Data is loaded as CSV via `d3.csvParse`.

AAlena Egorova
90% match
Loading thumbnail…

Dropdown menu cleaned AE

A dropdown menu lets viewers choose among average fixation duration, no-fixation percentage, or response time for the y-axis of a scatter plot. The chart plots each problem attempt by its order, coloring points by correctness and overlaying a red trend line. Hovering the legend dims points of the opposite category. Built with D3 v7, it uses `csvParse` for data loading, `scaleLinear` and `scaleOrdinal` for scales, custom axes, and a simple linear regression calculation for the trend.

AAlena Egorova
89% match
Loading thumbnail…

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.

AAlena Egorova
87% match
Loading thumbnail…

Fork of Fork of Dropdown menu cleaned AE

This visualization displays eye-tracking data from a WPI MAPLE Lab study, showing how fixation duration, response time, and peripheral vision use change across problem-solving sessions. Users can select different y-axis metrics from a dropdown menu, while the scatter plots show participant responses colored by correctness with trend lines. The view filters between two participants using hardcoded values, and hovering over the legend highlights correct versus incorrect responses. The code uses d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, and d3.axisBottom, with data loaded via d3.csvParse from a remote CSV file.

AAlena Egorova
86% match
Loading thumbnail…

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.

AAlena Egorova
84% match
Loading thumbnail…

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.

AAlena Egorova
78% match
Loading thumbnail…

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.

AAlena Egorova
78% match