Tech Life Pure Visual Eye Candy

Edward Tufte is Not Dead

I’ve had a copy of Edward Tufte’s Visual Display of Quantative Information sitting on my desk for years. It’s one of those rare books you pick up every nine months and just wander about… pure visual eye candy.

Tufte’s content strikes such a classic note with me, I remain convinced that’s he’s dead because it’s generally known that to achieve greatness… you’ve gotta kick the the bucket. Well, Tufte isn’t dead. In fact, he’s so not dead, he’ll continues wandering the planet pitching his information design ideas.

One recent Tufte development is the aptly named Sparkline. Sparklines are “intense, simple, work-size graphics”. They are graph-life representations that are designed to sit along plain-text in order to convey complex meaning. An example:

Stock performance for Tivo has been pretty flat for the past few years while both Adobe and Apple appear to be kicking some ass.

Still confused? Go read the chapter.

More good news. James Byers has created a PHP graphing library specifically for Sparklines. Note to self: Incorporate this idea in future weblog designs.

#

7 Responses

  1. Buzz Andersen 20 years ago

    del.icio.us was using sparklines for popular links for awhile, until Joshua got rid of them (due to server load or something?).

  2. lana 20 years ago

    two weeks ago when home sick with the flu, in between feverish hallucinations, I read almost the entire edward tufte website while laying in bed. pure genius. hallucinations were much more easily interpretable afterwards.

  3. Andrew 20 years ago

    I read the chapter on Sparklines, and I couldn’t figure out one thing: In those mini line graphs (stocks, glucose levels, etc) where’s the zero line? Without some scaling reference, those little stock graphs are… um… less than useful.

    In the glucose level sparklines he showed the “normal zone” with a grey bar, which does provide the scale. I don’t see how the same thing could be accomplished for a variable that doesn’t have a normal zone – for example, anything that exhibits growth behavior (stocks, weblog hits, etc).

  4. prosolution 20 years ago

    Excellent Post, you have a nice writing style. Ive been running through blogs all day now, I think I wanna get my own started. Hopefully itll look like this someday. Just got to get off my ass 🙂 

  5. Bryn Davies 20 years ago

    When I read this, I felt a little blood vessel pop in the back of my mind. A little while later, I had a set of Javascript functions to write these graphics in SVG ( I wrote it at the office, so it might seem a little disjointed ).

    You’ll need a browser with proper SVG/SVG DOM to get away with this. I don’t know if Adobe’s plugin does, but I can confirm it works with the Firefox nightly builds ( Deer Park Alpha 1 – Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b2) Gecko/20050607 Firefox/1.0+ ).

    sparklines.js – please copy it to your own hosting if you want to use it.

    Usage is something like this – var newImageB = dataToBinarySVG( ([ 0,1,0,1,1,1,1,1,4,4,0,1,0,0,0,0,1,0,1,0,1,0 ]), emSize );, etc. This gives you a DOM SVG object you can then, say, appendToChild() on a container object. I originally wanted to use this in a Greasemonkey script to dynamically insert Sparklines into other sites, but sadly Greasemonkey doesn’t work in the latest Firefox nightly builds.

    I confess I read Tufte’s comments on scaling of the vertical axis to maximise pattern detection, but I haven’t implemented this. Yet.

    Cheerio!

  6. oimywu 18 years ago

    Hi, I have been looking for sites like this for a long time.

    Good luck.

  7. oimywu 18 years ago

    Hi, I have been looking for sites like this for a long time.

    Good luck.