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 Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS 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

1 Retweet

Bramus!

21 Likes

Chris BurnellEric ☕️ 🐟 💻Charles StoverAdebiyi AdedotunArpit BatraSteve LeeEric WallaceHéctor AguilarAna RodriguesamberleybertrandkellerJon KupermanMWDelaneyJoshua YoesNetlifyMark BoultonLuke (he/him) Stressed af 💉💉Pelle WessmanJens Oliver MeiertWiley WigginsDavid Boyne 🚀
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)