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.

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.

Usage

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.

• Strava export
• Runkeeper export

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

$ python3 gpx_parser.py ./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 gpx_parser.py
                           // 30S is the default 
};

Spin up a webserver with Python.

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

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

Requirements

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

• pandas
• dateutil

License

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