Skip to main content
SimilarExport ZIP
100%

Sessions Entrainement et courses

✓ Published1🌍 Public
PPatrick Dupuis
Last edited Sep 9, 2019
Created on Sep 9, 2019

This visualization plots cycling power (in watts) against elevation gain, with each circle representing a training session or race and its size encoding average speed. Hovering over a point reveals exact values for power, elevation, and speed in a tooltip. The chart is built with D3 v5, using linear scales, axis generators, and data loaded from the Velobook API. SVG circles are rendered with opacity and a hover color change, while a custom tooltip element tracks the mouse position.

AI-generated description

Hover to see the details.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sessions Entrainement et courses

This visualization plots cycling workout sessions, showing power output in watts against elevation gain (dénivelé) for a rider's training data. Each circle’s radius represents the average speed, allowing viewers to compare performance across different climbs. It fetches JSON data from the Velobook API and renders it as an SVG scatterplot using D3 v5. The chart includes interactive hover tooltips that display the power, elevation, and speed for each workout. Axes are scaled linearly and labeled clearly, with grid lines and a title "MMP by Dénivelé" indicating maximal minute power relative to climbing difficulty.

PPatrick Dupuis
94% match
Loading thumbnail…

Visualize Data with a Scatterplot Graph | fcc project-2

This scatterplot graphs 35 fastest times up Alpe d'Huez, with orange and blue circles distinguishing riders with and without doping allegations. The visualization uses d3.scaleLinear for both axes, parsing race times into Date objects for the y-axis. Built with React and d3.v7, it renders SVG circles that trigger an HTML tooltip on mouse hover, displaying rider details from the freeCodeCamp cyclist-data.json dataset. A legend clarifies the color coding for doping status.

MMohammed Banani | MbDev
66% match
Loading thumbnail…

JS created regression line

This scatterplot visualizes a friend’s Zwift cycling workout, plotting power output against time, with each point representing a data sample from the ride. A bright red regression line cuts through the blue data points, revealing a slight upward trend as the ride progresses. The chart was rendered in SVG using D3 v4, with the regression line calculated and drawn via JavaScript.

AAlexDaGr8
66% match
Loading thumbnail…

A year of weekly running mileage

This radial heatmap visualizes a year of weekly running mileage, with runs plotted as bars radiating from the center. The distance (yellow) and elevation gain (blue) of individual runs are encoded along a circular time axis, with hover interactions revealing detailed tooltips. Using D3 v4 and SVG animations, the visualization applies a moving 7-day sum to calculate weekly mileage. Two interactive sliders adjust color thresholds (low/middle/high) that segment the data into three colored zones, and the underlying masked paths are redrawn dynamically as thresholds change, selectively coloring the bars. The example builds on Adam Pearce’s mask-based coloring technique to show how multiple color zones can be rendered in a single path.

663anp3ca
65% match
Loading thumbnail…

Project Algernon - Dashboard V1

This dashboard visualizes indoor ride data from Project Algernon, displaying a line chart of power output in watts against time in minutes. A picker lets users switch between ride sessions, each sourced from JSON files. The visualization is built with React and rendered as an SVG using D3 v7, specifically leveraging `scaleLinear` for axes, the `line` shape for the path, and `curveCardinal` for smoothing. A custom linear gradient colors the stroke, while data smoothing via a rolling average is applied to the wattage values.

JJames Rhodes
64% match
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
64% match
Loading thumbnail…

Lifting Log v6

This visualization plots personal exercise activities over time as a dot matrix, showing which muscles were worked on each day for the past 24 days. Black circles represent executed workouts, while white circles with black outlines indicate planned exercises. The horizontal axis shows dates, and the vertical axis groups activities by muscle category, with dashed lines highlighting gaps since each muscle was last exercised. Built with D3 v6, it uses scalePoint and scaleTime for axes, group for data aggregation, and SVG circles and lines for rendering.

CCurran Kelleher
64% match
Loading thumbnail…

Clickable Tooltip

This interactive scatter plot visualizes doping allegations in professional bike racing from 1994 to 2015, plotting race times against years. Built with D3 v7, it fetches cyclist data from a Free Code Camp GitHub repository and renders SVG circles with jitter to reduce overplotting. Hovering reveals a clickable tooltip with rider details and source links, while color-coded dots and a legend distinguish riders with and without doping allegations. Tooltip transitions use D3’s `.transition()` for smooth fade-in/out effects.

Aadventuresenglish.info@gmail.com
63% match