SVG Sparklines 2016-04-18

At IndieWebCamp Nürnberg this weekend, Jeremy added sparklines for his site's posting frequency. To do this he used Stuart's SVG sparkline generator (improving on previous efforts). Here's an example:

I'm enough of an SVG fan to have made svgur.com to share them, so I was intrigued by this. I like the clarity of the data points being in the URL, but looking at the generated SVG, that clarity had gone. The point sequence 59,80,80,100 becomes instead

<line x1="0.49504950495049505%" x2="0.49504950495049505%" y1="39.1578947368421%" y2="39.1578947368421%" stroke="rgba(0,0,0,0.5)" stroke-width="1"/> <line x1="0.49504950495049505%" x2="1.4455445544554455%" y1="39.1578947368421%" y2="17.05263157894737%" stroke="rgba(0,0,0,0.5)" stroke-width="1"/> <line x1="1.4455445544554455%" x2="2.396039603960396%" y1="17.05263157894737%" y2="17.05263157894737%" stroke="rgba(0,0,0,0.5)" stroke-width="1"/> <line x1="2.396039603960396%" x2="3.3465346534653464%" y1="17.05263157894737%" y2="-4%" stroke="rgba(0,0,0,0.5)" stroke-width="1"/>

You can see that the original data has been transformed with high precision into percentages, and that each datapoint occurs twice as the start and end of a line. This made me wonder if the SVG could use the datapoints directly, as it is after all a sequence of co-ordinates. So I adapted the code to generate a polyline directly, giving:

Now the points 59,80,80,100 becomes a clearer

<polyline points="0,59 1,80 2,80 3,100" stroke="rgba(0,0,0,1)" stroke-width=".5%" fill="none" transform="matrix(1 0 0 -1 0 105)" />

Indeed, the whole line now looks like this:

<polyline points="0,59 1,80 2,80 3,100 4,68 5,62 6,87 7,72 8,42 9,49 10,58 11,53 12,57 13,51 14,42 15,32 16,37 17,30 18,24 19,38 20,57 21,29 22,18 23,32 24,38 25,24 26,24 27,24 28,20 29,21 30,29 31,32 32,26 33,18 34,32 35,36 36,30 37,36 38,29 39,32 40,29 41,28 42,41 43,20 44,28 45,58 46,18 47,24 48,16 49,17 50,22 51,17 52,22 53,21 54,12 55,22 56,14 57,13 58,11 59,20 60,16 61,16 62,18 63,12 64,28 65,28 66,32 67,16 68,16 69,24 70,16 71,20 72,14 73,18 74,12 75,26 76,17 77,11 78,30 79,16 80,9 81,20 82,42 83,13 84,13 85,24 86,17 87,13 88,20 89,12 90,14 91,13 92,14 93,71 94,82 95,20 96,16 97,20 98,22 99,17 100,5" stroke="rgba(0,0,0,1)" stroke-width=".5%" fill="none" transform="matrix(1 0 0 -1 0 105)" />

With the datapoints directly readable, and not changed to arbitrary precision.

To make this work, I had to do a little bit of mathematical trickery. I set the viewBox of the SVG to the bounding box of the co-ordinates (in this case viewBox="0 5 100 95" where 0 is the lowest x value, 5 the lowest y value, 100 the width and 95 the height) and set the stroke-width as a percentage of the viewport, so it isn't dependent on the scale of the datapoints.

So far so good, except that SVG co-ordinates go down the page, not up, so the sparkline is upside down. I need to invert the y axis. But if I do that, the line is outside the bounding box. So we need to move the line back into the frame by adding the height plus twice the lowest y value. Here's the javascript that does that:

var height = mx-mn; 
var width = x-1;
var offset = height+mn*2; // flip co-ordinates and move back into frame
ln.setAttribute("transform","matrix(1 0 0 -1 0 " + offset +")");
svgRoot.appendChild(ln);
svgRoot.setAttribute("viewBox","0 " + mn +" "+ width + " " + height);
svgRoot.setAttribute("preserveAspectRatio","none");

Now, I could just set the y value of the viewBox to -(height+mn*2) but I think that this is clearer.

Like Stuart's original, to use these dynamically you need to use <embed>: rather than <img>: eg

<embed src="http://kevinmarks.com/sparkline.svg?2,0,1,1,4,6,9,6,5,0,1,2,5,2,2,3,4,5,2,2,2,3,6,3,5,3,7,6,5,2,3,2," width="200" height="15">

See IndieNews