Since I started playing with the GPX files and understood how data extraction works, I just couldn’t resist the idea of doing some data visualization, so I did some experiments and then went down the rabbit hole. I ended up creating a beautifully animated sparkline graph in SVG and CSS that shows the trends of various measurements.
It was pretty challenging but I enjoyed it very much, still one bug to solve before releasing it.
View on Venezia from Lido di Venezia on a rainy day.
I found a way to upload GPX files directly from Tina with a custom component thus bypassing their media gallery, which is great because it was a pain to every time transfer the file to the computer and manually push it. Since I can do that, I decided to go a step further and parse the GPX file immediately in CMS during activity creation instead of saving a path to the file and letting users parse it every time. This also enables me to do some cool analysis in the future.
The problem with parsing is most of the libraries are built for Node so I needed to do the parsing myself using DOMParser and create functions that can calculate a bunch of pieces of information all of which is new for me.
After understanding how GPX files are structured and how they work, I did a calculation for all kinds of nerdy stats, like:
The elevation is a few meters off in my tests because of GPS inaccuracy, and Strava is the only app that manages this very well, not sure how. I also tried also GPX Tracks app but the elevation is always off.
I’ll do some further tests and publish this new route version in the coming days.
