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 if this talk is to help developers build sites such as the Cockpit view of a magazine’s web-counter 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 - Graphics Press) while exploiting the available effects to best advantage.
The first thing any developer needs is a good set of defaults, and software that can make sensible assumptions. From the beginning (back in 1989) GraPL has worked from the basis that
grapl.LineGraph my_array should do something reasonable. Yes, of course you might want detailed control of axes, tickmarks, labelling and so on. Most people would much rather have the graphing engine do this for them. The same should be true when you want to add hyperlinks to chart data - all the developer should need is a matching array of links, and the engine should do the rest. With SVG the mechanics of making the links is greatly simplified, but if the numbers and links are the result of a database query there is still some tricky programming to be done.
When the user sees what is possible with SVG, he/she will soon be asking the developer for gradient fills, semi-transparent fitted surfaces, and maybe even animations. Of course these can just be spurious decoration, but one of the objectives of this paper is to show how - used well - they can add significantly to the readability and data-content of the finished chart.
Specifically, this paper will cover:
All the charts shown have been built with our GraPL toolkit, but the approach and ideas should be of general interest, and any SVG-specific techniques will be included in the published material for developers to include in their own applications.