Fork of Density plot

100%

Fork of Density plot

✓ Published0🌍 Public

Last edited Jun 11, 2021

Created on Jun 11, 2021

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.

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

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

94% 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

88% match

Loading thumbnail…

Density plot

PPatricijaC

88% match

Loading thumbnail…

Fork of Old Faithful Contour Plot

This interactive contour plot visualizes the Old Faithful dataset, showing the density of eruption and waiting times through colored bands. The visualization displays contours rendered as filled SVG paths using `d3.geoPath`, with colors mapped from a sequential greens scale. Users adjust the density bandwidth by moving their mouse across the plot, which triggers a re-render of the contour data via `d3.contourDensity` and `d3.select` event handling. Axes and labels are drawn using `d3.axisBottom` and `d3.axisLeft`, and the density estimate uses a Gaussian kernel with a bandwidth that ranges from 0 to 40 pixels as the mouse moves horizontally.

PPioustu

80% 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

80% 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

78% match

Loading thumbnail…

Fork of Old Faithful Contour Plot

This visualization shows the Old Faithful dataset as a contour plot, with eruption time on the x-axis and waiting time on the y-axis. The density of data points is represented through filled contour regions using a sequential green color scale. The code uses d3-contour’s `contourDensity` to compute the contours, and `d3.geoPath` to render them as SVG paths. Axes are drawn with d3.axisBottom and d3.axisLeft, and moving the mouse dynamically updates the bandwidth of the density estimation, recomputing the contours in real time.

CCristina Macaraig

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

78% match