Skip to main content
SimilarExport ZIP
100%

Fork of Dropdown menu cleaned AE

✓ Published1🌍 Public
AAlena Egorova
Last edited Apr 7, 2023
Created on Apr 3, 2023

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

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…

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

Dropdown menu AE

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.

AAlena Egorova
90% match
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
89% 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
88% 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
77% 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
77% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, featuring dropdown menus to select which measured attribute appears on the x- and y-axes. The visualization updates the axes and data points in response to user selections, with tooltips showing the x-value for each circle. Built with React and D3 v5, the code uses `scaleLinear` for axes, `csv` for data loading, and `ReactDropdown` for the menu controls. The SVG rendering separates axis and mark components, employing D3’s `extent` and `max` for domain calculations.

HHenry-Bayly
76% match
Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This fork of the animated scatter plot uses dropdown menus to let users choose which Iris dataset columns map to the x and y axes. The chart displays points with a grow-in animation on entry and repositions them with a staggered transition when the axis selection changes. Axes update smoothly using D3 transitions. Data is loaded from a GitHub Gist as CSV, and the visualization is built with D3 v6 using reusable chart and menu components.

AAlex
74% match