---
title: Sparklines
date: 2023-07-10T14:46:04Z
modified: 2023-07-10T15:06:36Z
permalink: "https://dogwonder.co.uk/2023/07/sparklines/"
type: post
status: publish
excerpt: ""
wpid: 4711
categories:
  - Code
featured_image: "https://dogwonder.co.uk/wp-content/uploads/2023/07/Screenshot-2023-07-10-at-16.06.25.png"
---

Always been a big fan of Edward Tufte’s sparklines, so when I [saw this today](https://alexplescan.com/posts/2023/07/08/easy-svg-sparklines/) I had to have a go.


```
<svg height="180px" width="500px" viewBox="0 0 9 15" preserveAspectRatio="none">
  <path
    d="M 0 14 L 1 15 L 2 10 L 3 11 L 4 7 L 5 5 L 6 0 L 7 5 L 8 10 L 9 11 L 9 15 L 0 15 Z"
    stroke="transparent"
    fill="pink"
  />
  <path
    d="M 0 14 L 1 15 L 2 10 L 3 11 L 4 7 L 5 5 L 6 0 L 7 5 L 8 10 L 9 11"
    stroke-width="2"
    stroke="red"
    fill="transparent"
    vector-effect="non-scaling-stroke"
  />
</svg>
```

Really neat. I thought I would have a little play so I could easily replicate in code, via nunjucks / 11ty.

Which ended up as:


```
{%- set yPos = [14, 15, 20, 11, 30, 5, 0, 5, 10, 11] -%}
{%- set yPosLength = yPos|length - 1 -%}
{%- set yPosMax = yPos|max -%}
{%- set fill = 'L ' ~ yPosLength ~ ' '  ~ yPosMax ~ ' L 0 ' ~ yPosMax ~ ' Z' -%}

<svg height="180px" width="500px" viewBox="0 0 {{ yPosLength }} {{ yPosMax }}" preserveAspectRatio="none">
<path class="fill"
    d="{% for y in yPos %}{{ 'M' if loop.first else 'L' }} {{ loop.index0 }} {{ y }} {{ fill if loop.last else '' }}{% endfor %}"
    stroke="transparent"
    fill="#ff8ec6";
/>
<path class="outline"
    d="{% for y in yPos %}{{ 'M' if loop.first else 'L' }} {{ loop.index0 }} {{ y }}{% endfor %}"
    stroke-width="3"
    fill="transparent"
    vector-effect="non-scaling-stroke"
    stroke="#000000"
/>
</svg>
```

I did have to create a little 11ty filter for the yPos|max bit but that was pretty straightforward


```
max: function (arr) {
    return Math.max.apply(null, arr)
}
```