A Little Data Goes a Long Way

It only takes a spark

• Ease of maintenance with Eleventy (Build Awesome)
• Deprecation of Eleventy sparkline service
• Builds on previous work of extracting run data to JSON from fit files
• After years of having run data in tables
• Researching data display from other platforms
  • Examples from Strava/Apple Activities/Intervals Pro
• Generic sparkline function to pass in any array
• Formatting data in an array of values
• Other customizations including height, width, color
• Examples on site: Runs

What else to do with data

• Extracting GeoJSON format from coordinates object of the parsed fit file and keeping the geojson with the original run json file in an object
• Generating SVG at build from geojson object using d3 CSS svgs from geoJSON
• Animating with CSS and IntersectionObserver
  • Issues with stroke-dasharray and stroke-dashoffset, especially with duplicate or close coordinates
  • Once the coordinates were cleaned up, I didn't need to hack anything
  • When I stopped to rest, the GPS coordinates were the same
  • Animation speed based on mph for variability