ben tsai

Sparklines

Posted in Uncategorized by bentsai on June 6, 2008

My friend Erik sent me some biostatistical data that he has been tracking over past few weeks. I decided to see what it would look like as a sparkline. There are a bunch of libraries and web services to generate these things, and I tried to find the simplest one implemented in Python. I found Matthew Perry’s module, installed PIL, and I was good to go. (I made a slight change to spark.py to expose the background color of the image as a parameter so the graphic would match my current theme.)

More data to visualize: I’ve been recording my gas mileage information since November, 2006. We can also note that gas prices have been steadily climbing since then (low: $2.10, high: $4.26). The simplicity and attractiveness of these graphics make them particularly compelling. I can think of a few places where using sparklines would be useful…

Tagged with: ,

4 Responses

Subscribe to comments with RSS.

  1. erik said, on June 6, 2008 at 11:29 am

    It might be neat to anti-alias and match the image height to the line heights. It seems like one of the nice things with sparklines is that they are non-abrasive and don’t demand more attention than they deserve.

  2. bentsai said, on June 6, 2008 at 11:40 am

    Good suggestion. I’d have to dig into PIL to see if it’s possible to do some anti-aliasing. Is there a way to correlate line height with number of pixels (i.e., how do I calculate how tall to make the graphic so it matches the line height?)

  3. erik said, on June 6, 2008 at 3:11 pm

    Well, it looks like the line-height is 1.75em and the font-size 11px, so the line-height is 19.25px. You could make the height for the image 19px. You will also have to adjust the vertical-align of the image to bottom. I am not too crazy with the images dipping below the base line, but i think it might be better than having uneven line heights.

  4. bentsai said, on June 6, 2008 at 10:51 pm

    Nice, thanks. I made the adjustment. You are the web-wizard.


Leave a Reply