The SVG::Sparklines Perl Module

G. Wade Johnson

What are Sparklines?

Edward Tufte is an expert in information design (who incidentally would probably complain that I'm using slides for this). In his book, Beautiful Evidence, he suggested proposed the concept of a sparkline as an intense, simple, word-sized graphic that could be embedding in-line in text.

Part of the idea was to be able to convey graphical information along with explanatory text in a way that does not require as much of a context shift.

Why Build SVG::Sparkline?

Sparklines have been pretty popular and many people have implemented tools to generate them in many languages. In some cases, the tools are just wrappers Around normal graph drawing tools to make small graphics.

Looking around on CPAN, you can find a number of graph/charting modules using almost any conceivable graphics technology. It might seem that there is no real need for another. In fact, there's even a sparklines module that uses the GD graphics library.

So Why Did I Build It?

The problem with most of the graphing libraries I've found is an impedance mismatch between the goals of the library and the sparkline concept. Sparklines are supposed to be word-sized and simple. Most graph libraries excel at larger graphics with lots of bells and whistles. Even if you could scale the graph down to be word-sized you normally can't get rid of the extras, like axes and legends.

More importantly, normal graph packages tend to lead you toward more bells and whistles, because they are available.

SVG::Sparkline Usage

    my $svg = SVG::Sparkline->new(
        Line => {
            -nodecl=>1, 
            values=>\@temps, thick=>2,
            mark=>[high=>'red',low=>'blue']
        }
    );

Assuming we have a list of temperatures in the array @temps, this code generates a sparkline line graph, with a 2-pixel thick line. The high and low values from the graph are marked with colored dots.

Example Output

The result is a sparkline showing the daily high temperature for the month of April 2009 in Houston. The high of 86° F is marked with a red dot. The low of 44° F is marked by a blue dot.

Here is the sparkline in its natural habitat, embeded in text. As you can see, the markers serve simply as callouts for the text and are not intended to stand out much on their own.

Gallery of Options

To test the different configurations, I built a gallery of the variations.

As I was developing the library, I had unit tests to make sure I was generating the expected SVG output. But, I still needed to see the output to know whether or not I was getting a good visual effect. I put together variations of this gallery to see each of the supported types with different configuration options, so that I could see the results.

Issues

Probably the hardest part of developing this library was limiting the features I planned to support. I've already had people ask that I extend the library to support features that they want. In each case, I have to consider the request in light of Tufte's definition of a sparkline.

I would like to explore how well the library would work generating printable sparklines. One of Tufte's suggestions was that sparklines would be particularly useful in print media, because of the much higher resolution of print relative to computer screens.

References

notes