Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published0🌍 Public
KKanishka33
Last edited Jun 4, 2020
Created on Jun 4, 2020
Forked from 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.

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 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
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
86% 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
84% 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
83% 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
83% 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
82% 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…

Coordinates Scatterplot

This example visualizes fixation coordinates from a CSV file as a scatterplot, with each point representing an eye-tracking sample. The animation sequentially reveals points over one second, followed by a connecting line that traces the path between fixations in data order. The visualization is built with D3 v5, using SVG elements, scaleLinear axes, and the transition API for the animated appearance. Axis labels, tick marks, and a title are also rendered, with styling applied via CSS.

MMartin Mirchev
78% match