Zach’s ugly mug (his face)

Zach Leatherman

Every Fire Needs a Sparkline

September 13, 2021

The Eleventy API ecosystem is growing. It started with a screenshot service. Now, we have a very simple service to generate SVG images for sparklines. This is using the sparkline-svg package from CharlesStover’s AvatarCharlesStover.

My version is running on https://v1.sparkline.11ty.dev/ using the same versioning via Netlify Branch Subdomains strategy as the screenshot service.

URLs support the following formats:

/[height]x[width]/[values]/
/[height]x[width]/[values]/[color]/

Deploy your own

Deploy to Netlify

Demos

Sparkline representing frequency of posts on zachleat.com written from 2007 to 2021 Sparkline representing frequency of posts on zachleat.com written from 2007 to 2021 Sparkline representing frequency of posts on zachleat.com written from 2007 to 2021 Sparkline representing frequency of posts on zachleat.com written from 2007 to 2021

You can also view this on the sidebar of this very website (at larger viewport sizes).

Generating the values from an Eleventy collection

eleventyConfig.addLiquidFilter("getYearlyPostCountList", (posts, startYear = 2007) => {
let years = [];
for(let year = startYear; year <= (new Date).getFullYear(); year++) {
let count = posts.filter(function(post) {
return post.data.page.date.getFullYear() === parseInt(year, 10);
}).length;

years.push(count);
}
return years.join(",");
});

via source code on zachleat.com

Usage:

<img src="https://v1.sparkline.11ty.dev/120x30/{{ collections.posts | getYearlyPostCountList }}/" width="120" height="30" alt="Frequency of posts written every year on zachleat.com">
Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like IndieWeb Avatar for https://jamstackconf.com/Jamstack Conf,btconf’s AvatarBeyond Tellerrand, IndieWeb Avatar for https://smashingconf.com/Smashing Conference,CSSConf’s AvatarCSSConf, and IndieWeb Avatar for https://www.whitehouse.govThe White House. He is an emeritus of IndieWeb Avatar for https://www.filamentgroup.comFilament Group, nejsconf’s AvatarNEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
IndieWeb Avatar, yet another Eleventy Image Service API
Next
Two Million npm Downloads for Eleventy
21 Likes
Chris BurnellEric ☕️ 🐟 💻Charles StoverAdebiyi AdedotunArpit BatraSteve LeeHéctor AguilarEric WallaceAna RodriguesbertrandkelleramberleyJon KupermanMWDelaneyNetlifyJoshua YoesLuke (he/him) Stressed af 💉💉Mark BoultonJens Oliver MeiertPelle WessmanWiley WigginsDavid Boyne 🚀
1 Mention
  1. Bramus! https://www.bram.us/author/bramus/ #

    Zach Leat recently created a cloud function that dynamically generates sparklines. Under the hood sits the the sparkline-svg package to generate the SVG. The datapoints themselves can be passed in via the URL. Image URLs have the formats: /[height]x[width]/[values]/ /[height]x[w… Truncated

Social Card Image Preview

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)