Zach’s ugly mug (his face)

Zach Leatherman

Every Fire Needs a Sparkline

September 13, 2021 #17 Popular 11ty

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 Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
IndieWeb Avatar, yet another Eleventy Image Service API
Next
Vector? Raster? Why Not Both!
20 Likes
Eric ☕️ 🐟 💻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)