Skip to main content
SimilarExport ZIP
100%

Dropdown menu cleaned AE

✓ Published2🌍 Public
AAlena Egorova
Last edited Apr 6, 2023
Created on Mar 29, 2023
Forked from Dropdown menu 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.

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
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
89% 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
88% 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
81% 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
75% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let users choose which columns of the auto-mpg dataset appear on the x- and y-axes. The code employs d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with a custom dropdownMenu component that updates the chart on selection changes. Circles transition with a staggered delay of 2 seconds each time the axes change, rendered as SVG elements with a red, semi-transparent fill.

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

Scatter plot with menus

This example presents a scatter plot of automobile data, where users actively select which numerical columns to display on the x- and y-axes via two interactive dropdown menus. The visualization updates dynamically, smoothly animating the repositioning of data points over a 1.5-second transition with a staggered delay, making comparisons between different attribute pairings intuitive. The implementation leverages D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the chart, and it uses custom `dropdownMenu` and `scatterPlot` modules to manage the SVG interface. Data is loaded from a remote CSV file using `d3.csv`.

PPeter S
73% match