A running plan line chart

100%

A running plan line chart

✓ Published0🌍 Public

Last edited Jun 20, 2019

Created on Jun 20, 2019

Forked from Temperature line graphy by Lonwabo

A running plan line chart traces the distance of Sunday runs leading up to the Rio Half Marathon, using a dataset of timestamps and kilometer values. The visualization is rendered as an SVG via D3 v5, with a time-scaled x-axis and linear y-axis. It employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` from the D3 API, plus a custom line path styled with a red stroke. The chart includes rotated date labels and a title, sourced from a CSV file loaded with `csv()`.

AI-generated description

References:

MIT Licensed

Similar vizzes

Loading thumbnail…

Gist ab5ccee1fb22209a4bcd0bd65dd71ca1

The visualization tracks a 31-day running plan by comparing planned distances with actual run times. It shows how each day’s planned mileage relates to the time spent running, with zero-mile rest days clearly marked. The code uses `d3.scaleLinear` for axes, `d3.line` for the distance and time paths, and `d3.axisBottom` for the day labels. Data comes from two CSV-like sources embedded in the gist, and the chart renders as an SVG with a smooth line for distance and a separate line for time, making the daily variation and rest-day pattern immediately visible.

FFrank515

77% match

Loading thumbnail…

Gist a47a4a5c5f7039022881d0b2dc84a1d6

The visualization tracks a month of daily running activity, plotting each day’s distance, time, and heart rate as a dual-axis scatterplot with a connected line. It shows how distance and time peak on high-mileage days while resting heart rate dips, with zero-distance rest days marked as gaps. Built using d3.scaleLinear for axes, d3.line for the path, and d3.axisBottom/axisLeft for gridlines, the chart reads from the CSV data via d3.csv. Points are rendered with d3.point circles, and the y-axis encodes time, while the x-axis uses a time scale for dates.

FFrank515

73% match

Loading thumbnail…

Gist fb66506b6acde1bc784498d56ae697f3

The visualization charts a 31-day running plan, showing daily distances that alternate between rest days (0 miles) and active runs peaking at 8 miles. It uses a line chart to reveal the repeating weekly pattern of three running days followed by a rest day, with gradual increases in mileage over the month. The code parses the CSV data from the gist file and renders a simple SVG path, relying on D3’s scale functions for axes and data mapping. No interactive or animated features are present, focusing solely on static comparison of daily effort.

FFrank515

73% match

Loading thumbnail…

Gist 568d5eb25a35dbbb8d9e9e87521b4221

This example visualizes a two-week running schedule from a small CSV dataset, showing daily mileage with a pattern of rest days every fourth day. It uses a line chart rendered with D3.js, where the x-axis maps sequential day numbers and the y-axis encodes miles, with data points joined by a path generated through d3.line. The visualization highlights the alternating effort and recovery rhythm, with zero-mile rest days clearly visible as dips to the baseline. The code loads the data via d3.csv and applies a linear scale for both axes, while a smooth curve interpolation (d3.curveLinear) connects the points to emphasize the cyclical nature of the training plan.

FFrank515

72% match

Loading thumbnail…

Line7

This line chart visualizes carbon emissions in Rio from 2010 to 2015, drawing on a CSV dataset. Using D3 v5, it encodes time on the x-axis with `d3.scaleTime` and emission values on the y-axis with `d3.scaleLinear`. The SVG rendering includes axes, grid lines, labels, and a purple line path generated via `d3.line`. Data is loaded asynchronously with `d3.csv` from a GitHub gist.

AABCDB15

71% match

Loading thumbnail…

Gist ce952252c3e624bba1310e716183d77f

This visualization tracks daily running distances for May 2017, showing a clear pattern of alternating effort and rest days. It uses a line chart where the y-axis encodes miles run and the x-axis represents dates, with zero-distance days plotted as gaps to emphasize recovery periods. The code relies on D3.js (likely `d3.scaleLinear` and `d3.line`) to generate the path, while the data is parsed from the CSV file `May_2017_new_log_miles.csv`. The chart highlights a gradual increase in peak distances from 6 to 8 miles over the month, with a consistent rest every third day.

FFrank515

70% match

Loading thumbnail…

Gist 1f1da38f38f58e6eff32b167edbf487f

The visualization displays a 31-day running log as a line chart, with daily distances on the y-axis and days on the x-axis. It highlights a pattern of alternating active and rest days, with distances peaking at 8 miles on day 30. The chart is rendered using D3.js, likely with `d3.scaleLinear` for axes and `d3.line` for the path. Data is loaded from a CSV file via `d3.csv`, and the line’s smooth curve suggests a `d3.curve` interpolator. The visualization emphasizes the cyclic structure of the training schedule rather than individual data points.

FFrank515

70% match

Loading thumbnail…

Weekly mileage vs. Marathon training plans

This visualization compares weekly training mileage for London Marathon 2016 finishers (from Strava athlete data) against four Runners World training plans targeting sub-3:00 to sub-4:30 marathons. Each panel shows a shaded area between the plan’s upper and lower mileage bounds, overlaid with the actual average finisher mileage per week. The code parses CSV data with `d3.csvParseRows`, then builds small multiples using `fc.chartCartesian`, `fc.seriesSvgArea`, `fc.seriesSvgLine`, and `fc.annotationSvgGridline` from d3fc, with scales from `d3.scaleLinear`.

CColinEberhardt

69% match