Skip to main content
SimilarExport ZIP
100%

Scan Path

✓ Published1🌍 Public
BBooRiri
Last edited May 12, 2020
Created on May 12, 2020
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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.

BBooRiri
95% match
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.

BBooRiri
95% match
Loading thumbnail…

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

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.

BBooRiri
94% match
Loading thumbnail…

Scan Path

This visualization displays eye-tracking scan paths recorded as fixation points over a stimulus image, with each circle’s radius proportional to fixation duration and sequential positions linked by a blue path. Using D3 v5, the code loads CSV data with `csv()` and maps fixation coordinates through `scaleLinear` scales, rendering circles with SVG. The line connecting fixations is built with a `d3.svg.line` (legacy API), while `d3.axisLeft` and `d3.axisBottom` are imported but not used. Data includes timestamp, fixation index, duration, and mapped X/Y positions for individual users.

PPatricijaC
93% match
Loading thumbnail…

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.

PPatricijaC
92% match
Loading thumbnail…

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.

PPatricijaC
92% match
Loading thumbnail…

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.

PPatricijaC
92% match