Skip to main content
SimilarExport ZIP
100%

Attention map

✓ Published0🌍 Public
JJiapengFan
Last edited Jun 1, 2020
Created on Apr 29, 2020
Forked from Cars Scatter Plot

This attention map visualizes eye-tracking fixation data from multiple users viewing city images, using a density-based contour overlay to highlight areas of visual focus. The D3.js visualization, built with the `d3-contour.v1` plugin, renders a heatmap-like SVG gradient alongside the mapped fixation points from the data set. The color scale, based on `d3.interpolateInferno`, encodes the density of fixations across each image, revealing where observers concentrated their gaze. The implementation uses raw CSV data containing fixation coordinates and durations to generate these contour layers.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes eye-tracking data, plotting the mapped fixation point coordinates for viewers as they examine images of city landmarks. Users can select a specific city image from a dropdown menu, which updates the plot’s background and overlays the corresponding fixation points as circles. The visualization uses D3.js with SVG and animation, applying linear scales based on resolution data and implementing k-means clustering to group fixation points by color. Hovering reveals a tooltip with details like user, coordinates, fixation duration, and description.

JJiapengFan
81% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes eye-tracking fixation data across different city map stimuli. Users select a city from a dropdown menu, which filters the data and displays fixation points as blue circles overlaid on the corresponding city image. The visualization uses D3.js with an SVG renderer, incorporating d3.scaleLinear for axes, d3.scaleOrdinal from d3-scale-chromatic for color coding, and interactive tooltips showing user, coordinates, fixation duration, and description. The background image resolution is mapped to the coordinate system using data from a separate CSV file.

KKanishka33
79% match
Loading thumbnail…

Untitled

This example visualizes eye-tracking data across multiple city images, plotting fixation points on a scatterplot with a timeline slider for temporal exploration. Users can select stimuli via a dropdown menu and apply K-means clustering with adjustable cluster counts and iteration limits. The visualization uses D3 v5 for SVG rendering and animation, with React for structure, dynamically scaling axes to each image’s resolution from a CSV file.

JJiapengFan
79% match
Loading thumbnail…

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.

PPatricijaC
79% match
Loading thumbnail…

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.

PPatricijaC
77% match
Loading thumbnail…

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.

PPatricijaC
77% match
Loading thumbnail…

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

PPatricijaC
77% match
Loading thumbnail…

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.

PPatricijaC
76% match