Scatter Plot

100%

✓ Published0🌍 Public

Last edited May 14, 2020

Created on May 14, 2020

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.

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

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

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

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

84% 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…

Coordinates Scatterplot

A scatterplot of 14 eye-fixation coordinates plots X and Y positions as steel-blue circles, with a green monotone-x line connecting them in sequence. The circles animate into place with a staggered delay on load, while hovering enlarges a point to red and displays its exact coordinates in a tooltip. Built with D3 v5, the visualization uses `scaleLinear` for axes, `axisBottom`/`axisLeft`, and `transition.attrTween` to animate the line’s stroke-dasharray for a drawing effect.

KKkevingo

81% match

Loading thumbnail…

Interactive Menu in Scatter Plot

This scatter plot visualizes eye-tracking data from a study of 86 undergraduate students solving math problems. The x-axis shows the order of problems in the experiment, while the y-axis displays the average duration of fixations in milliseconds. Each point is colored according to whether the participant's response was correct or not, with a color legend that users can hover over to highlight points of a specific outcome. The visualization is rendered as an SVG using D3 v7, with axes and tick marks generated via D3's `scaleLinear` and `axisLeft`/`axisBottom` functions. Data is loaded asynchronously from a GitHub gist containing the CSV dataset.

AAlena Egorova

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

80% match