Create an animated visualization of running data with D3.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Animated D3 Running Map

Visualizing Strava data with D3.js. See a live version of the visualization here and the accompanying blog post on my website.

Running Map GIF

Map tiles copyright OpenStreetMap contributors.

This project was inspired by the Strava Global Heatmap and the America's Cup Course article by Mike Bostock and Shan Carter for the New York Times. Some map tiling code taken from this example. Canvas rendering idea and some code from this article.


You can run the visualization locally with your own activity data.

First export your data from whatever tracking service you use in the GPX file format.

Convert the data from GPX to a single CSV file using the utility conveniently bundled with this repo. Where data is a directory where your GPX files are located.

$ python3 ./data -o ./assets/activity_data.csv

Change the center and scale to match the your data in the running_map.js file.

var config = {
    "scale": 98304, // your scale
    "lat": 51.0375, // your lat
    "lon": -114.09, // your long
    "fps": 15,
    "resampleInterval": 30 // resample interval used in
                           // 30S is the default 

Spin up a webserver with Python.

$ python3 -m http.server
Serving HTTP on port 8000 ( ...

Lastly, point your brower of choice to http://localhost:8000 and the visualization should appear.


The data cleaning step requires Python3 to be installed on your machine and the following packages:

  • pandas
  • dateutil


All code in this repo is licensed under the terms of the GPLv3 License (see the file