Performance analysis

100%

Performance analysis

✓ Published0🌍 Public

Last edited May 5, 2022

Created on May 3, 2022

Four small multiples display scatterplots of alpine ski split times across training days and course types. Each panel corresponds to a different intermediate timing point, with points jittered along the course axis. A dropdown menu filters all panels by ski academy. The visualization uses D3 v7 with SVG rendering, custom `scatter()` and `menu()` reusable chart functions, and `d3.rollups` to aggregate means. Data comes from a CSV file loaded via `d3.csv`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Matrix

A matrix of small multiples displays ski racing performance data, with each row representing a skier (by bib number) and each column a split point along the course. Individual circles plot performance values, jittered on the x-axis to reduce overplotting, with axes scaled via `d3.scalePoint` and `d3.scaleLinear`. Built with D3 v7, the SVG visualization uses `d3.groups` to organize data by bib and renders interactive circles that highlight on mouseover, styled with CSS. Data originates from a CSV file of timing differences.

CChristian Magelssen

80% match

Loading thumbnail…

DASHBOARD

This dashboard visualizes the performance of individual skiers across multiple runs, comparing their race time ratios against a reference time. A dropdown menu lets users select a start number (BIB) to view that skier’s data. The chart uses D3 v6 to render an SVG bar chart, with red bars for positive ratios and teal bars for negative ones, and D3 scales and axes for layout. Data is loaded from a CSV file and filtered dynamically upon selection.

CChristian Magelssen

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

72% match

Loading thumbnail…

Fork of D3 Starter

This example displays a scatter plot comparing programming language performance on Project Euler problems, with user-selectable axes, filter options, and animated transitions. It loads CSV timing data and color mappings from GitHub repositories, then visualizes results as colored circles that animate to new positions when the dataset changes. The visualization uses a custom surrounding-layout system that automatically positions titles, subtitles, axes, and legends within an SVG canvas. Built with D3 v7, the code leverages `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleTime`, `d3.axisBottom`, `d3.axisLeft`, `d3.transition`, and dynamic menu-driven data selection through reusable chart components.

GGavin Sykes

69% match

Loading thumbnail…

D3 reusable Scatter Plot

This scatter plot visualizes a student dataset with marks, study time, and course count. Built with D3 v6, it uses a reusable chart pattern with scaleLinear, axisBottom, axisLeft, and SVG circles. The plot cycles its x-axis variable through three columns every five seconds, animating the data transition via setInterval. Data comes from a CSV loaded with d3.csv, and the chart updates in place when the x-value changes.

AArun Pratap

69% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes automotive performance data, allowing users to compare any two numeric columns—such as weight, horsepower, or acceleration—via dropdown menus positioned above the axes. Selecting a new column triggers a smooth 1-second animation where circles transition from the center to their new positions using D3’s `transition().duration()`. The visualization uses SVG for rendering, with axis ticks, grid lines, and labels styled extensively via CSS. Data loads from a remote CSV file, and both x- and y-axis selections are dynamically redrawn using `scaleLinear`, `axisBottom`, and `axisLeft` from the d3 module.

Aanuj1450

68% match

Loading thumbnail…

D3 Course 11: Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two numeric columns from the auto-mpg dataset by selecting axes from dropdown menus. The visualization demonstrates a unidirectional data flow pattern, where menu selections trigger re-renders of the entire chart. Built with D3 v5, it uses scaleLinear, axisBottom, axisLeft, and transition methods to animate circles from the center to their positions. The General Update Pattern is applied through enter/merge selections, and the subtle animations use staggered delays for a cascading effect.

GGabrz

68% match

Loading thumbnail…

ICE-7 - Scatter Plot

This animated scatter plot maps student performance metrics, such as scores in tenth, twelfth, and college, along with time spent, against each other. The plot cycles through different x-axis variables, updating the visualization in a loop, and colors data points by hobby categories: Cinema, Sports, and Others. Built with D3 v6, it uses `d3.csv` to load the data and a custom `scatterPlot` module that constructs axes and circles, rendering the SVG animation with a legend and labels.

AAshrith Kudidhi

68% match