(archive 'newLISPer)

February 28, 2008

Tufte sparklines in newLISP

Filed under: newLISP — newlisper @ 21:22

That’s a weird headline! At least, it is if you’re not into infographics. If you are, though, you’ll probably already know what I’m going to write about. For the uninitiated, you can read a good introduction at Edward Tufte’s site.

A sparkline is a little word-sized graph that shows a trend or sequence. Because our brains are so good at reading lower-case words, they also find it easy to absorb data trends if the information is represented in a wavy word-sized graphic – a sparkline. For example, this sparkline

shows the changing size of the posts in this blog over time. And this one shows the time between each post since I first started in December 2006. Even though I haven’t labelled the axes or provided additional information, you can easily pick out a message from the data – if there’s a message to pick out. At least, that’s the theory behind sparklines. I’ve been playing around with sparklines for fun, using newLISP. Here are my thoughts so far.

At first I assumed that the best way to draw sparklines would be to generate an SVG sparkline and embed it into the HTML. After all, SVG is a standard vector format using standard XML, and it should display well in all web browsers that follow current standards. Unfortunately, the standards guys have apparently painted themselves into a corner on this one, because XML isn’t compatible with HTML (or XHTML) to the extent that you can just put one inside the other. One of the possible solutions is to change the way pages are served to browser clients, so I decided to try another approach.

Another drawback with the automatic generation of graphs from data is that you don’t get a chance to play with your graph before publishing it. Sparklines, like anything else, can benefit from a little tweaking to make them look just right.

Here’s my first attempt at a rudimentary Sparkline generator running in newLISP-GS:

At the top, there’s the data-entry text box. Anything can be typed in here – non-numeric material is filtered out. This means that you can paste in comma-separated lists as well as plain newLISP-style lists. (This batch of numbers shows the “Coefficients of the ‘3rd order’ mock theta function phi(q)” from the strange and wonderful On-Line Encyclopedia of Integer Sequences.

Next, there’s the sparkline. The width of this sparkline ‘canvas’ changes according to how much data you input. There is, though, a limit to how much data can be plotted; in a 300 pixel wide window there’s room for a 300 element set. That’s probably enough for most sparklines. If you want more, you can edit the script to give you a wider window and canvas – but if you do, all the controls will move…

Below is a plethora of sliders … probably too many. The top one changes the height of the sparkline canvas, so you can squeeze it down to 14 pixels and fit it easily into text. The checkbox at the bottom shows the location of the x-axis.


Leave a Comment »

No comments yet.

RSS feed for comments on this post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: