Every Fire Needs a Sparkline

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.
https://github.com/11ty/api-sparkline…


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

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.

https://github.com/11ty/api-sparkline

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">


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate Updates
APA

Zach Leatherman | Sciencx (2021-09-13T05:00:00+00:00) Every Fire Needs a Sparkline. Retrieved from https://www.scien.cx/2021/09/13/every-fire-needs-a-sparkline/

MLA
" » Every Fire Needs a Sparkline." Zach Leatherman | Sciencx - Monday September 13, 2021, https://www.scien.cx/2021/09/13/every-fire-needs-a-sparkline/
HARVARD
Zach Leatherman | Sciencx Monday September 13, 2021 » Every Fire Needs a Sparkline., viewed ,<https://www.scien.cx/2021/09/13/every-fire-needs-a-sparkline/>
VANCOUVER
Zach Leatherman | Sciencx - » Every Fire Needs a Sparkline. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/13/every-fire-needs-a-sparkline/
CHICAGO
" » Every Fire Needs a Sparkline." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2021/09/13/every-fire-needs-a-sparkline/
IEEE
" » Every Fire Needs a Sparkline." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2021/09/13/every-fire-needs-a-sparkline/. [Accessed: ]
rf:citation
» Every Fire Needs a Sparkline | Zach Leatherman | Sciencx | https://www.scien.cx/2021/09/13/every-fire-needs-a-sparkline/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts