The Power of the Chart in the User Interface

Making Effective Use of SVG Techniques in Business Graphics

Keywords: Business graphics, Charts, Timeseries, Web services, GraPL, Drilldown, Lighting, 3D Filters

Adrian Smith
Director
Causeway Graphical Systems Ltd
7 Castlegate, Malton
North Yorkshire YO17 7DP
UK
adrian@grapl.com
http://www.grapl.com

Biography

Adrian worked in Operations Research for nearly 20 years before co-founding Causeway as a consultancy to work with SAP on user-interface design. Since 1994, he has taken an increasing interest in devising an effective set of programming tools for generating high-quality graphics direct from input data. The advent of SVG has been a great step forward, and has opened up several new areas of interest and research, some of which are explored in this paper.


Abstract


To understand data, you need to visualize it, which generally means some kind of graph. SVG is a superb tool for drawing lines and positioning text, but to get from arrays of numbers to effective web-based business graphics can still take a great deal of effort. The object of this talk is to help developers build sites such as our Cockpit view of a magazine’s web-counter (at http://ml.causeway.co.uk/) with a good understanding of where best to exploit the graphics effects that SVG makes possible.

The challenge for the designer is to stay in tune with Tufte’s principles (Minimize non-data ink, just show the data, ... see The Graphical Presentation of Quantitative Information [TUFTE] ) while exploiting the available effects to best advantage.

There are plenty of good tools out there to allow the designer to make the chart as a freehand drawing, or to enliven a generated graphic. GraPL aims to automate the production process by allowing the web programmer to move directly from data to the finished chart with no manual intervention. This kind of automation is becoming increasingly essential as more and more customers are demanding charts generated in real time from live data.


Table of Contents


1. Background, and a Little History
2. Building Charts from Live Data
     2.1 A Simple Timeseries (the Playfair Plot)
     2.2 Using Animation to Make a Political Point
     2.3 Adding Links for Graphical Drilldown
     2.4 Summary
3. More SVG Capabilities and Design Ideas
     3.1 Using Transparency in 3D Plotting
     3.2 Gradient Fills and 3D Filters
     3.3 Summary
Bibliography

1. Background, and a Little History

The GraPL ‘engine’ originally had exactly one user – myself. The first prototype was started late in 1989 when my son was given a weather-station as a present at Christmas. I had seen a very nice rainfall chart in Tufte’s original book, and naturally I wanted something similar. In particular, I wanted to show the daily rainfall as well as the monthly totals, and I wanted the time axis to represent the months correctly:

rain2003.svg

Figure 1: Rainfall for North Yorkshire in 2003

This really is a very simple graphic, but even today you will struggle to find a software package that can space those monthly tickmarks at irregular intervals. As screen resolutions improve, and SVG gives the user the capability to zoom in on an interesting month, little things like this become much more important.

Of course, SVG gives the designer scope to have a lot more fun, for example:

zones.svg

Figure 2: 2002 Temperatures Showing Comfort Zones

This is the point where you should stop and ask yourself “Am I just doing this because I can?”. Does the addition of those coloured bands actually add to the readability of the graphic? Certainly it adds to the visual interest, which might make someone look at it, and maybe that is all you want. It is often a hard line to draw, and the remainder of this paper explores some of the boundaries with a lot more examples. These have all been saved from the sample files shipped with GraPL (desktop), and they can all be easily reproduced (with minor variations) by downloading the trial version from http://www.grapl.com/download.

2. Building Charts from Live Data

This section of the paper is designed to give a very brief introduction to the way GraPL works – just enough to make sense of the SVG-specific possibilities that follow.

2.1 A Simple Timeseries (the Playfair Plot)

The first thing any developer needs is a good set of defaults, and software that can make sensible assumptions. From the beginning GraPL has worked from the basis that grapl.LineGraph my_array should do something reasonable with tickmarks, labelling and so on. Detailed control can come later. Here is the XP approach (see extreme Programming explained [XP] ) to a timeseries chart:

    double[] arr_Year = {1688,1701,1714,1727,1739,1748,1755,1762,1775,1784};
    double[] arr_Debt = {0.2,1.3,3.2,2.4,2.1,3,2.2,4.8,4.4,9.2};
	
    grapl.Heading = "Interest of the NATIONAL DEBT";
    grapl.Versus = arr_Year;
    grapl.Style = "Lines,Surface";
    grapl.Linegraph(arr_Debt);

Incidentally GraPL can be passed many script formats (obviously including XML) – the examples here are shown in C# source code, which seems to be the simplest and clearest code format. The chart which is generated is nowhere near as pretty as Mr Playfair’s 1760 original, but it does show that you can start from a very simple set of chart specifications, and then work from there to make the chart look just how you want it:

playfairxp.svg

Figure 3: The 1760 Playfair Chart with Default Settings

You can refer to the tutorial section on the GraPL website for a step by step guide to the properties which you can modify to approach the original look-and-feel of this pioneering political graphic. However a brief scan through the script should be adequate to show the basic ideas:

   // ======== Playfair - close to the real thing! ========
    grapl.NewFrame(0,0,432,300);
    grapl.FrameStyle = "Wiped,Boxed";
    grapl.Margins = new double[] {24,36,12,24};
    grapl.Heading = "Interest of the NATIONAL DEBT from the Revolution";
    grapl.HeadingFont = "TII,12,Navy";

    grapl.Versus = arr_Year;
    grapl.Style = "Lines,Surface,Values";
    grapl.ValueTags = arr_Event;
    grapl.ValueFont = "TII,6,Maroon";
    grapl.ValueStyle = "Vertical";
    grapl.Axes = "Black,1,Solid";
    grapl.LabelFont = "Times,8,Black";
    grapl.CaptionFont = "TII,9,Black";
    grapl.XCaption = "The Bottom Line is Years, those on the Right Hand Millions of Pounds";
    grapl.XStyle = "Grid,Centre";
    grapl.XTickmarks = arr_Year;
    grapl.YRange = new double[] {0,20};
    grapl.YDatum = new double[] {10};
    grapl.DatumlineAttr = "Gray,Solid,0.6";
    grapl.YStyle = "Grid,Right";
    grapl.YTickmarks = new double[] {1};
    grapl.Linegraph(arr_Debt);

    grapl.NoteStyle = "Transparent";
    grapl.NoteFont = "TII,10,Black";
    grapl.Note("INTEREST OF NATIONAL DEBT",1720,0.6);
playfair.svg

Figure 4: The 1760 Playfair Chart in Original Style

So what could we do with SVG to make this excellent graphic just a little better visually? Oddly enough, the original would have been hand-coloured after printing (by a water-colour artist) and the surface shading would tend to be slightly transparent:

playfair2.svg

Figure 5: The 1760 Playfair Chart with Transparency

With SVG the change to the script is almost trivial (add a line saying grapl.Patterns = "30% opaque";) and the byte-count of the final graphic hardly changes. It just looks a little more authentic.

2.2 Using Animation to Make a Political Point

When Playfair first drew his chart, he made it much taller and ranged the Y-axis to 10 rather than 20. Why? Because it emphasised the excessive government borrowing to pay for the American War of Independence. Later on, he toned it down to the more sober style shown above, possibly after a quiet hint from his political masters. But what if you want to make political points with a chart? Playfair only had the printed medium to work with; today’s web offers us many more possibilities, and animation is something else we can add to good effect. Have a look at this one (select View SVG if you are reading this online, to make the animation rerun):

carbon.svg

Figure 6: Animation in a Simple Political Graphic

GraPL does a few things to make life easy for you here, the main one being to allow the same animation definition to apply to an entire group of bars:

grapl.DefineEffect(42,"<animate attributeName="width" from="0" to="&width" dur="5s" fill="freeze" />");
grapl.DefineEffect(43,"<animate attributeName="width" from="0" to="&width" dur="12s" fill="freeze" />");
grapl.Effects = "42,43";

Actually, the example uses two similar animations, as it works best if the US bar grows really slowly across the screen, giving the presenter plenty of time to talk over it, and raising the suspense-level of the audience! However, the idea should be clear enough – SVG effects are handled by GraPL just like fill patterns and dash-repeats. You set up a cycle of effects (which can do anything your SVG designer wants) and have GraPL apply them to each group of data as it comes around. Where it makes sense to refer to the final value of a property (width or height for bars, opacity for labels and so on) you can give a placeholder for it in the effect definition, and GraPL will generate the correct animation for each element. As you can guess, for a complex chart this saves a lot of work.

2.3 Adding Links for Graphical Drilldown

Anyone who has wrestled with image maps must have thrown their hat in the air on first meeting SVG. The natural front-end chart for any kind of drilldown is generally a piechart, and pie-wedges can only be mapped (as a poor approximation) by a carefully computed polygon. With SVG, the developer can associate a hyperlink with almost any graphic element, so using charts as part of a web-based application front-end is almost trivial. Here is a simple example which links to three websites from the three pie sectors:

aplbase.svg

Figure 7: Adding Hyperlinks as Attributes of Data

The C# source code to build this example can also be driven completely from the input data:

    string[] arr_APL = {"Dyalog","IBM APL2","APLX"};
    string[] arr_Website = {"http://www.dyalog.com", ... };
    double[] arr_Userbase = {1234,876,543};

    grapl.NewFrame(0,0,432,324);
    grapl.FrameStyle = "Wiped,Boxed";
    grapl.Margins = new double[] {48,0,18,18};
    grapl.Heading = "Leading Array-language Interpreters Worldwide";
    grapl.Subhead = "Click on the sectors for more detail";
    grapl.Footnote = "Please note that this is totally fictitious data;Only the websites are real!";
    grapl.Patterns = "Solid";
    grapl.Style = "Values,plain";
    grapl.XLabels = arr_APL;
    grapl.Hyperlinks = arr_Website;
    grapl.EdgeAttributes = "White,Solid,2";
    grapl.ValueStyle = "Inside";
    grapl.ValueFont = "ARB,14,Yellow";
    grapl.ValueFormat = "#,##0";
    grapl.LabelFont = "ARB,15,Black";
    grapl.Pie(arr_Userbase);

There is an example of this approach in action on the Causeway site at http://www.causeway.co.uk/demos/svg/climate/rainview.htm where over 10 years of daily rainfall and temperature data can easily be explored entirely with SVG click-through.

2.4 Summary

GraPL is an evolution of a programmer’s tool which has been used over many years to produce high-quality publications directly from input data. In the past, the only suitable rendering technology was PostScript, and usually that implied paper as the final output medium. Now that SVG is available to render the results, charts can be designed for viewing on-line, and the intrinsic capabilities of the web can easily be integrated. The final section of this paper looks at some of the more interesting capabilities that are specific to SVG, and are likely to dominate design thinking as paper is slowly overtaken by digital media.

3. More SVG Capabilities and Design Ideas

3.1 Using Transparency in 3D Plotting

One very simple use of SVG’s opacity capability is to show a fitted surface through a 3D scatter of height data. This looks much better than a simple mesh surface, and makes it much easier to see which points are above and below the fit.

trend.svg

Figure 8: Using Opacity to Show a Fitted Surface

It is also good to have the radial gradient for the markers here – this is a very cheap and effective way to add a simple 3D effect. Maybe one should mention in passing that this is one style of chart where the byte-count of the SVG version can easily exceed a compressed image format (such as PNG). This is because each tile on the surface must be individually drawn (the surface could fold) and the number of tiles can quickly become very large.

    double[] Trend_X = {1,83,14,48,9,67,87,11,53,57,22,88,49};
    double[] Trend_Y = {24,56,41,79,46,45,63,25,13,67,55,27,66};
    double[] Trend_Z = {240,11646,2023,12927,1744,7192,14367,878,1043,11499,4266,4153,10053};
    grapl.NewFrame(0,0,432,324);
    grapl.FrameStyle = "Wiped,Boxed";
    grapl.Margins = new double[] {42,36,32,12};

    grapl.Markers = "14";
    grapl.Patterns = "18% opaque";
    grapl.Style = "XYPLot,Walls,Gridlines,Markers,Risers,Trend,Tiled,Contour";
    grapl.Heading = "Trend Surface with Contours";
    grapl.Density = 1;
    grapl.ContourAttributes = "Red,Solid,2";
    grapl.Viewpoint = new double[] {37,13,50};
    grapl.Cloud(new double[][] {Trend_X,Trend_Y,Trend_Z});

Ideally you would like to let the user control the viewpoint here, but SVG is a strictly 2-dimensional rendering tool, so this can only be done with a round-trip to the server to have a fresh projection made from the internal (fully 3D) representation of the chart. Pity!

3.2 Gradient Fills and 3D Filters

One of the paradigm-shifts the chart designer has to make when moving from paper to a visual display is that he/she is now painting with light, not with ink. That generally means using brightly coloured data on a dark background, for example:

interest.svg

Figure 9: Effective Use of Lighting to Emphasise Data

Here a very dark background is defined with a simple radial fill to give a spotlight effect. By careful co-ordination of the light position with the 3D filter on the line, it is possible to give a very nice illusion of depth. Obviously the value of this in reading the data is hard to judge, but I hope you agree that at least it does not detract from the utility of the chart!

   <radialGradient id="gentlelight" gradientUnits="objectBoundingBox" fx="0.2" fy="0.15">
     <stop offset="5%" style="stop-color:Blue"/>
     <stop offset="90%" style="stop-color:#004"/>
   </radialGradient>

The filter is referred to by its id in the GraPL script as grapl.DefineTile(17,"#gentlelight"); and the definition is written into the completed SVG file in a <defs> block at the start of the file. One word of warning here – this chart takes nearly 2sec to render on a Pentium 400MHz computer. As soon as you start applying lighting to significant areas of the artwork, the processing load on the SVG viewer increases massively. If fast response is important, effects like this may be better ignored, or at least made optional for the user.

A much simpler filter will give the effect of shadowed text, which is shown here with 75% opacity to allow the spotlight to shine through the headings:

opacity.svg

Figure 10: Lighting Combined with Shadowed Text

    <filter id="MyShadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="12" result="blur"/>
      <feOffset in="blur" dx="24" dy="20" result="offsetBlur"/>
      <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

Of course almost any of these effects can be animated, so the headings can slide across, the value labels can fade-in and so on. Probably these embellishments are best left to PowerPoint addicts, and we should concentrate our design efforts around Tufte’s maxim “Just show the data”. At least with SVG the power is there if you need it.

3.3 Summary

GraPL provides the programmer with a set of simple tools for converting input data into a wide variety of charts. With a few new properties and methods it has been possible to open up the full range of SVG animations and effects to the inventive chart designer. The basic idea is that it should do the simple things for you, but should not limit your imagination when it comes to the need to develop an eye-catching product. Please try it out and tell us how to make it better.

Bibliography

[TUFTE]
The Graphical Presentation of Quantitative Information - Graphics Press 1979
[XP]
extreme Programming explained - Kent Beck, Addison Wesley 2000 ISBN 201-61641-6

XHTML rendition created by gcapaper Web Publisher v2.0, © 2001-3 Schema Software Inc.