Visualizing Algorithms over the Web with the Publication-driven Approach Camil Demetrescux
[email protected]
Irene Finocchi{
Giuseppe Liottak
[email protected]
[email protected]
Abstract
Algorithm animation over the Web is usually realized by designing ad-hoc Java applets that provide both the implementation and the visualization of speci c algorithms. This approach has several disadvantages: It is time consuming, requires algorithms to be written in Java, guarantees no protection of the code, and assumes the algorithm developer to be the same person as the algorithm visualizer. In this paper we propose a new Web-based approach to algorithm animation, called publication-driven approach. According to this approach, algorithms run on a developer's remote server and their data structures are published on blackboards held by the clients. Animations are speci ed by attaching visualization handlers to the data structures published on the client's blackboard: Modi cations to these structures, due to the remote algorithm execution, trigger the running of the corresponding handlers on the client's side. The publication-driven approach has been used for designing an algorithm visualization facility over the Web, called WAVE. A rst prototype of WAVE is described at the end of the paper.
1 Introduction
Algorithm visualization [4, 20] concerns the high-level graphical display of both the control ow and the data ow of running programs. The visualization of an algorithm, and in particular the pictorial representation of the evolution of its data structures, has several applications both in the algorithm engineering and in the educational eld. Indeed, a complex algorithm can be described not only by presenting a commented piece of code, but also by associating geometric shapes with the algorithm's data and by showing how these shapes move and change as the algorithm implementation is executed. The latter capability not only is an e ective tool for algorithms researchers who want to share and disseminate their ideas, but also represents a valuable help for discovering degeneracies, i.e. special cases for which the algorithm may not produce a correct output. Moreover, teachers may bene t from the support of algorithm visualization to describe the behaviour of an algorithm with a more attractive and communicative medium than the traditional blackboard. A lot of e ort has been put in recent years to designing and developing algorithm visualization facilities (see, e.g. [1, 3, 5, 6, 7, 8, 9, 10, 13, 15, 18, 19, 21]). An algorithm visualization facility (see also Figure 1) is a tool that receives as input the implementation of an algorithm, an instance of the input of the algorithm, and a speci cation of the visualization of the algorithm, that is a mapping from the set of algorithms data to a set of geometric shapes that will be displayed. The output is a visual trace of the algorithm execution, that is a sequence of moving images that describe the evolution of the data at-run-time. Algorithm visualization facilities can strongly bene t from the potentialities o ered by the World Wide Web. Actually, the use of the Web for easy communication, education and distance learning can be naturally considered a valid support for improving the cooperation between students and instructors, and between algorithm engineers. Valuable features of an e ective Web-based algorithm visualization facility are: This work is partially supported by the project \Algorithms for Large Data Sets: Science and Engineering" of the Italian Ministry of University and of Scienti c and Technological Research (MURST 40%) and by the project \Geometria Computazionale Robusta con Applicazioni alla Gra ca e al CAD" of the Italian Research Council (CNR). x Dipartimento di Informatica e Sistemistica, Universit a di Roma \La Sapienza", via Salaria 113, 00198 Roma, Italy. { Dipartimento di Scienze dell'Informazione, Universit a di Roma \La Sapienza", via Salaria 113, 00198 Roma, Italy. k Dipartimento di Ingegneria Elettronica e dell'Informazione, Universit a di Perugia, via G. Duranti 93, 06125 Perugia, Italy.
1
Algorithm Implementation Visualization Specification
Algorithm Visualization Facility
Visual Trace of Algorithm Execution
Problem Instance
Figure 1: Algorithm visualization facility. Task Decoupling: The algorithm visualization facility should help both with separating the roles of algorithm designer, algorithm developer, algorithm visualizer, and end-user1 , and with making their interaction easier and faster. Language Independence: Algorithm developers usually want to implement algorithms in their favourite programming
language. Therefore, an e ective algorithm visualization facility should be able to accept programs written in di erent languages and to allow the algorithm visualizer to design a visualization independently of the algorithm implementation language. Customizability: Algorithm visualizers should be given the possibility of customizing the visualization according to the di erent application needs. For example, a graph can be either visualized as an incidence matrix or as a list of successors. Also, algorithm visualizers should not spend too much time in designing and building a visualization: Indeed, they should be required to have neither a detailed knowledge of the source code nor ability with computer graphics concepts and libraries. Code protection: Algorithm developers may not want to share their code with the rest of the world. Therefore, algorithm visualizers should be given the possibility of designing the visualization without downloading the developer's code. User-friendliness: It should be easy to learn how to use the algorithm visualization facility for all the di erent types of users. The interaction with the visualization facility should be supported by a friendly environment. Unfortunately, in order to visualize algorithms over the Web it is very common to design ad-hoc Java applets that provide both the implementation and the animation of speci c algorithms, without making use of any visualization system. This approach has several disadvantages with respect to the previous points: It is time consuming, requires algorithms to be written in Java, guarantees no protection of the code, and assumes the algorithm developer to be the same person as the algorithm visualizer. Even those systems explicitly designed to support visualization over the Web are either targeted for particular algorithms, or do not completely satisfy the aforementioned requirements. In the following we give a few examples of these systems. JEliot [12] aims at making automatic the task of producing visualizations of Java programs. It is based on a theater metaphor: The variables of the program are actors and the visualization arena is the stage. Jeliot parses the Java code and allows the user to choose the cast of variables to visualize on the stage according to built-in graphical interpretations. Changes to the variables are automatically detected as the program runs and the visualization is coherently updated. Jeliot relieves the user of writing any visualization code and so it is very easy to use, but does not allow producing high-level customized animations. JDSL [3] is a Java framework for visualizing operations on abstract data types such as AVL trees. It is well suitable for educational purposes as students are allowed to write and test their own classes provided they implement speci c JDSL Java interfaces. In particular, constructors and selectors of the data types must be implemented as methods having prede ned signatures. This allows JDSL to invoke them as the student interacts with the system for testing her implementation. The visualization of supported data types is embedded in the library. VEGA [14] is a client/server visualization environment for geometric algorithms implemented in C++. The algorithm is executed on the server and therefore the source code remains safe; moreover, the client runs on any Java
1 According to the standard terminology [17, 20], there are four types of users interacting with an algorithm visualization facility: The algorithm designer, the algorithm developer, the algorithm visualizer, and the end-user. The algorithm designer conceives an algorithm that is implemented by the algorithm developer. The algorithm visualizer designs a visualization of the program/algorithm using a suitable encoding language and taking advantage of the available graphical libraries. The end-user simply enjoys the visualization, testing it either on prede ned or user-de ned input data.
2
Virtual Machine and a small bandwidth communication interface guarantees good performance even in slow networks. The Vega client may be used to interactively draw, load, save, and modify scenes of geometric objects. It can be used to visualize algorithms on-line or to show saved runs o -line. The algorithm visualization may be customized by specifying a suitable set of view attributes. In this paper we propose a new approach to algorithm visualization on the Web, called publication-driven approach. According to this approach, algorithms run on a developer's remote server, while their visualization can be programmed and viewed through any Java-enabled Web-browser. The visualization is speci ed with respect to an intermediate set of public data structures that are a coherent copy of a subset of the program's data structures. In the following we call this intermediate set of data structures public blackboard. With the publication-driven approach, an algorithm visualization is realized by performing two steps: (1) A set of program's variables is chosen for publication on the public blackboard. This set contains all the information to be conveyed into the visualization. (2) Visualization handlers are attached to the variables of the public blackboard and are executed whenever the variables themselves change. These handlers may be chosen from a library of prede ned ones, yet experienced users are allowed to write new handlers in a suitable visualization language. Modi cations to the variables in the public blackboard, due to the remote algorithm's execution, trigger the running of the corresponding handlers on the client's side. The publication-driven approach has been used in the design of the architecture of an algorithm visualization facility called WAVE (Web Algorithm Visualization Environment). The main features of WAVE are listed below: WAVE extends the classical scenario based on the interaction between algorithm designer, developer, visualizer, and end-user by introducing the new gure of algorithm publisher, that decouples the role of the visualizer from the role of the developer. The task of the algorithm publisher is to select the program's data structures designed by the developer that are the most meaningful/appropriate to maintain in the public blackboard. WAVE guarantees independence from the implementation language by exploiting a publication mechanism. Variables in the public blackboard are described in terms of a suitable publication language, independently of the speci c programming language used by the algorithm developer. WAVE makes it possible to customize the visualization by means of a suitable visualization mechanism. Visualization handlers, speci ed in terms of a visualization language, are attached to variables in the public blackboard and guarantee exibility in the speci cation of the visualization. Also, WAVE leverages the visualizer from knowing details about the source code, since the visualization is designed on the public data structures described with the publication language. WAVE protects the code of the algorithm developer against piracy attacks: neither the algorithm visualizer nor the end-user can access the algorithm source code; the algorithm visualizer can only access the public blackboard. WAVE guarantees user friendliness by exploiting the capabilities of the Web. Indeed, it provides interactive scenarios of usage that ful ll the necessities of di erent kinds of users. Both the end-user and the algorithm developers interact with WAVE by means of graphic user interfaces. In particular, WAVE provides a database which users can contribute to by registering new algorithms and visualizations through a Web browser. Also, the speci cation of the public data structures is automatically supported by WAVE and leverages the algorithm developer from adding lines of code to her source le. We call computer aided publishing this interaction mode between WAVE and the algorithm developer. The rest of this paper is organized as follows. Section 2 describes the publication-driven approach for algorithm visualization, while Section 3 discusses the client-server architecture of WAVE. A prototype of WAVE is described in Section 4.
2 The Publication-driven Approach
In this section we describe WAVE's approach to publishing and visualizing algorithms over the Web. As shown in Figure 2, algorithm visualization facilities described in the literature can be roughly classi ed into two main groups, i.e. event-driven and data-driven facilities, according to the way visualization events are triggered and information to be visualized is gathered. Furthermore, systems that allow users to write visualization code to produce customized animations can be further classi ed according to the paradigm of the visualization language, i.e. imperative, declarative, constraint-based or object-oriented. 3
Algorithm Implementation
Event Driven Approach
Visualization System
Interesting Event
Notification of Data Manipulation Data Driven Approach
Access to Interesting Data
Figure 2: Traditional event-driven and data-driven approaches to visualization. The event-driven approach was pioneered by BALSA [7] and has been subsequently followed by many other systems. According to this approach, visualizations are realized by identifying interesting events in the source code, corresponding to relevant steps of the underlying algorithm, and annotating it with calls to visualization routines, usually written in imperative or object oriented languages. The event-driven approach allows the algorithm visualizer to easily customize the visualization according to her necessities and appears simple to understand, but usually even the visualization of moderately easy and short programs may require several lines of additional code. In the data-driven approach visualization events are triggered by modi cations to the content of the data structures performed by the program during its execution. This relieves the user from the task of identifying interesting events and allows concentrating only on the algorithm's data structures. As a consequence, a high level of abstraction, a good level of automation, and a strong task decoupling can be achieved. The main motivation of the data-driven approach is that observing the modi cations to the algorithm's data structures is usually enough to understand what the algorithm itself is doing on them. Though the data-driven approach appears to be very exible, only few algorithm visualization facilities have explored its potentialities. Existing systems are either automatic [12], i.e. automatically produce visualizations with restricted capabilities of customization, or are based on a declarative speci cation of the visualization [9, 18]. Underlying Program
Visualization System
Event Driven Approach
Interesting Event
Publisher Data Driven Approach with Publishing
Public Blackboard Interesting Data Manipulations
Interesting Data
Figure 3: The publication-driven approach: the public blackboard is an intermediate layer between the running program and the visualization facility. WAVE is based on a new approach to visualization as it is the rst data-driven imperative system. We call this approach publication-driven approach. The main idea behind the publication-driven approach can be summarized as follows. WAVE introduces an intermediate layer (both physical and conceptual) between the algorithm developer and the algorithm visualizer and between the algorithm visualizer and the end-user: the public blackboard (see also Figure 3). As a consequence, the algorithm developer can ignore any visualization aspects when writing the code. The publication on the blackboard consists of communicating to the client the events of variable declarations, changes, and going out of scope (algorithm publication mechanism). It is up to the algorithm publisher to annotate the source code with calls for the publication of some variables. The visualizer can design the animation ignoring the implementation details by adding visualization handlers to the variables in the public blackboard (algorithm visualization mechanism). Both the publication and the visualization are speci ed according to an imperative style, but visualization events are triggered by the modi cations of the public data structures as in data-driven systems.
4
Original C++ Code
Annotated C++ Code
struct { int x; float y; } v[100];
struct { int x; float y; } v[100];
void main() { for (int i=0; i
