Peter Bergström and Darren C. Atkinson, “Digital Library Visualization Using SproutCore and SVG,” in Proceedings of the 7th International Conference on Scalable Vector Graphics, October, 2009.

Abstract

PaperCube was written using the SproutCore JavaScript framework, which is geared towards the creation of highly interactive, “cloud,” or thick client applications in the web browser. Using only JavaScript and standards-based rendering technologies such as Scalable Vector Graphics, PaperCube allows users to browse a version of the CiteSeer digital library and view paper and author relationships using a set of dynamic visualizations.

Stemming from the need for a flexible graph API for various views in PaperCube, the NodeGraph class was created as a generalized solution that can display any type of relational data as an undirected graph rendered using Scalable Vector Graphics. The class is not PaperCube-specific and could be easily integrated into other applications.

The NodeGraph class is able to display a mixed set of content objects and has many customizable methods and properties to keep the base implementation as generalized as possible. In PaperCube, the views that use this API extend and customize these methods and properties. These methods allow the developer to abstract away the details of different content data types and provide a consistent API. When a graph rendered using this class is altered based on any threshold value including depth, the graph is designed to smoothly transition using animations. All of the properties that determine the currently visible data can be adjusted dynamically through UI control elements through bindings. Since SVG is DOM-based, aggressive caching of DOM nodes is used to optimize performance and only apply transitions to altered parts of a visualization and leave the rest untouched.

[Full text in HTML]