Skip to main content
SimilarExport ZIP
100%

Heat?

✓ Published0🌍 Public
PPatricijaC
Last edited May 13, 2020
Created on May 13, 2020

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.

AI-generated description

A visualization of the Old Faithful Dataset

Uses d3-contour.

Draws from bl.ocks.org: Density Contours

MIT Licensed

Similar vizzes

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

Attention map

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.

JJiapengFan
79% match
Loading thumbnail…

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
Loading thumbnail…

This is a heatmap

This heatmap overlays eye-tracking fixation points on a static map of Antwerp’s metro system, with each point’s position derived from `MappedFixationPointX` and `MappedFixationPointY` coordinates in `data.csv`. Using React and D3’s `scaleLinear` for coordinate mapping, the visualization renders an SVG containing the fixation data. The background image is applied via CSS, while the SVG is sized at 960×500 pixels. The code loads CSV data asynchronously with `d3.csv`, converting numeric fields before passing them to the render function, though no explicit heatmap aggregation or density calculation is visible in the provided source.

Tteodoraganea
75% match
Loading thumbnail…

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

Old Faithful HeatMap 03

This interactive heatmap visualizes the Old Faithful dataset, showing the relationship between eruption duration and waiting time through binned rectangular cells colored by count on a green scale. Rendered as SVG via Vega-Lite’s `rect` mark, the visualization updates dynamically as the mouse moves across the page, adjusting the maximum number of bins on the x-axis based on cursor position. The code uses Vega-Embed, Vega-Lite’s API, and d3.tsv for data loading, with the view’s legend offset to the left.

OOleJRask
74% match