Taking Strand Maps from Print to Interactive SVG: Challenges and Lessons Learned

André Winter (winter@carto.net),
Brian Sweeney, and Francis Molina {bsweeney, fmolina}@aaas.org

The conceptual strand maps in the Atlas of Science Literacy (AAAS 2001, 2007) represent graphically the coherence that is intended in Project 2061’s Benchmarks for Science Literacy (AAAS, 1993) and emphasize the importance of structuring the entire curriculum so that students’ understanding can build over time. These maps encourage teachers to carefully consider the connections between science ideas. Prior research has shown that users who are given a graphical, conceptual browsing interface such as strand maps are more likely to engage with science content than those who use textual search interfaces (Butcher and Bhushan 2005).

Educators at all levels have found that print versions of strand maps provide a new perspective on the grade-by-grade progression of science literacy and the importance of conceptual connections. Although it has been very popular, the print format of Atlas imposes limitations on the maps’ usefulness: navigation between maps is not easy, and there are no provisions for instantly accessing instructional resources that clarify and illustrate the benchmark ideas. Therefore, we are developing an interactive SVG version that will allow users to display a wide variety of instructional resources while studying the relationships between benchmark ideas on the maps.

Creating an interactive SVG strand map that preserves the integrity of the print version entails being able to re-purpose a print file into an online version and typically consists of three-steps: 1) using a flowcharting program such as MacFlow to create the nodes with the benchmark text, connecting the nodes, and optimizing the map topology, 2) bringing the map into a desktop publishing program such as Adobe Freehand or Illustrator to generate the file for print media, and 3) exporting the file in SVG format, making modifications for proper browser rendering, and development and scripting of the interface elements.

Adobe Illustrator provides an environment for the creation of static SVG documents which can be interfaced subsequently to back-end databases. However, although it is suitable for the creation of highly detailed graphics which is exportable to SVG, Illustrator is not primarily directed towards the development of dynamic graphics or interactive interfaces. What it provides the SVG developer is a tool that can be used to design and lay out interface elements which then have to be integrated via manual coding. To a certain extent, the limitations of Illustrator as a development environment can be mitigated by using well-defined document structures and dynamically assigned interactivity through DOM-based scripting. Thus, Illustrator can be a component in the SVG development workflow, providing the framework upon which interactivity can be built.

Our SVG map browsing interface consists of a main map container which is used to load or change maps and fixed interface elements for topical and area navigation--e.g., zoom, pan, select. It consists of familiar components commonly seen in web mapping applications such as Google Maps and the Tirol Atlas. This environment and the text-based nature of the additional information that is accessible via map interaction led us to develop a HTML+SVG-based solution. Obtaining cross-browser support in Internet Explorer with the ASV3 plug-in and Mozilla’s Gran Paradiso was problematic, as there was no way to properly display text (including full web pages from other servers) within or over the map. The actual development version either is a fixed frameset or a group of iframes. Within such frames/iframes, both HTML and SVG content can be layered within a single web page and without opening additional pop-up browser windows. The iframe solution has some graphical drawbacks but is needed to overcome the non standards-compliant behavior of elements layering in a plug-in environment.

The unique characteristics of the media are critical factors to consider in moving from print to interactive SVG. The graphically designed maps need to be enhanced with standardized interactivity in order to reliably interact with the interface. Although the definition of the feature set for the interactive strand maps remains a work in progress, design flexibility is maintained so that maps are displayed irrespective of how well they fit within the interface.