Various people in my feedreader have nifty graphics of their stuff on their sites. Sparkline graphs of their posting frequency of various types of content. In the words of Edward Tufte, sparklines are ‘word like graphs’ that can be used inline. I never really tried to find out how you make those sparklines. “View source”, the most important feature of any web browser, reveals it’s simple HTML5 using a vector image (SVG).

The data for the graph is declared as numbers. Such as d=”M0,20 0,16 1,17 2,20 3,15 4,19 5,20 6,15 7,17 8,13 9,19 10,20 11,15 12,12″ (the start of that data string sets the lower and higher end of the y-axis, and then the data points are given numbered from 0. Data point 0 has a value of 16, 1 of 17 etc. Kevin Marks wrote it up a few years ago. That gives sparkline graphics like the one below:

Now the next question is how to pull that data from somewhere and turn it into a HTML5 statement on the fly.