PatricijaC

Scan Path

The scan path visualization plots eye-tracking fixations from a CSV file, with each circle sized by fixation duration and colored by participant, while connecting lines trace the viewing sequence per user over a metro map background. The SVG rendering uses d3.scaleLinear for coordinates, d3.scaleOrdinal with schemeCategory10 for colors, and d3.nest to group data by user. Interactive tooltips display exact duration and participant details on hover.

Density plot

A density plot visualizes the spatial distribution of eye-tracking fixation points from the Old Faithful Dataset, overlaid on a background map of Antwerp. The code uses d3-contour's `contourDensity` to compute density contours and `d3.geoPath` to render them as SVG paths, with a sequential color scale from d3-scale-chromatic mapping contour values. The plot is interactive, as moving the mouse triggers re-rendering with a varying bandwidth. Data is loaded via `d3.csv` from the `data.csv` file.

Density plot

This visualization displays eye-tracking fixation data from the Old Faithful Dataset as a density contour map overlaid on a map background. It uses d3.contourDensity to compute and render smooth density regions from the MappedFixationPointX and MappedFixationPointY coordinates, with color mapping via d3.scaleSequential and d3.interpolatePiYG. The visualization is built with D3 v4 and rendered as SVG paths using d3.geoPath. Mouse movement dynamically adjusts the bandwidth parameter, allowing users to explore how contour smoothness affects the density representation.

ScanPath2

This visualization displays eye-tracking scan paths overlaid on a metro map of Antwerp, with circles representing fixation points sized by fixation duration and colored by user. Lines connect consecutive fixations per participant, revealing individual viewing patterns. The code uses D3 v4 with d3-contour, d3-scale-chromatic, and SVG rendering, loading data from a CSV of timestamped gaze coordinates. Hover interactions reveal fixation duration and user information via tooltips.

Density plot

Scatter

This scatterplot visualizes eye-tracking fixation data from two Antwerp map images, with each rectangle positioned by mapped fixation coordinates and scaled by fixation duration. The red squares overlay a static map background image loaded via CSS, allowing comparison of attention patterns across the color and gray stimulus conditions. The visualization uses D3 v5’s `scaleLinear`, `extent`, and `csv` methods to load and transform the data, rendering SVG rectangles with size and opacity tied to `FixationDuration`.

Old Faithful Contour Plot

This contour plot visualizes the density distribution of data points using a white-to-teal gradient, with darker regions indicating higher point concentrations. It reads data from a CSV file and displays it as smooth, layered density contours over a coordinate grid. The visualization uses d3.contourDensity to compute density values, d3.geoPath to render the contour shapes, and d3.scaleLinear for the color mapping. The axes are generated with d3.axisBottom and d3.axisLeft, and the data is plotted in an SVG canvas.

Old Faithful Contour Plot

A contour plot visualizes the density of eruption data from the Old Faithful dataset, with continuous green-shaded regions representing higher concentrations of points. The visualization uses d3.contourDensity to compute density estimates and d3.geoPath for rendering the resulting contours as SVG paths. Axes and labels are drawn using d3.axisBottom and d3.axisLeft, while a sequential color scale with d3.interpolateGreens maps density values to fills. The interactive example updates the contour bandwidth dynamically as the mouse moves across the page.

Scan Path

This visualization displays a scan path of eye-tracking fixations over a metro map of Antwerp, with a red line connecting fixation points and red circles marking each location. It combines two views: the raw scan path overlaid on the background image and a density contour layer rendered via `d3.contourDensity` with a sequential green color scale (`d3.scaleSequential(d3.interpolateGreens)`). The code loads data from a CSV file using `d3.csv`, scales coordinates with `d3.scaleLinear`, and draws paths using `d3.geoPath`. Fixation points are mapped to SVG coordinates, with contours computed from the same data points.

Heat?

This visualization uses fixation data from the Old Faithful dataset to show the density of eye-tracking points on a stimulus image. The contour map, generated with `d3.contourDensity` and rendered via `d3.geoPath`, uses a sequential green color scale to represent point concentration. The code loads a CSV of mapped fixation coordinates, scales them linearly, and applies a bandwidth of 50 to create smooth density regions. The SVG output highlights areas of high visual attention based on recorded user gaze patterns.

Scan Path

This example visualizes a scan path from eye-tracking data, showing the sequence and duration of fixations on an image. Red circles mark fixation points, with their radii proportional to fixation duration, while a thin red line traces the order of gaze movement between them. The visualization uses D3 v5 to load and parse a CSV file, then scales the x and y coordinates with `scaleLinear` to map fixation points onto the SVG canvas. Circles are drawn from the `MappedFixationPointX` and `MappedFixationPointY` fields, and a line path is generated with D3's `line` function to connect the points in sequence.

May 12, 2020