Coordinates Scatterplot

100%

Coordinates Scatterplot

✓ Published0🌍 Public

Last edited May 6, 2020

Created on May 6, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Coordinates Scatterplot

A scatterplot visualizes fixation coordinates from a data.csv file, plotting x and y positions as steelblue circles that animate into place sequentially. A green path connects the points in data order, repeatedly drawing itself via a stroke-dasharray attrTween. The chart uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line, with hover interactions that enlarge and recolor circles. SVG rendering includes labeled axes and a title.

KKkevingo

87% match

Loading thumbnail…

Coordinates Scatterplot

A scatterplot displays fixation coordinates from a CSV file, with x and y axes labeled and points rendered as steelblue circles. Each point enters sequentially through a 1-second transition with a 100-millisecond delay. A green line connects the points in data order, using a monotone curve and animating its stroke-dasharray via `transition.attrTween` to create a continuous drawing effect. The visualization uses d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft with gridlines, and d3.line for the path, all rendered in SVG.

KKkevingo

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

81% match

Loading thumbnail…

Coordinates Scatterplot

This scatterplot displays temporal progression of fixation coordinates from a CSV file. Each circle represents a data point, while a line path connects them in sequence, with an animated stroke-dashoffset effect revealing the trajectory over time. Using D3 v5, the code leverages `scaleLinear`, `axisLeft`, `axisBottom`, `extent`, and `line` to construct the chart. The SVG rendering includes circular points, labeled axes, and a title, with smooth transitions applied via D3’s `.transition()` method for both point placement and path drawing.

KKkevingo

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

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

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

77% match