A Configurable SVG Magnifying Glass

Proper magnification of content is very important when using a computer screen to visualize high-density data sets, which are increasingly being rendered as SVG files. Maps, CAD drawings and schematic diagrams provide many examples of high-density visualizations. It becomes more of a challenge when the display is relatively smaller in size, such as the display of a PDA. There are several magnification paradigms, three of which are briefly described below, with their advantages and disadvantages:

1. Zoom and pan: The content is magnified by simply applying a scale (zooming), and centering on a point picked by the user (panning). Although simplest to implement, this approach loses the relation between the newly scaled view and the original. In order to establish this relation, the user has to continuously zoom-in, zoom-out, and scroll.
2. Ordinary magnifying glass: Only the part of the content that stays under the magnifying glass is enlarged. This approach provides a relation between the unmagnified and magnified views of the document to some extent, but because the magnified content covers some of the unmagnified content, the clear connection between the two is lost. The size of the magnifying glass is generally not configurable. Therefore the applicability of this solution is limited.
3. Key map: In this approach, the original and the magnified document are separated from each other, and both can be viewed at the same time, on the same screen. The area of interest will be marked in the key map with special styling, and will be magnified and displayed in another part of the view pane. This approach is better than the first two in terms of relating magnified content to the original. However, it still is not easy to make the connections between the two differently scaled views of the same document, because they are physically distant from each other on the view pane. Furthermore, key maps may either consume too much screen real estate or show too little detail to be useful.

Approach

In this paper, we are demonstrating an SVG magnification tool which is an improvement over the default zoom-and-pan behaviour that comes with most SVG viewers. Our magnifying glass has the ability to blend in to its surroundings in such a way that one can see the magnified and unmagnified parts of the same document on the same view pane at the same time, without losing the connections between these two parts. The magnifying glass consists of two regions: an interior region and a transition region. The transition region separates interior from exterior. The content that is under the interior region gets magnified uniformly, while the content under the transition region is warped in such a way that it is still perceivable, and connections to the neighbouring interior and exterior regions are intact. Mathematically, this is a continuous bijective transformation of the plane. As a result, all lines and curves remain continuous after transformation. Our magnifying glass is also configurable by client-side scripting. Scale factor, interior and transition region sizes, as well as overall size are some of the main adjustable parameters.

This approach to magnification has been previously studied and implemented in a software library with raster output by IDELIX Software Inc. By contrast, we are presenting a vector graphic implementation entirely using constructs inherent to the SVG vector graphic format. This guarantees that the magnified portion is always rendered at the correct resolution, and that the magnifier can be conveniently packaged with the content that it magnifies for Web distribution.

Implementation

The magnifying glass is implemented as a stand-alone SVG file that can be inserted into any other SVG. A set of SVG filter effects is used to achieve the scaling and warping effects.

In a typical high-density data viewer application that uses our magnifying glass, the sequence of events would be as follows:

• The client issues a request for a certain subset of high-density data
• The server extracts this information from the database and generates a file that contains SVG visualizations of this data
• With the help of XSLT, the SVG file containing visualizations is merged with the SVG file containing the magnifying glass and client side scripts written in ECMAScript. Default or previously selected magnifying glass parameters are also inserted into the response at this point.
• The response is sent to the client.
• The client can view different parts of the SVG, adjust magnifying glass parameters to better view content, etc. This can continue until there is a necessity to make another request to the server. The reason for this could be scrolling out of the viewable area, or zooming in past a threshold. At this time, the server will repeat the process and adjust initial scaling factors of the magnification tool.

Examples

Examples that emphasize magnification of a diverse range of high-density data sets will be presented.

Dr. Philip A. Mansfield
SchemaSoft
#350 - 1190 Homer Street
Vancouver, BC  V6B 2X6
Canada
email: philipm@schemasoft.com
tel:   604-682-3404 x142
cell:  604-763-8558
fax:   604-682-3432
web:   http://www.schemasoft.com
		

Ahmet Gurcan, M.A.Sc.
SchemaSoft
#350 - 1190 Homer Street
Vancouver, BC  V6B 2X6
Canada
email: ahmetg@schemasoft.com
tel:   604-682-3404 x136
web:   http://www.schemasoft.com