This is a heatmap

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.

79% match

Fork of Density plot

This visualization shows density contours of eye-tracking fixation points from the Old Faithful dataset, overlaid on a map of Antwerp's metro system. The contour plot highlights areas of concentrated gaze, with colors ranging along a diverging PiYG scale to indicate varying density values. The code uses `d3.contourDensity` to compute the contours and `d3.geoPath` to render them as SVG paths. Interactive mouse movement dynamically adjusts the bandwidth of the density estimation, updating the contour shapes in real time. The data, loaded from `data.csv` via `d3.csv`, includes fixation coordinates and durations for multiple participants and stimuli.

MMinh Nguyen

78% match

Untitled

This visualization plots eye-tracking fixation points from a CSV dataset, encoding X and Y coordinates as scatterplot positions and coloring each dot by its corresponding stimuli (image name). A tooltip appears on hover, showing the stimuli name and exact fixation coordinates. The code uses D3 v3 with SVG circles, linear scales, axes, and a category10 color scale for the legend. Data is loaded via d3.csv, with numeric conversion performed before rendering.

FFlorisPex

77% match

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.

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

Scan Path

This visualization shows a scan path of eye-tracking fixations overlaid on a map of Antwerp, with circles representing fixation points and their sizes scaled by fixation duration. The red line connects successive fixations in temporal order, revealing the viewer’s viewing sequence across the image. Using D3 v5, the code loads CSV data, maps fixation coordinates through `scaleLinear` and `extent`, and renders SVG circles and a path via the `line()` generator. Fixation durations set circle radii, while the background image comes from an external URL specified in the stylesheet.

BBooRiri

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.

Scan Path

This example visualizes eye-tracking scan paths over a map of Antwerp, showing fixation points as circles sized by fixation duration and colored by participant, with connecting lines tracing each user’s viewing sequence. The visualization uses d3.csv to load data, d3.nest to group fixations by user, and d3.line with scaleLinear for positioning. Interactive tooltips display fixation duration and user information, while hover effects highlight individual paths. The underlying map is applied as a CSS background image, and rendering uses SVG with d3.scaleOrdinal for categorical colors.

MMickvdw