Sparklines

Always been a big fan of Edward Tufte’s sparklines, so when I saw this today 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)
}