Scatter Plot

100%

✓ Published4🌍 Public

Last edited Jun 3, 2020

Created on Apr 26, 2020

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.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes eye-tracking data, showing the x and y coordinates of mapped fixation points. A dropdown menu allows the user to filter the visualization by the status of the data entries. To create the chart, the code uses the D3.js library, specifically the `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` APIs within an SVG rendering. The image displayed as the background corresponds to the selected data grouping. Altered data is animated with circles transitioning to new positions using the `transition` API.

Nnifemi-sys

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

86% match

Loading thumbnail…

Scatter

A scatterplot displays eye-tracking fixation points over a map of Antwerp, with each red dot representing a fixation location from participant data. The visualization uses an SVG rendering approach where D3 v5’s `csv` loads the dataset, and `scaleLinear` with `extent` maps the mapped fixation X and Y coordinates to screen positions. Circles are appended via `selectAll`, with a fixed radius of 10 and 0.1 opacity, revealing clusters of visual attention across the image.

Ssoundaryasure

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

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

81% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the relationship between age and length for a dataset of 40 observations. A dropdown menu allows users to switch between different stimulus maps, which appear as background images with city-specific resolutions loaded from a CSV file. Users can hover over individual data points to see detailed tooltip information including fixation duration and coordinates. The visualization uses D3 v5 with SVG rendering, featuring animated k-means clustering via the `kmeans` algorithm with `d3.scaleOrdinal` for cluster colors, and axes that adapt to the selected image dimensions.

KKanishka33

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

79% match