Coordinates Scatterplot

100%

Coordinates Scatterplot

✓ Published1🌍 Public

Last edited May 4, 2020

Created on May 1, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

90% match

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

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

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

Making Scatter Plot with D3

This example shows a scatter plot of date-value pairs from a CSV file, with points animating from radius 0 to 5 over one second. It uses D3 v5’s `scalePoint`, `scaleLinear`, `axisLeft`, and `axisBottom`, and applies an SVG `transition` to grow the circles. The y-axis scales values, while the x-axis maps dates as categorical points. Data is loaded via `d3.csv`, and the plot includes labeled axes and a title.

JJuan David Bolaños Rojas

80% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables from a CSV dataset, plotting each point with x and y coordinates. It uses D3 version 6 with an SVG rendering approach, employing `d3.scaleLinear` to map the data domains to pixel ranges and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded asynchronously via `d3.csv`, and circles are appended and joined to the data using `.join('circle')`. The plot is styled with a teal fill and includes axis labels for "Numbers" and "Amount."

Bbugfree55

79% match

Loading thumbnail…

Scan Path

This visualization displays eye-tracking scan paths recorded as fixation points over a stimulus image, with each circle’s radius proportional to fixation duration and sequential positions linked by a blue path. Using D3 v5, the code loads CSV data with `csv()` and maps fixation coordinates through `scaleLinear` scales, rendering circles with SVG. The line connecting fixations is built with a `d3.svg.line` (legacy API), while `d3.axisLeft` and `d3.axisBottom` are imported but not used. Data includes timestamp, fixation index, duration, and mapped X/Y positions for individual users.

PPatricijaC

78% match

Loading thumbnail…

scatterPlot

A scatter plot displays letters from a CSV file against their corresponding numeric values as circles. The chart uses D3 v5 with an SVG rendering, loading data via `d3.csv` and scaling positions with `scaleLinear` for the x-axis and `scalePoint` for the y-axis. Axes are generated using `axisBottom` and `axisLeft`, with tick lines spanning the plot area.

VVvgupta

78% match