BooRiri

@BooRiri·4 public vizzes

Scan Path

The scan path visualization displays eye-tracking fixation points from a CSV dataset overlaid on an Antwerp metro map background image. Red circles represent fixation locations, with circle radius scaled proportionally to fixation duration. A connecting path drawn using d3.line links the fixation sequence, while d3.scaleLinear maps fixation coordinates to SVG positions. The visualization loads data via d3.csv and renders with D3 v5, using SVG circles and paths layered atop the background image defined through CSS styling.

May 12, 2020

Loading thumbnail…

Scan Path

This example visualizes a user’s eye-tracking scan path over a map of Antwerp, showing fixation points as red circles and the sequence of gaze movement as a connected path. The circle radius scales with fixation duration, while the path’s opacity indicates the trail of saccades. Using D3 v5, the code parses CSV timestamp and coordinate data, then applies `scaleLinear` for x and y mapping and a `line` generator to draw the path. Data is rendered as SVG circles and paths over a background image set via CSS.

May 12, 2020

Loading thumbnail…

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.

May 12, 2020

Loading thumbnail…

Scan Path

The scan path visualization displays eye-tracking fixations over a metro map of Antwerp. Red circles mark fixation points, with their radius scaled to fixation duration. A connected path reveals the sequence of gaze movements between these points. The code uses d3's `scaleLinear` for positioning, while SVG circles and paths render the data. The background image is applied via CSS, with data loaded from a CSV file containing fixation coordinates and timestamps.

May 12, 2020