Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
JJiapengFan
Last edited Jun 14, 2020
Created on Jun 10, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

Untitled

This example visualizes eye-tracking data as a multi-line chart, plotting fixation index on the x-axis and mapped fixation point Y on the y-axis. The size of each point reflects fixation duration, with gray-scale squares or colored circles representing the data. Built with React and D3, it renders an SVG with axes, steel-blue paths for each series, and a hover interaction. The data comes from a structured timeline, and the code uses D3’s selection, join, and axis components to generate the visualization.

Tteodoraganea
86% match
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
86% 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
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
79% 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
78% 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
77% match
Loading thumbnail…

Untitled

This interactive scatter plot displays three clusters of points, colored by category, and allows users to brush a region to zoom into that area. The visualization uses D3 v4 to generate data from a normal distribution, render SVG circles, and implement brushing with `d3.brush`. Axes are drawn with `d3.axisTop` and `d3.axisRight`, and zoom animations are handled via `svg.transition()`. The code also references a `data.csv` file with population figures, though the chart itself visualizes synthetic points.

Pprincit
77% match