Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Project Algernon - Loading Multiple Data Sources

Public visualization

Viewing a saved revision (read-only)

c6757e9311b647d9a5e7c3f68d15e6ed

Fork of Project Algernon - Loading Multiple Data Sources

0 stars0🌍 Public
CCoronaDock
Last edited Sep 24, 2022
Created on Sep 24, 2022

This visualization displays indoor cycling ride data as a line chart, plotting power output in watts over time with SVG paths and interactive dropdown selection. The React app loads ride metadata and JSON data via D3’s `json` function, then renders axes using `scaleLinear` and a gradient-stroked `line` path. A dropdown menu, powered by `react-dropdown`, lets users switch between multiple ride files.

AI-generated description

Example using Algernon's ride data

Algernon's data