A year of weekly running mileage

100%

A year of weekly running mileage

✓ Published0🌍 Public

Last edited Oct 11, 2017

Created on Oct 11, 2017

A radial heat-histogram visualizes a year of weekly running mileage, using color-coded arcs to distinguish low, middle, and high distance zones based on adjustable threshold sliders. The underlying masked SVG paths are redrawn and selectively colored as thresholds change, while yellow and blue bars represent individual run distance and elevation, with hover tooltips for details. The code uses d3.v4 with moment.js and moment-range for date handling, and d3.json to load the run data from a gist.

AI-generated description

Note: still a work in progress

In his heat-histogram, Adam Pierce shows how using masks lets you draw an area with multiple colors using just one path.

Here this method is applied to explore the weekly mileage I ran in 2014. Instead of updating the mask itself like in Adam's bl.ocks, the underlying masked paths are redrawn depending on the threshold values from the inputs, so the path can be selectively colored.

The bars are the distance (yellow) and elevation (blue) of the individual runs, hover on them to get more details.

forked from <a href='http://bl.ocks.org/gcalmettes/'>gcalmettes</a>'s block: <a href='http://bl.ocks.org/gcalmettes/0ab8e8e1c64fa07e5fe62ae606624cb6'>A year of weekly running mileage</a>

mit Licensed

Similar vizzes

Loading thumbnail…

A year of weekly running mileage

This radial heat-histogram visualizes a year of weekly running mileage, with distance and elevation for each run shown as colored bars around a circular timeline. The visualization uses a masked area path to color the chart dynamically based on adjustable weekly mileage thresholds, with interactive sliders controlling the color transitions between low, middle, and high zones. Built with D3 v4 and moment.js, it renders SVG elements and includes hover tooltips for detailed run information, with data loaded from a JSON file.

TThanaporn-sk

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

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

74% match

Loading thumbnail…

Heatmap YearHour Calendar View

A calendar-style heatmap displays data for 2014 across twelve monthly SVG panels, with each day of the month plotted against the 24 hours of the day. The intensity of each hour is encoded through a linear color scale from white to blue, representing percentage values (PER) loaded from a CSV file. The visualization uses d3.nest to group and roll up the data, and d3.scaleLinear to map value ranges to colors. Rectangles are positioned using d3.timeHours and d3.timeDays iterators, with month labels and hour/date legends derived from the time scale.

TThanaporn-sk

73% match

Loading thumbnail…

d3 | reusable heatmap calendar

This calendar heatmap visualizes daily activity amounts across multiple years using a reusable D3.js component. The chart displays years in separate horizontal bands, with each column representing a week and each cell a day, colored by a diverging linear scale from light pink to red based on the amount value. Month boundaries are marked with paths, and weekday/month labels support orientation. Data is loaded from JSON, mapped to calendar days, and rendered as SVG rectangles within a margin-based layout. The chart supports interactivity via a hover dispatch event.

CCBasis

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

72% match

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

72% match

Loading thumbnail…

Day Hour HeatMap

This example shows a day-by-hour heatmap of activity counts, with each cell colored on a blue-yellow quantile scale. The SVG chart lays out seven days of the week as rows and 24 hours as columns, using a fixed grid size. Day and hour labels are styled with monospaced fonts, and the color scale maps nine buckets from light yellow to dark navy. The visualization uses D3 v3 to load TSV data and render the heatmap with SVG, and it includes a simple dataset picker for switching data sources. The design supports quick pattern recognition of peak and off-peak periods across the week.

AARC032110

71% match