Skip to main content
100%

Run Pace Viz experiment #10

✓ Published0🌍 Public
Aalanmclean
Last edited Jun 24, 2013
Created on Jun 24, 2013

This visualization charts a runner's race pace against a goal pace, using D3 v3 with SVG and animation. A blue area highlights portions of the run where the pace is faster than the average, while red shading indicates slower segments. An elevation profile is layered beneath the pace data, and mile markers fade in sequentially along the top. The chart also includes a goal line and labels for average pace, run time, and faster/slower indicators, providing a comprehensive view of pacing relative to terrain and target.

AI-generated description

Similar vizzes

Loading thumbnail…

run pace viz experiment #10

A race pace visualization that animates stream data showing seconds per mile against a goal pace. The chart uses D3 scales to map distance on the x-axis and pace on the y-axis, with mile markers fading in sequentially. Colored areas highlight sections above and below the target pace, with an elevation profile displayed at the bottom. Average pace lines and labels provide summary statistics, while the animated position circles and pace lines trace the run’s progression over distance. The SVG rendering includes interactive hover elements, a red goal line, and blue/red area fills to distinguish faster and slower segments.

Aalanmclean
95% 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
70% match
Loading thumbnail…

race results

This visualization maps race results by plotting each runner's finishing position against their time. Circles are placed along the x-axis by position and along the y-axis by minutes extracted from the time string (split on ':'), with a fixed radius of 4 pixels and a teal fill. Built with D3 v4 and SVG, it loads data from a TSV file listing position, name, sex, and time, encoding each runner as a circle. The y-coordinate is computed by multiplying the minute component of the time by 5, creating a vertical spread of finish times relative to rank.

Aandrewcowley
70% match
Loading thumbnail…

A year of weekly running mileage

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.

TThanaporn-sk
68% 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
68% match
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
68% match
Loading thumbnail…

demo

A weekly run-tracking dashboard visualizes a runner's activities aggregated by ISO week in 2013, using JSON data from a gist. Each week displays nested activity details—name, start date, moving time, distance, speed, and elevation gain—in a structured list format. The visualization is rendered as an interactive SVG animation, built with D3.v3 and enhanced by a jQuery-based "fixie" plugin that enables elements to stick to the viewport while scrolling within their container, allowing the weekly summaries to remain visible as the user navigates the data.

Aalanmclean
68% match
Loading thumbnail…

VIZPROJECT

This bubble chart shows the correlation between a dog's running speed and bite force, with bubble size representing endurance and color indicating breed. Built with D3 v7, it reads data from a local CSV file and renders an SVG with animated transitions. The chart includes interactive tooltips that appear on mouseover, plus dual legends for bubble size (endurance) and breed color categories.

Jjarethodges@gmail.com
67% match