Geoffrey Dutton Spatial Effects 20 Payson Road Belmont MA 02478 USA dutton@spatial-effects.com
[Please wait for the page to load before clicking on links]
Paneled Stories: The Comic Strip
Next: Cartometry and Visualization
Diagrams such as figures 1 and 2 tell a story, but not in a sequential way. While they have logic to their organization, it isn't one of a sequence, but of an arrangement that correlates certain conditions and parameters. There is no linear unravelling of the entire set that uniquely conveys the meaning of the whole. But many SMGs do have a linear logic, and this implies that they could be laid out in a row, in which case they would read as a comic strip does. As would be true for a comic strip, permuting the order of panels would disrupt the narrative to some extent, and dilute the impact of the SMG, lowering its comprehensibility.
Such a narrative is shown in figure 4, taken from (Dutton 1999). Although it is a linear narrative, it is not formatted into panels, which would have been possible but would not have added any clarity and might have disrupted the viewer's flow of attention. The subject matter is the construction of line sinuosity statistics such as are referred to in figure 2. It would have been possible to break down the algorithm into simpler steps, in which case constructing a sequence of panels might have been useful.
When SMGs are used to tell a story -- which may go beyond explaining a procedure -- the comic strip is a useful format, assuming that expository "sentences" and "paragraphs" can be isolated, and appropriate, simple visualizations can be designed to depict them. For example, figure 5, below, is a 12-panel SMG that explain something about what positional error entails in geographic data handling. It is part of a larger narrative that looks at additional aspects of encoding geographic features. Nevertheless, the panels of figure 5 are designed to stand on their own as a unit, albeit one that requires a context to make sense.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In order to produce such SMGs, the subject matter must be well-organized into logical units, although it's possible to make nonlinear connections by inserting hyperlinks between individual panels and other material. The panels in figure 5 are each a separate GIF graphic, and an HTML table has been used to order them. There are several advantages to constructing the narrative such a modular way, as opposed to laying out the panels as one graphic image. One is that while client-side imagemaps can be defined to make each panel in a SMG a live link, it isn't possible to define parts of an image as HTML anchors. This means that defining hyperlinks between panels in two images is not possible the way it is when tables are used. Another advantage is that by making each panel a separate file provides more flexibility in how they can be organized, including sequencing them as an animation.
The SMG in figure 5 is fairly large, perhaps too
large to fit within a given browser window, and probably should have
been made smaller. An HTML document can specify how its images are to
be scaled, although implementing this mechanism is browser-dependent
and does not always yield handsome results. To show the possible
consequences of resizing source images on-the-fly, we reproduce
figure 5 below at 75% linear reduction, using the WIDTH= and HEIGHT= parameters of the
IMG
tag.1
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Scaling images dynamically leads to aliasing and other legibility problems. It is generally better to rasterize images at their intended size and resolution, although an author cannot know at what resolution a browser will display its images. In this document, all image files are created at 75 DPI, even though many monitors have higher resolution, and this may cause the images to shrink considerably on display. Aside from providing Java applets that dynamically generate graphics at an appropriate resolution (which at the moment is a rather blunt tool compared to illustration software), the only effective solution is to generate images at several resolution and allow viewers to specify the resolution they wish to use. This is often an option provided by maps-on-demand WWW sites, a few of which have been compiled for the reader's reference.
The panels in figures 5 were designed to read well at 75 DPI, and the space they occupy as an SMG was not really considered. This was because the story was intended to be viewed not as a comic strip but as an animation. In that mode, it only needs enough space to display a single panel. A rather straightforward way to produce such animations is to load them into frames of a client-side animated GIF. In addition to the color and resolution information encoded in static GIFs, a GIF in GIF89a format includes control blocks to specify frame durations and looping. While animated GIFs can be fairly large (50KB or more), they don't depend on server responsiveness once they have been loaded, and can be copied to disk for local display. There is also software available to compress GIFs (using LZ encoding) so that suitably-equipped browsers can expand them automatically.
|
The information in figures 5 and 6 is presented yet again -- this time as an animation -- in figure 7. The graphic to the right is actually a static GIF that links to an animated one that can be opened in its own window or replace the contents of the current one.It has been placed in its own HTML file to allow easier navigation back to where the viewer began. The animated version contains an extra panel. Can you spot it?
|
Setting up an animation is tricky, even with capable tools. The images shown here were made with an illustration package (Canvas) to compose the panels and save them as GIFs, and an GIF animation tool (GifBuilder) to time and sequence panels, and harmonize their palettes. A capable animation editor (such as Director) makes the mechanics of this process much easier, although artwork must usually be prepared separately, particularly when maps are involved. |
While the animation is not interactive, and the pace is set by the author, the viewer can replay it at will simply by clicking on it (in this example, each panel remains on-screen for two to five seconds, except for those that dissolve from one image to the next). It could be made somewhat interactive by providing an image map with hot spots, but the map would apply to the entire sequence, not to particular frames, and thus might create confusion were the viewer to click on objects that appear and disappear. It is possible to overcome such limitations by using server-side animations or applets instead of GIF89a images. Other approaches involve packaging animations as ShockWave graphics or QuickTime movies, which would allow addition of sound tracks. Many browsers are not equipped to handle such formats, at least not without calling on helper applications, which can cause a narrative to be disrupted.
Monmonier (1992), following (Gersmehl 1990), developed software to script map animations to facilitate EDA of correlations using choropleth maps and statistical charts. He describes elements of such graphic scripts in grammatic terms, particularly sentences and phrases. In figures 5-7 there are two sentences (despite the text being segmented into more than that): (1) the description of coordinate notation, and (2) the description of positional error. Each sentence is broken into several graphic phrases that more or less correspond with the phrases of the legend text. A phrase may last for more than one frame. The entire SMG can be considered as a paragraph, as it is designed to stand alone (of course some background information may be needed to place it in context and define terms).
Stories are built from paragraphs, and in the compact format that animations allow, a dynamic SMG can combine a number of graphic paragraphs into one screen. Of course, if all the panels of an SMG were animated at once, the combined action would be completely distracting to the viewer, and thus only one panel at a time should cycle. This is simple to do by preparing a separate HTML document for each panel, in which all panels are shown, but only one of them is allowed to move (because all the others are static GIFs). However, all the static panels act as live links to nearly identical documents, differing only in which panel is animated. The effect is to present a comic strip in which any panel clicked on tells its story, as figure 8 reveals. That graphic is a link to a master document that is a placeholder for five animations, collectively called QTM Comix. Each panel (including the title frame) is a separate paragraph in an exposition of what QTM is and what its utility is in handling geospatial data.
|
Each of the animations in the strip is a separate GIF89a image. There are in total, then, five animated GIFs and five static GIFs, which are referenced in different combinations by six HTML documents. Even though clicking a panel causes an entire HTML file to be downloaded, the browser should be able to avoid downloading the same image more than once, but this depends on its current caching policy and resources. |
The QTM Comix production is only a prototype at this time, and obviously can be improved. As viewers will note, the story ends abruptly; additional panels are planned to complete it. But it has sufficient content for viewers to judge how well such a format can work in communicating complex concepts. Readers' reactions to the content, appearance and structure of the presentation are welcomed. |
1Even though scaling images using HEIGHT and WIDTH tags is to be avoided, these parameters should always be present in IMAGE specifications. Explicitely idenifying image sizes to a browser allows it to lay out pages without having to wait for images to be transmitted, and thus the viewer will see the page faster, depending on the volume of image data.
Next: Cartometry and Visualization
|
|
|
|
|
|
Becker, R.A. and Cleveland, W.S. Brushing Scatterplots. Technometrics 29, pp. 127-142.
Douglas, D. and Peucker, T. Algorithms for the reduction of the number of points required to represent a digitized line or its caricature. The Canadian Cartographer 10:2, 1973, pp. 112-122.
Dutton, G. A hierarchical coordinate system for geoprocessing and cartography. Lecture Notes in Earth Science 79. Berlin: Springer, 1998. 230 p.
Dutton, G. Scale, sinuosity and point selection in digital line generalization. Cartography and Geographic Information Systems. 26(1), 1999, pp. 33-53.
Gersmehl, P.J. Choosing tools: Nine metaphors of four-dimensional cartography. Cartographic Perspectives. no. 5, pp. 3-17.
Monmonier, M. Time and motion as strategic variables in the analysis and communication of correlation. Proc. 5th Int. Symp. on Spatial Data Handling, Charleston SC, Aug 1992, pp 72-81.
Ramer, U. An iterative procedure for the polygonal approximation of planar curves. Computer Graphics and Image Processing 1: 1972, pp. 244-256.
Tobler, W. Resolution, resampling and all that. In: Mounsey, H. and Tomlinson, R. (eds.) Building Databases for Global Science. London: Taylor & Francis, 1988, pp. 129-137.
Tufte, E.R. The Visual Display of Quantitative Information. Cheshire CT: Graphics Press, 1983. 197 pp.
Tufte, E.R. Envisioning Information. Cheshire CT: Graphics Press, 1990. 126 pp.
Tufte, E.R. Visual Explanations. Cheshire CT: Graphics Press, 1997.
Tukey, J.W. Exploratory Data Analysis. Reading MA: Adison-Wesley, 1977.
