CS Timer Visualization

100%

CS Timer Visualization

✓ Published0🌍 Public

Last edited Aug 9, 2018

Created on Apr 4, 2018

This visualization showcases a scatterplot of solve times from csTimer.net, with each point representing a timed Rubik's cube solve. The x-axis indexes solves sequentially while the y-axis plots the recorded times in seconds. Rendered using D3 v4 with SVG for axes and points, plus WebGL for larger data points, the chart reveals trends and outliers across 48 timed solves, with a red "solved" marker indicating the current selection.

AI-generated description

Just some graphs I made from the times I've recorded on <a href="http://cstimer.net/">csTimer.net</a>.

mit Licensed

Similar vizzes

Loading thumbnail…

Many plots. Part 3

This visualization presents a small-multiple grid of scatter plots, with each plot showing data from one participant who solved math problems while their eye movements were tracked. The x-axis consistently represents problem order, while the y-axis can be toggled via a menu to display either average fixation duration, no-fixation percentage, or response time. A second menu sorts the individual participant plots by their average response time or percentage of correct answers. Overlaid red trend lines reveal whether the chosen y-axis measure changes over the course of the experiment. The plots are colored by correctness, and a legend allows filtering points to view only correct or incorrect responses. The visualization is built with D3 v7, using its selection API and scale functions, and renders participant-specific trend lines calculated from the data.

AAlena Egorova

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

67% match

Loading thumbnail…

connect the dots

This animated scatterplot visualizes a time series of 50 data points, connecting them in chronological order with a smooth line. Each dot represents a moment in time, with its vertical position encoding the "rate" value while the x-axis maps temporal progression. The visualization uses D3 v4's SVG rendering to draw a continuously-updating path that links each point to the next, creating the sense of drawing a connected line through the data. As time advances, the line extends to incorporate new points while earlier segments remain visible, producing a dynamic "connect-the-dots" effect. The animation highlights the temporal flow and changing values across the dataset, with the line's movement revealing patterns in the rate changes over time. The visualization uses a minimal, uncluttered aesthetic that focuses attention on the trajectory of the data points.

EEranM6

66% match

Loading thumbnail…

Performance Visualization Dashboard

This dashboard visualizes runtime performance across frames using three coordinated D3 v6 SVG charts. A bar chart shows functions with the longest total runtime, while a scatter plot details the breakdown of the longest frame by function. An interactive line chart connects performance points over tick time, enabling selection of specific frames. The visualization uses d3.csv for data loading, scaleBand, scalePoint, scaleLinear, axisLeft, axisBottom, and d3.timeParse to structure the CSV data containing Tick, Identifier, and Runtime fields.

IINDIGOBLIN

66% match

Loading thumbnail…

Time scatter plot

This time scatter plot visualizes temperature readings over time as red circles on an SVG canvas. The visualization uses D3's `scaleTime` and `scaleLinear` for axes mapping, with `timeFormat` to display weekday labels on the bottom axis. React renders each data point as a circle, with tooltips showing the formatted timestamp. The chart loads data from a CSV file via D3's `csv` utility, and custom React components handle axis and mark rendering.

Yyastika

66% match

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

65% match

Loading thumbnail…

Working on Time

This interactive scatterplot visualizes San Francisco temperature readings over a week, with time on the horizontal axis and temperature on the vertical axis. React renders SVG circles positioned using d3.scaleLinear scales, while custom AxisBottom and AxisLeft components generate tick marks and labels with d3 time formatting. Data loads asynchronously via d3.csv from a GitHub gist, and hovering over a circle reveals its timestamp through an SVG title tooltip.

HHaris Abdullah

65% match

Loading thumbnail…

Many plots. Part 1

The visualization is a small-multiple grid of scatter plots, one per participant, showing eye-tracking metrics across 24 math problems. Each plot displays the problem order on the x-axis and a selectable y-axis metric (average fixation duration, no-fixation percentage, or response time), with points colored by correctness. A red trend line shows the linear relationship, and a color legend filters points by hovering. The interface uses a dropdown menu to change the y-axis metric. Data comes from a WPI MAPLE Lab eye-tracking study with 86 students, parsed from CSV and rendered using the d3 library (v7), with helper modules for axes, color legend, and scatter plot rendering.

AAlena Egorova

65% match