Yesterday, I learned about sparklines — “data-dense graphics with typographic resolution that is shown inline and in-context with relevant text.”
When thinking about how I could use sparklines in an original way within my personal website, I thought they would be interesting to convey properties of sports activities. One could add the elevation profile of a course , or a heart rate curve ❤ {22,17,27,37,32,27,37,32,27,22,32,27,37,32,27,37,47,42,52,47} and power output ⚡︎ {22,17,27,37,32,27,37,32,27,22,32,27,37,32,27,37,47,42,52,47} over time, as a sparkline within a blog post about a race.
With the help of Sparks, which is a typeface for creating sparklines in text, this was implemented quickly:
{{< sparkline class="bar-medium" color="darkgreen">}} 🏔️ {22,17,27,37,32,27,37,32,27,22,32,27,37,32,27,37,47,42,52,47} {{</ sparkline >}} {{< sparkline class="dotline-medium" color="crimson">}} ❤ {22,17,27,37,32,27,37,32,27,22,32,27,37,32,27,37,47,42,52,47} {{</ sparkline >}} {{< sparkline class="dotline-medium" color="purple" >}} ⚡︎ {22,17,27,37,32,27,37,32,27,22,32,27,37,32,27,37,47,42,52,47} {{</ sparkline >}}In the future, I’d like to use actual data from intervals.icu for these sparklines.