Untitled

100%

✓ Published0🌍 Public

Last edited May 13, 2020

Created on May 13, 2020

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.

AI-generated description

A bare minimum HTML page.

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

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

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

80% match

Loading thumbnail…

Untitled

This example visualizes a time series of a single numeric value over approximately 90 daily data points, displaying both a filled area chart and an overlaid line with red circular markers. The chart uses a time-scaled x-axis and a linear y-axis, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. It loads comma-separated data from a remote URL, parses dates with `d3.timeParse`, and builds the area and line paths using `d3.area` and `d3.line`. The visualization is rendered as SVG within a React-compatible setup using D3 v4.

Wwannurmawaddah

78% match

Loading thumbnail…

Untitled

A line chart visualizes a dataset of 13 coordinate pairs, plotting dependent values against independent variables across a 500x400 SVG canvas. The example uses D3 v4 within a React framework to construct a linear chart with labeled axes, a title, and red circular markers. The code specifically employs `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for ticks, and a custom line generator via `d3.line` with monotone curve smoothing to connect the data points. The visualization is rendered entirely as SVG elements, with fixed margins and translated groups for positioning.

Nnamansinghal1420

78% match

Loading thumbnail…

Untitled

This example visualizes three separate line segments, each connecting two points on a scatterplot-like coordinate system. The data is defined as an array of coordinate pairs, and D3.js v3 scales map these values to pixel positions. Using `d3.svg.line()` and `d3.svg.axis()`, the code generates SVG paths and axes within a React-rendered HTML page. The rendering approach relies on SVG elements appended to a container, with margins applied via a translation transform.

Aavesh1998

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

77% match

Loading thumbnail…

Untitled

A line chart displays 21 randomly generated data points as a smoothed orange curve, with dots marking each value along the x-axis. The visualization uses D3’s `d3.line` generator with `curveMonotoneX` for interpolation, while `d3.scaleLinear` maps the data index and random y-values to pixel coordinates. SVG circles are appended for each point, and mouseover events log the bound datum to the console, though no tooltip or interactive highlight is implemented. The chart includes x and y axes via `d3.axisBottom` and `d3.axisLeft`.

Hhaiyangwhy1015

76% match