Visualisation of dynamic glacier processes with SVG animation

Keywords: SVG, SMIL, animation, glacial processes, dynamic visualisations, time controlling

Yvonne Isakowski,
Research Assistant
Institute of Cartography, ETH Zurich
Zurich
Switzerland
isakowski@karto.baug.ethz.ch
http://www.karto.ethz.ch/isakowski

Biography

Yvonne studied Cartography at the Universtiy of Applied Sciences Dresden (HTW Dresden FH), Germany. Since 2002 she is working with SVG (Scalable Vector Graphics) . She wrote her final thesis about "Animation with SVG as a visualisation method of spatiotemporal processes in glaciology" (http://www.karto.ethz.ch/isakowski/DA/report.pdf) at the Institute of Cartography, Swiss Federal Institute of Technology (ETH Zurich), with which she graduated in 2003. Currently she is working as a research assistant at the same institute.


Abstract


In Thematic Cartography dynamic visualisations simplify the understanding of complicated statistical data. For the visualisation of spatial and multidimensional processes of high mountain regions it is necessary to involve a temporal component in the cartographic representation. SVG 1.0, as a language for describing two-dimensional vector graphics, has the potential to present this dynamic aspect using animation. Thus, the goal was to use existing data to create dynamic cartographic visualisations of glacier processes with SVG 1.0. The suitability of SVG for such presentations and which problems and benefits SVG may cause is also to be discussed.

A critical evaluation of the dynamic presentations with SVG animation revealed that the generation of dynamic cartographic visualisations are generally possible. Yet, concerning the controlling of the temporal component, SVG / SMIL (Synchronized Multimedia Integration Language) combination was pushed to its limits, , which results in the incorporation of a scripting language. Scripting is also essential for the integration of map functions and instruments. Furthermore it became apparent that the impression of a smooth motion is impaired when animating too many objects at once. Since the entire animation is calculated and rendered in real time, computing power is sometimes pushed to the limits.

The final product is a user-friendly visualisation tool that allows the user to understand the spatiotemporal processes of the Gruben glacier using animation. General requirements for modern glacier presentations as well as cartographic design aspects were able to be implemented during the compilation of the tool.


Table of Contents


1. Motivation
2. Implementation
     2.1 Base Data
     2.2 Converting to SVG animation
     2.3 Cartographic design
     2.4 The visualisation tool
3. Results
     3.1 Animation: elevation change (absolute)
     3.2 Animation: elevation change (relative)
     3.3 Animation: surface velocity
     3.4 Animation: glacier extent
     3.5 Background topics: topographic map and orthophoto
4. Pros and Cons of Animating with SVG
     4.1 Interactivity
     4.2 Duration of an animation
     4.3 Time Controlling
     4.4 Smooth Motion
     4.5 Redrawing
5. Conclusion
Footnotes
Bibliography

1. Motivation

Spatiotemporal processes of glaciers consist of changes in the spatial and in the temporal components at the same time. Such changes and processes are called dynamic. Significant processes of glaciers are, for example, geometric variations, increasing and decreasing mass and ice flows. These processes result in permanent changes to the ice mass. For these reasons, Cartography must deal with a highly variable and essentially non-static area when visualising glacial phenomena. However, in the past, glacier processes and the associated variations were presented on a static medium contrary to their nature, that is, Cartography produced just a snapshot of the current situation. For example, you could comprehend dynamic changes of glaciers only by comparing a series of representations from different times. Therefore, glacial processes should be visualised dynamically in order to illustrate their ever-changing nature.

Scalable Vector Graphics is a language for describing two-dimensional graphics in XML (Extensible Markup Language) [SVG01] and provides us with many benefits regarding dynamic visualisations via animation. An animation is a sequence of several images with gradual changes whereby the changes following a logical context [DRA97] . When viewing this sequence at sufficient speed, the graphic objects in the images vary fast enough to get the impression of a motion picture. The usage of animation allows us to visualise spatiotemporal processes. In SVG 1.0 [1] , five basic animation elements are available [SVG01] :

The advantage of using SVG for animation is that the actual file size will not significantly increase because the animation parameters are stored as a simple text file.

The need for dynamic visualisation of spatiotemporal processes and the potential of SVG to realise animation has resulted in the following focus of this work: Generating dynamic cartographic visualisation of spatiotemporal processes using SVG animation. Furthermore, we wanted to analyse the suitability of SVG for such presentations in order to discover problems and difficulties as well as positive features concerning the usage of SVG . The test region of this work is the Gruben glacier in the Valais region, Switzerland. Nearly homogeneous, annual measurements from the area have been gathered since 1970, and hence forms an ideal base for generating dynamic visualisations of spatiotemporal glacial and high mountain processes. In the next section we will introduce the base data as well as the conversion of the base data into SVG .

2. Implementation

2.1 Base Data

Due to a wide range of natural disasters, the region around the Gruben glacier has been observed intensively. Outbursts of glacial lakes triggered debris flows towards the next village. Digital terrain models, surface velocity test series, glacier extent data and a digital IR (InfraRed) -orthophoto represent the data basis, which were gained through photogrammetric analysis using orthophotos [KAE96] .

2.2 Converting to SVG animation

These aforementioned data form the basis for generating animations. To convert the original text-based data into an SVG format we used an automated PERL (Practical Extraction and Report Language) program. The PERL program was used to read and process the input (original text-based data) and create an SVG document with graphical objects and animation that represents the cartographic content (see Figure 1 ). To generate different animation topics we needed to adapt the PERL script to the particular glacier process we wished to visualise.

fig1.svg

Figure 1: Conversion from raw text data to SVG animation via PERL program.

Once the SVG documents are created, the results have to be reviewed and checked so that errors could be corrected in the SVG code. This eliminates potential programming errors and errors in the cartographic design.

2.3 Cartographic design

After generation of the animation topics in 2D, we must now deal with the presentation of the map. General requirements for modern glacial presentations as well as cartographic design aspects were considered. Several criteria for creating well designed glacier representations - that differentiate a glacier from it's surroundings - are as follows [HAE98] :

2.4 The visualisation tool

After converting the data and designing the map application, the results are stored in several SVG documents pertaining to each individual animation. The main advantage of this is to load animations only when they are required. The same technique applies when viewing background raster images. Since we provide a range of animation and background topics we need a user interface containing certain functions in order to access these topics. These functions allow the user to communicate with and control the application, such as changing the map contents according to their wishes (e.g., start and stop an animation at any time). These features are implemented as a complete visualisation tool, which combines essential functions, animation and background topics (see Figure 2 ).

fig2.jpg

Figure 2: Visualisation tool: animation choice, background choice, GUI (Graphical User Interface) elements and functions. The visualisation tool consists of nine features that allow the user to control certain aspects of the data representation.

3. Results

Four main animation topics are integrated that visualise the spatiotemporal processes of the Gruben glacier measured within the period 1970 to 1995. These four topics are:

Additionally, two background images are also available.

3.1 Animation: elevation change (absolute)

The animation represents changes in the elevation or ice thickness over time. Since the visualisations are two-dimensional, the thickness changes cannot be directly visualised through the z-coordinate. The temporal thickness variation (the z-coordinate difference) is conveyed by the circle radius at a measurement point. The elevation coordinate difference is calculated absolutely with by the z-value of the year 1970 as a reference .

Qualitative changes in ice thickness are displayed by the colour value. Since red is associated with heat (melting of ice), it represents decreasing ice thickness. For example, in 1995, the majority of the glacier is represented as red. The glacier at that time decreased in thickness as a consequence of melting (see Figure 3 ). Accordingly blue displays increasing ice thickness, which is related to cold temperatures and snowfall. This is in contrast to the general usage in thematic mapping where warm colours indicate an increase in values.

fig3.jpg

Figure 3: Animation elevation absolute. Map part of 1995.

A data bar beneath the animation displays the actual z-coordinate difference as well as the x- and y-coordinates for an individual point by using the mouseover command. Additionally, we can create a diagram on-the-fly (see Figure 4 ), which displays the entire development of ice variations from 1970 to 1995 for a given point. The diagram is synchronised to the main animation, and as such, the two animations can be played in parallel.

fig4.jpg

Figure 4: Diagram for a certain point in the elevation animation (absolute).

3.2 Animation: elevation change (relative)

An animation of the relative change in elevation is also available. The determination of thickness variation is implemented as follows: The z-value of the current year is differentiated by the z-value of the previous year. As a consequence of this, the radius size changes proportionally to the z-coordinate difference. Since this determination base varies from one year to the next the animation itself gives a more unsettled impression than the previous animation. This visualisation method displays only the changes that appeared between the previous year and the current year. So when we like to compare two different snapshots with each other we will not distinguish a trend because the determination base is always a different year.

Similar to the absolute elevation change animation an information diagram is also available for this animation.

3.3 Animation: surface velocity

The surface velocity animation describes the horizontal movements of the ice flow. The surface velocity of a given point is represented by a vector line or arrow. The vector length represents the velocity with which the glacier moved starting from that point for a given year. For example the glacier moves faster in the middle regions than at the fringes (see Figure 5 ).

fig6.jpg

Figure 5: Animation of surface velocity. Glacier is faster in the middle regions than on the fringes [ISA03] .

The vector length and direction are displayed in the data bar. The legend represents the maximum and minimum values, as well as mean values. Altogether 8 different annual periods are available. When comparing the period of 1973-74 with 1979-80 we can identify that the glacier moved faster in the latter period, which is also displayed in the legend (see Figure 6 ).

fig7.jpg

Figure 6: Left legend for 1979-80, right legend for 1973-74 [ISA03] .

3.4 Animation: glacier extent

The glacial extent is displayed by two different line signatures representing the glacier's borders. A solid line represents a known glacier extent; and a dashed line represents an uncertain position of glacier extent for a given time. In the visualisation, the visibility of the glacier's extent is animated; one line after the other is displayed and then hidden.

The definition of the lines representing the glacier's extent, the type of uncertainty and the year are displayed in the data bar as well as in the legend. The latter is also displayed in the timeline because it is possible to add a non-animated, static glacier extent from a given year to any of the other three animation topics. In the case where non-animated glacial extent is combined with the glacier extent animation, comparisons can be easily made.

3.5 Background topics: topographic map and orthophoto

Two background topics (in raster format) can be added to the current animation topic: the topographic map of Switzerland 1:25.000 from 1999 and an IR -orthophoto from 1991. When adding one of those topics to the animation, the map objects change their graphical symbolisation (colour, line width) to provide an appropriate representation.

4. Pros and Cons of Animating with SVG

One goal of this study was to analyse the suitability of SVG regarding possibilities, problems and limitations for generating dynamic representations. Some of the below-mentioned problems are a matter of the used soft- and hardware. But since they influenced the quality of the final product, they relate to the whole subject of working with SVG . Following, the most striking problems regarding animation are discussed as well as positive aspects.

4.1 Interactivity

Since the animation parameters are stored as a simple text, interpolation and rendering of the animation objects are just done in time. This fact allows the user to interact with the animation of the map application.

4.2 Duration of an animation

To accurately visualise the temporal dimension, the yearly values must be correctly assigned to the time scale of the animation. Furthermore, it should be possible to display the z-value of a given measurement point for any year. In SVG , this is realised by the values and keyTimes attribute lists; each value in the keyTimes list corresponds to a value in the values attribute list, and defines when the value is used in the animation [SVG01] . This guarantees that the values are displayed in time, independent from the computing power.

Other technologies use a fix number of frames. Here, the point of time for displaying a frame is dependent on the computing power. A given frame is displayed earlier on powerful machines than on less powerful once.

4.3 Time Controlling

During the compilation it was apparent that time controlling in SVG (or SMIL ) was quite limited. Control 'begin' and 'end' can easily be done by using SMIL attributes with an event as a value. But to integrate a pause function we have to use a DOM (Document Object Model) method, which we can access by a scripting language. Using SMIL attributes and DOM methods at the same time causes conflicts; i.e., with SMIL attributes we control a specific animation, the pauseAnimations() method pauses all animations of an SVG element. The solution for generating the above dynamic visualisations was the incorporation of a scripting language to control 'begin', 'end' and 'pause'.

4.4 Smooth Motion

When animating a lot of objects at once, the impression of a smooth motion is impaired. Animations in SVG are calculated and rendered in real time. Even powerful machines can be swamped with these task!

4.5 Redrawing

The more complex an animation is, the more incorrect the redrawing is done by the viewer. Especially when pausing the animation (see Figure 7 ). Comment: For testing the animations only the ASV3 (Adobe SVG Viewer 3.0) was used since there was no other player available at that time, which was able to display those animations.

fig8.jpg

Figure 7: Pausing the animation in the same year can result in two different redrawings. Incorrect redrawing of the graphic objects left. Successful redrawing right [ISA03] .

Certainly there are more limits and problems when working with SVG . For example, text wrapping and GUI elements (selection boxes, buttons, ...) would be necessary to produce a fast and flexible application. But these features are general problems and therefor not directly connected to the topic 'animation'.

5. Conclusion

Within this work it was the goal to use SVG for visualising spatiotemporal glacier processes because of its potential to generate the dynamic aspect by using animation. Dynamic representations are practical for describing spatial and multidimensional glacial processes. From this point of view we can rate the aforementioned results, combined in one visualisation tool, as a success; generally it is possible to use SVG to produce such visualisations.

Altogether four main animation topics were produced that display spatial, multidimensional and complex glacial processes. Cartographic design aspects and criteria were considered during the compilation. For example, a dynamic legend and a scale bar, an additional diagram animation, an interactive timeline and a coordinate display were integrated in the visualisation tool. A combination of different topics allow us to compare contents and give an overview of the surrounding (topographic map and IR -orthophoto). The interactive tools allow users to change, add or combine contents to their wishes.

Some of the problems while working with SVG were a cause of the used software or hardware and therefore are just a matter of time to solve them, e.g., successful rendering or impression of a smooth motion. Other problems were solved by integrating a scripting language. A further development of SVG might provide a way to control the time without requiring the use of a scripting language.

Footnotes

  1. Relation between SVG and SMIL : SVG is a host language in terms of SMIL animation. It supports four animation elements, which are defined in the SMIL animation specification. Additionally SVG introduces further compatible extensions to SMIL animation. For example, <animateTransform> is an SVG -specific animation element [SVG01] .

Bibliography

[DRA97]
Doris Dransch, 1997. Computer-Animation in der Kartographie - Theorie und Praxis. Springer-Verlag, Berlin et al.
[HAE98]
Christian Haeberling, 1998. Benutzerbeduerfnisse und Anforderungen zu neuartigen Gletscherdarstellungen. Available in: Wiener Schriften zur Geographie und Kartographie, Bd. 11, Wien 1998, p.81-83.
[ISA03]
Yvonne Isakowski, 2003. Animation mit SVG als Visualisierungsmethode von raeumlich-zeitlichen Prozessen in der Glaziologie. Final thesis at the HTW Dresden (FH) and at the Institute of Cartography, ETH Zuerich.
[KAE96]
Andreas Kaeaeb, 1996. Photogrammetrische Analyse zur Frueherkennung gletscher- und permafrostbedingter Naturgefahren im Hochgebirge. Available in: Mitteilungen der Versuchsanstalt fuer Wasserbau, Hydrologie und Glaziologie (VAW) der ETH Zurich, 145.
[SVG01]
J. Ferraiolo, editor, W3C Recommendation, 2001. Scalable Vector Graphics (SVG) 1.0 Specification. Available at http://www.w3.org/TR/SVG/

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