A

Alena Egorova

@alvegorova·23 public vizzes

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.

Loading thumbnail…

Many plots. Part 2

This gallery example presents a small-multiple scatter plot matrix exploring eye-tracking data from a WPI MAPLE Lab study of 86 students solving math problems. Each scatter plot shows a different participant’s data, plotting problem order on the x-axis against a selected metric (average fixation duration, no-fixation percentage, or response time) on the y-axis, with points colored by correctness. A dropdown menu switches the y-axis variable, while a legend filters points by hover. The visualization displays the raw data with linear trend lines, built using d3.v7’s scaleLinear and scaleOrdinal APIs, and fetches the dataset from a gist.

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.

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

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.

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.

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.

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.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the basic setup for a D3 version 7 project within a React framework, replacing the page content with the text “Hello D3 version 7” using the `select` function from D3. The `index.html` file loads D3 from a CDN and also includes the `react-d3-scatterplot-matrix` library, though the main script imports only the `select` API. The code currently renders no visualization, focusing instead on establishing a minimal starter template with a large, centered text display, as defined by the CSS styling in the HTML file.

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.

Loading thumbnail…

Tree example

This tree diagram visualizes the distribution of correct and incorrect responses across math problem conditions from an eye-tracking study by the WPI MAPPLE lab. The hierarchical layout shows branches for problems with and without brackets, further split by bracket position and response type. Built with D3 v7, it uses `d3.hierarchy` to process JSON data and `d3.tree` to compute node positions. Circles represent nodes, connected by blue lines, all rendered within an SVG canvas sized to the window.

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.

Loading thumbnail…

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.

Loading thumbnail…

VizColor - AE

This visualization shows how average fixation duration changes across problem order for 86 participants in a math problem-solving eye-tracking study, with correct and incorrect responses distinguished by color. A scatter plot displays each problem trial, plotting problem order on the x-axis against average fixation duration on the y-axis, using D3 v7’s scaleLinear, scaleOrdinal, and schemeCategory10 APIs. The data is loaded from a CSV file using d3.csvParse. The chart includes axes and a color legend rendered through custom helper functions, revealing potential trends in attention over time and differences between correct and incorrect answers.

Loading thumbnail…

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.

Loading thumbnail…

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.

Loading thumbnail…

Marks and Channels AE

The visualization displays eye-tracking data from 86 undergraduate students solving math problems, focusing on average fixation duration and response patterns. It shows a simple bar chart where each rectangle’s height represents a data value, with white lines marking the minimum threshold. The example uses d3-selection and d3’s join pattern to render twelve small multiples of the same chart, each built with a reusable `length` function that draws rect and line elements. The fixed dataset contains five pairs of numbers, and the charts are laid out as separate SVG elements with a cadetblue background.

Loading thumbnail…

MathPerception - map

This map visualizes eye-tracking data from a WPI MAPLE Lab study of 86 undergraduates solving math problems. It displays participant ID, problem order, correctness, and average fixation duration per digit, revealing how attention patterns vary across individuals and tasks. The visualization uses d3.csvParse to load the dataset and renders the raw state data as JSON within a pre element. D3 v7 select and join methods manage the display, updating whenever new data is fetched and processed.

Loading thumbnail…

Fork of Transforming Data

This example illustrates data transformation techniques on the classic Iris dataset, showing how to summarize raw CSV data into aggregated statistics. The visualization computes the average sepal length for each iris species using d3.flatRollup and d3.sum, then renders the resulting summary as a JSON object in a preformatted text block. The code demonstrates the use of d3.csvParse for data loading and d3.select for DOM manipulation.

Loading thumbnail…

Math perception

This visualization explores eye-tracking data from 86 undergraduates solving math problems, showing how response time, fixation duration, and the percentage of digits skipped relate to problem correctness and the presence of brackets. The view is built with D3 v7, parsing the CSV with `csvParse` and rendering the raw JSON data into the page. The interface initially loads the dataset asynchronously, and the display updates state to reflect the parsed records, allowing inspection of the structured data fields.

Loading thumbnail…

Wordbank

This visualization explores vocabulary development in children, plotting both comprehension (words understood) and production (words spoken) across ages for 84,138 children from 38 countries. The data, sourced from the Wordbank Stanford study, is loaded via `csvParse` and rendered as a JSON object. The interactive view shows how the gap between these two measures changes over time and varies by language and sex, using D3 v7 for data binding and DOM manipulation.

Loading thumbnail…

MathEnvironment

This visualization explores relationships between parental background, family size, and children's math outcomes. It plots data from 339 parents surveyed about their attitudes toward children’s math education, showing associations such as parental high school GPA against children’s comparative math scores, with points colored by family size to reveal moderation effects. The implementation uses D3.js (v7) for data parsing and the `select` API to manage a live state, fetching the CSV dataset via `fetch()` and rendering the structured JSON data as a textual preview. The visualization currently displays a raw dump of the parsed survey data.

Loading thumbnail…

Fork of Mouse Follower Simple - Alvegorova

A white circle follows the mouse cursor across a solid blue-gray background. The example uses D3 v7 to select the `#app` container, append an SVG canvas sized to the browser window, and create a single circle element. A `mousemove` event listener updates the circle’s `cx` and `cy` attributes with the event coordinates, providing direct, real-time feedback. The visualization is rendered entirely through SVG, with styling applied via an external CSS file.