mavis: a multi-level algorithm visualization system within a collaborative distance learning...

ARTICLE IN PRESS

Journal ofVisual Languages & ComputingJournal of Visual Languages and Computing

19 (2008) 182–202

1045-926X/$

doi:10.1016/j

�CorrespoE-mail ad

www.elsevier.com/locate/jvlc

MAVIS: A multi-level algorithm visualization systemwithin a collaborative distance learning environment

Igal Koifmana, Ilan Shimshonib, Ayellet Talc,�

aDepartment of Industrial Engineering and Management, Technion—Israel Institute of Technology, IsraelbDepartment of Management Information Systems, Haifa University, Israel

cDepartment of Electrical Engineering, Technion—Israel Institute of Technology, Israel

Received 19 September 2004; received in revised form 7 February 2006; accepted 28 September 2006

Abstract

This paper presents a new model for an algorithm visualization system. Our model views the

visualization system as an integral part of a broader distance learning environment. As such, it

supports the heterogeneity of the Internet the visualization is expected to run on and the diversity of

the expected users. It does so by defining several ways for handling multi-level visualizations. First, a

visualization can run in various abstraction levels of the algorithm, depending on the familiarity of

the students with the studied materials. Second, a visualization can use various levels of graphics,

depending on the capabilities of the client machines. Third, the messages sent between the machines

can be of various levels, depending on the communication loads. Another important aspect of a

distance learning environment is collaboration and data sharing. Our model facilitates the

collaboration between the students and the instructor and between the students themselves. Finally,

this paper presents a system, MAVIS, that realizes the model, and demonstrates its use on several

algorithms.

r 2006 Elsevier Ltd. All rights reserved.

Keywords: Algorithm visualization; Algorithm animation; Distance learning; Collaboration

- see front matter r 2006 Elsevier Ltd. All rights reserved.

.jvlc.2006.09.004

nding author. Tel./fax: +972 4 829 4651.

dresses: [email protected] (I. Shimshoni), [email protected] (A. Tal).

www.elsevier.com/locate/jvlc

dx.doi.org/10.1016/j.jvlc.2006.09.004

mailto:[email protected]

mailto:[email protected]

ARTICLE IN PRESSI. Koifman et al. / Journal of Visual Languages and Computing 19 (2008) 182–202 183

1. Introduction

Algorithm visualization refers to the use of graphics and motion to explain algorithmicideas and data structures [1–12]. It has a great potential to assist in the design ofalgorithms, in debugging, and for teaching algorithms to students and colleagues.

Distance learning refers to a learning process in which the instructor resides in adifferent geographical location than the students, thus communication is needed in orderto convey the materials [13–16]. The advent of the Internet along with the development ofmultimedia capabilities made the two a convenient platform for developing comfortableand affordable distance learning tools.

Within a distance learning environment, a virtual lecture is performed once the uservisits a specific web site. Just like any real classroom, a virtual classroom consists of aninstructor and a group of students. The users should be able to interact with each other,collaborate and share information. The only difference from a regular classroom is thateach individual can be at a different location when the class takes place.

Most algorithm visualization systems are not designed to be used within a generaldistance learning environment. In this paper we present a novel conceptual model foralgorithm visualization within a virtual classroom framework. We also present our system,Multi-level Algorithm VIsualization System (MAVIS), that realizes this model.

Running a virtual lecture and a visualization over the Internet means that noassumption can be made regarding the processing capabilities of the clients. In addition,communication loads might vary greatly on various links. As a result, delays might becaused and synchronization becomes a difficult task. Thus, a major emphasis of our systemis to support the expected heterogeneity in a dynamic manner.

To dynamically adapt to the heterogeneity of the network, our model supports multi-

level visualizations, rather than accompanying an algorithm with one specific visualization.That is to say, rather than producing a single visualization for a given algorithmic event,the visualization system should be capable of producing a whole spectrum ofvisualizations.

There are three cases where this capability is desirable. First, using differentvisualizations can be beneficial for teaching purposes [17], where explanations dependon the familiarity with the algorithm. Second, different visualizations are displayedaccording to the processing power and the graphics capabilities of the client machines.Third, the system monitors the communication channels and sends quantities of datasuitable for each communication load, while maintaining the validity of the visualization.

Another major concern in every distance learning environment is how to facilitatecollaboration between the participants. Our model supports the incorporation of tools thatassist information sharing. In our system, two such tools were implemented. A guided

Internet tour tool lets the instructor change the course of the lesson by visiting various websites and makes the students follow. A chat mechanism lets the instructor and the studentsexchange messages in real time.

We built a system, MAVIS, that realizes the model. MAVIS is an object oriented system,implemented in Java, and designed such that the algorithms, its objects and its graphicalsupport can be easily extended by inexperienced users. MAVIS is structured as an Internetclient–server architecture.

The rest of the paper is organized as follows. Section 2 presents our conceptual model.Section 3 describes the user’s perspective of the multi-level visualization. Sections 4 and 5

ARTICLE IN PRESSI. Koifman et al. / Journal of Visual Languages and Computing 19 (2008) 182–202184

describe MAVIS, and in particular, the implementation of the multi-level concepts. Section6 illustrates the process of producing an algorithm visualization with MAVIS bypresenting a couple of algorithms implemented and visualized by undergraduate students.Section 7 draws conclusions and discusses future directions.

2. Conceptual model

In this section we describe our conceptual model for an algorithm visualization systemwithin a general interactive and collaborative distance learning environment. We considerthree types of users: the instructor, the students and groups of students.After choosing an algorithm to teach, the instructor can prepare various input examples

in order to demonstrate the actions of the algorithm. The instructor can choose to displaythe algorithm in various levels of detail, for instance, by teaching it top-down andvisualizing each level when appropriate. As will be explained later, this does not requiremore than one implementation of the algorithm and of the visualization.It was shown in [18] that algorithm visualization assists learning when the students have

active tasks. Moreover, a comprehensive understanding of the algorithm is facilitatedwhen the students themselves implement the visualization [19–21]. Thus, a major concernof our model is to let the students be active (and thus the system—interactive) [22].The student can use the system in three ways. First, the student can participate in an

online virtual classroom. In this case, the student remains active by being able to ask theinstructor questions and get feedback, and by being able to collaborate with other studentsin the virtual classroom. Second, the student can run the visualization independently at astand-alone machine. This way, the student can explore the algorithm by modifying theinputs and checking how the behavior of the algorithm changes accordingly. Finally,through a simple API, the student can implement an algorithm and create a visualizationillustrating it.Computer-supported collaborative learning has shown to be an important paradigm

[23]. In our model, students can form study groups whose members can collaborate, shareinformation and work together on their assignments. Student collaboration is importantsince it exposes the students to different ways of thinking and to mutual assistance insolving problems.Our model enables the definition and management of several virtual classrooms that run

concurrently. The system creates several data channels for every classroom, one per datatype. For instance, in Fig. 1 classroom C-I has three data channels: one for chat messages,one for algorithm events and one for visualization events. A student who registers to aspecific classroom automatically gets all the information passing in its data channels.Defining the broadcasting mechanism in this manner has the benefit of flexibility. Newtypes of messages can be easily added. Moreover, external systems can be connected bydefining special channels for them, while the system automatically handles the messages.Our algorithm visualization model is based on the classical model of interesting events

[1], indicating algorithm events that are of interest when the program runs. An interestingevent can be either simple or compound. A simple event represents a change made to asingle object. A compound event is composed of several simple events, which are animatedconcurrently.The main deviation of our model from previous models is that we aim at supporting the

diversity of students and the heterogeneity of the Internet, by providing multi-level

ARTICLE IN PRESS

Fig. 1. Data channels.

I. Koifman et al. / Journal of Visual Languages and Computing 19 (2008) 182–202 185

visualizations. That is to say, an algorithm can be accompanied by a visualization selectedfrom a set of possible visualizations. Less detailed visualizations present only the higherlevel logical operations of the algorithm, while more elaborate visualizations presentadditional interesting events, and each such event is visualized in more detail. Anotheraspect of multi-level visualization regards the quality of the computer graphics being used.A visualization of a specific interesting event can represent each algorithmic object byvarious types of graphical objects (e.g., a circle, a square or a sphere), can use variousmotions, and can vary the number of frames utilized.

There are three factors that influence the choice of a specific visualization. First, as everyalgorithm can be described in several abstraction levels, it can also be visualized accordingto these levels. The instructor can dynamically choose the most suitable abstraction levelfor the classroom at a certain time. For instance, the explanation starts with a high-leveldescription of the algorithm and then discusses each step in more detail. Moreover, everystudent can also pick the level of visualization that fits the student’s understanding. Uponthe first encounter with an algorithm, the student can choose to visualize only the high-level events of the algorithm, while once the student gets more familiar with the algorithm,more details are sought and thus additional interesting events are displayed.

Second, in a diverse environment as the Internet, every end-point machine has differentcomputational capabilities as well as graphical capabilities. Low-end machines might beincapable to process all the graphical events in a timely fashion. A major aspect of a systemthat handles client overloads is its ability to automatically detect this situation. This isshown to be a problem in more demanding virtual environments [24,25]. Our systemmonitors the client message queues. If an end-point computer is found to be incapable ofsynchronizing with the classroom due to long queues, the system changes the type ofmessages sent to this machine. Low-end machines receive messages which include onlyfundamental changes to the display objects, while high-end machines receive messagescontaining more detailed changes (for instance, by using a different number of frames inthe animation).

In addition, each user can set the quality of the graphical display according to thecapabilities of the machine. For instance, the same object can be displayed as a sphere onone machine and as a circle on another.

Third, a common problem in an heterogeneous environment that characterizes distancelearning is that of communication loads. Consider an end-point machine which does not


receive its messages in time due to communication overloads, and thus makes it impossiblefor the student to synchronize with the classroom. This problem can be addressed in twoways. The first solution is not to send a detailed visualization as described above. Thissolution is not satisfactory because it can reduce the understanding of the student. A bettersolution is to send the end-point machine portions of the code of the algorithm to be runlocally on that machine and generate the visualization using the machines’ hardware andsoftware capabilities. Our system supports this capability at every nesting level of the code.That is, when a certain function of the algorithm is called, either its code is sent to the end-point machine and the visual events are generated locally, or the same code is executed onthe instructor’s machine and only the graphical operations are sent to the client one byone. Even so, the algorithm has to be implemented only once.The decision whether to download code is done automatically by the system. The end-

user and the programmer are not involved in determining when it should be done. Thisdecision is taken at every function call, depending on the current load. To detectcommunication overloads, the time it takes to place a message on the client queue ismonitored.Another important aspect of our model is the support for collaboration between the

instructor and the students and among the students themselves. The system is structured insuch a way that any collaboration tool can be incorporated, since the channel manager candeal with messages of all types [26,27].In the current implementation a couple of tools are integrated: a guided Internet tool and

a chat tool. The guided Internet tool enables a guided tour of the Internet. When theinstructor changes the URL being viewed, the whole classroom automatically follows. Thiscapability allows the instructor to use external information during class and duringalgorithm visualization. The chat tool lets the users exchange textual data with each other.This is important both for asking questions and answering them, and for using textualinformation that accompanies the visualization and explains the algorithm.

3. Multi-level principle—user perspective

In this section we describe how the multi-level principle is utilized by the programmerwho writes the algorithm and the visualization and by the student who visualizes it.Moreover, we illustrate this principle on an example from robotics—a path planningalgorithm using a visibility graph.In this example, the algorithm is given source and target positions and several polygonal

obstacles and finds the shortest path from the source to the target, avoiding intersectionswith the obstacles. The algorithm constructs the visibility graph between the polygons’vertices and the source and the target and finds the shortest path between the source andthe target in this graph. To construct the visibility graph, the algorithm checks for eachcandidate arc whether it intersects any of the obstacles.The algorithmic objects are the graph, consisting of nodes and arcs, the obstacles, the

candidate arcs, and the shortest path. The visualization consists of the following interestingevents. The first event, initialization, displays the input. The second event, candidate arc,chooses two nodes in the graph and displays the arc. The third event, polygon– arc

intersection test, tests for intersection between the chosen arc and a polygon. This event isperformed by a series of arc– arc intersection test events. When an arc is determined not tointersect any other arc, it defines the next interesting event, the insert arc to graph event.


Finally, when the visibility graph is constructed, the algorithm finds the shortestpath in it using Dijkstra’s algorithm, which defines the last interesting event, the shortest

path event. Fig. 2 displays some interesting events by showing snapshots from thevisualization.

To construct this visualization, the programmer needs to perform the following threetasks. First, the programmer has to assign each event its abstraction level. Since it might be

input intersection query line intersection found

visibility edge found construction of visibility graph cont.

cont. full visibility graph shortest path

a b c

d e f

g h i

Fig. 2. Visualization of the path planning algorithm using a visibility graph. (a) Input, (b) intersection query line,

(c) intersection found, (d) visibility edge found, (e)–(g) construction of visibility graph, (h) full visibility graph, (i)

shortest path.

ARTICLE IN PRESS

startBlock();

startBlock();

endBlock();

endBlock();

Fig. 3. Code for abstraction levels.

I. Koifman et al. / Journal of Visual Languages and Computing 19 (2008) 182–202188

tedious to do this for each event, the user is only required to specify in the code thetransition from one level to another without coupling it to the specific events. Fig. 3illustrates what the user has to write to specify these levels.In our example, three abstraction levels are defined. The highest abstraction level

includes the initialization event, the insert arc to graph event and the shortest path event(i.e., OðnÞ events). The next level also displays the candidate arc event and the polygon– arc

intersection test event (i.e., Oðn2Þ events). In the lowest abstraction level, all the intersectiontests are visualized by adding the arc– arc intersection test event (i.e., visualizing Oðn3Þ

tests). To achieve these abstraction levels, the programmer needs to insert calls tostartBlock and endBlock at the beginning and at the end of the functionsimplementing these events of the algorithm.Second, the programmer has to specify the priority level of each event, determining how

important it is that this event be displayed. This is simply done by passing a priorityparameter to the function that sends the event to the clients.Finally, the most involved task for the programmer is to allow the code of a func-

tion to be executed on the client machine in case of communication congestion. Forthis to be possible, the function must be embedded in an object. In addition, thefunction must have a standard interface as specified by the object’s base-class ICommand.To do it, all the functions have a single parameter of type HashTable and theparameters are inserted into it. Thus, before a function is called, its parameters have tobe inserted into the hash table. In the body of the function, the parameters are extractedfrom the hash table by their standard names (‘‘one’’, ‘‘two’’...). In Fig. 4, an example ofsuch a function is given. This function runs on the server and the client machines. Toenable this, objects used by the function are passed by name and not by address, so theirinstances on the server and the clients can be extracted from the local context. In addition,the last line of the code in Fig. 4 sends a message to the client machines with the updatedvalue of an algorithm object. Obviously, when this line is run on the client machine, thefunction sendUpdateEvent does nothing, since the client does not send displaymessages.The user (either the instructor or the student) runs the application which produces

screens like the one shown in Fig. 5. The pseudo-code of the algorithm is shown alongsidethe visualization, and the current line is emphasized. All the algorithm implementer needsto do to augment the visualization with pseudo-code, is to supply it during initialization.Highlighting the proper line of pseudo-code is yet another type of visual event. The multi-level visualization is also applied to the pseudo-code highlighting event, thus when runningin a high-level visualization, pseudo-code lines that belong to low-level events are nothighlighted.

ARTICLE IN PRESS

public class AlgoShortestPath implements ICommand {

public void execute (Hashtable params) {

//Parameter extraction

//Extract parameter name from hash-table.String name1 = params.get("one").toString();

//Get Object by name (not by address).AlgoObject visGraph = (AlgoObject)context.getObject(name1);

String name2 = params.get("two").toString();

AlgoObject startPoint = (AlgoObject)context.getObject(name2);

String name3 = params.get("three").toString();

AlgoObject endPoint = (AlgoObject)context.getObject(name3);

String name4 = params.get("four").toString();

AlgoObject pathObject = (AlgoObject)context.getObject(name4);

// AlgorithmDijkstra dijkstra = new Dijkstra(visGraph,startPoint);

dijkstra.ComputeAllShortestPaths();

java.util.Vector path = dijkstra.ShortestPathTo(endPoint);

pathObject.attachDrawObject(new DrawPathObject(path,null));

context.updateObject(pathObject);

// Message sendingoutGoingEventHandler.sendUpdateEvent(pathObject,

Message.HighPriority);}

Fig. 4. Example code of a function.


4. The system

MAVIS realizes the model described in Section 2. Java was chosen as its programminglanguage for the following reasons. First, Java supports multiple platforms and thus thecode can run on various types of end-point machines. Second, Java applets allow a simpledeployment, access and execution through standard browsers. Third, the Remote MethodInvocation (RMI) mechanism of Java lets the code call and execute functions that reside inremote objects. Fourth, the language supports code migration to other machines and itsexecution on the target machine. Fifth, Java supports computer graphics capabilitiesessential for visualization. Sixth, the object oriented nature of Java facilitates the extensionof the model via inheritance, and thus facilitates the creation of new visualizations byinstructors and students alike. Finally, a security mechanism, the sandbox, protects theuser from destructive operations [28].

MAVIS is structured as a client–server architecture. Fig. 6 illustrates the logical dataflow in the system. The server runs the channel manager, which creates new virtualclassrooms and opens a data channel for each classroom. It also monitors the messagequeues at the clients. Once the instructor initiates the creation of a virtual classroom, the

ARTICLE IN PRESS

Fig. 5. Animation screens.


ARTICLE IN PRESS

Fig. 6. Data flow in MAVIS.


algorithm code is loaded by the Algorithm executer. During the run and upon reachinginteresting events, messages are broadcast via a relevant data channel to all the users whohave registered to that channel (illustrated by dotted lines). It is possible for functions ofthe algorithm to run on the client machines. In this case, the code is uploaded from theserver (illustrated by double lines).

Figs. 7 and 8 illustrate the configurations of the server and of the client, respectively. Thesystem is configured in layers, which are described below.

�
The communication layer sends messages at the TCP level, using the RMI mechanism ofJava. � The routing layer routes the messages and the events between the server and the clients.
This layer also filters the messages based on criteria defined for each client (influencedby the capabilities and the communication loads of the client, as described in Section 2).
� The dissemination and object layer defines a unified format for all the objects transferred
between the server and the clients. When an algorithmic object is to be transferred, it is

ARTICLE IN PRESS

Fig. 7. Server configuration.

Fig. 8. Client configuration.


encapsulated within an appropriate message object which contains data about thesender, the receiver and any other necessary data. This infrastructure can be easilyextended to transfer new object types.
� The event manager lets applications define the events happening in them and the code
that handles them. Using this mechanism, it is possible to create events and send themto their clients and when needed also send with them the code that handles the event onthe client’s end. Thus, the client does not need to have the whole application codelocally because it will get the required code when needed.
� The application layer contains the applications implemented or used in the system such
as the collaboration tools. This layer can be extended to contain additional applications.
� The algorithm infrastructure layer is the basic layer for implementing algorithms and
their visualizations with MAVIS. It contains two types of objects: algorithm objects andvisualization objects. These objects are modified by the algorithm during its execution.Obviously, these objects can be extended in order to create different visualizations andimplement new algorithms.
� The algorithm component contains the objects that implement the algorithm. Every
algorithm has an algorithm component. The objects defined within this component usethe objects of the algorithm infrastructure layer.
� The display layer displays the visualization. This is the layer that supports the multi-
level presentation of the visual events. Separating this layer from the other layers is


essential since it lets the user change and extend the forms of display without modifyinglower layers, and in particular without modifying the algorithm.
� The control and monitor manager monitors the message queues, changes the parameters
accordingly and informs the routing layer.
� The channel manager adds and deletes data channels and registers users to the various
channels.

The message distribution mechanism in the virtual classroom is done regardless of thesource or target of the message. All types of information originating from all theapplications are handled in the same manner. Each message is encapsulated within auniform object before being sent. For example, consider a chat message sent from thestudent to the teacher. First, a ChatMessage object containing the contents of the chatmessage is created. This object, which inherits from the Message object, is put into thequeue of incoming messages of the Channel Manager. The Channel Manager extracts themessage from the queue and directs the message to the correct channel. The message isthen sent to all the members of the group belonging to the channel by putting the messagein their queues at the client machines. Once the message arrives at the client machine, it isextracted by the Dispatcher object and handed to the GuiChat object which extracts thechat text and displays it in the appropriate place.

Adding new algorithms and new display mechanisms for specialized graphic hardware isvery easy with MAVIS. This is due to the abstraction feature of Java and to the layeredarchitecture of MAVIS, which is applied only to the base classes of the object. When a newobject class is added to the system, it should inherit from the appropriate base class. Then,all the layers that deal with objects of that type can manipulate the new classautomatically. Ease of use has been demonstrated when inexperienced users were ableto quickly add new algorithms and their visualizations to the system. The visualizationscreated by these students will be discussed in Section 6.

The user interface supplied by MAVIS enables the users to run the visualization at theirown pace. Each user can start, pause, and continue the visualization at will. Moreover, atdifficult stages of the algorithm, a step by step execution can be performed. All theseexecution modes are determined by the instructor and visualized by the studentsparticipating in the class. The instructor obviously also controls the level of visualizationthrough the user interface.

5. Multi-level principle—implementation

Recall that there are three types of multi-level visualizations in our model, as describedin Section 2. This section describes how they are implemented in MAVIS.

First, every algorithm can be described in several levels of abstraction and the instructorcan dynamically change the level of visualization. Each interesting event gets anabstraction level. The lower the number, the more detailed the visualization is. Moredetailed interesting events are nested within less detailed ones. The beginning and the endof a level is written in the code of the visualized algorithm (Fig. 3). Once the teacher selectsthe desired level of abstraction, only interesting events having this abstraction number orhigher will be displayed.

When a display level has been selected, the system handles it as illustrated in Fig. 9. Allevents with higher levels are displayed as usual. Once the algorithm moves to a level that

ARTICLE IN PRESS

Fig. 9. Level transition.


should not be displayed, the system makes a copy of the algorithm objects using the Clone

operation. The algorithm continues to update the copy of the objects while the static viewof visualization is used for display. When the algorithm exits the level that should not bevisualized, a Sync operation is performed and the frozen copy of the algorithm objects isdiscarded. A correct and natural design of the visualization will prevent discrepanciesbetween the display and the data structure, since high-level operations are applied to high-level objects. In the rare cases when discrepancies occur, they can be corrected by theprogrammer with a refresh operation during ‘‘sync’’.The instructor can change the level of visualization during the run of the algorithm. One

special case that needs to be handled is the case in which the instructor reduces the level ofvisualization while the algorithm is presenting the detailed visualization. For example,suppose that the algorithm is running in the most detailed level of visualization, and theinstructor changes it to the level shown in Fig. 9. The change in the visualization levelcannot be done immediately. Rather, the system waits until the algorithm exits the detailedvisualization level. Otherwise, partial detailed visual events might remain on the display.Note that another option is to turn off the details immediately upon request. In this case, arefresh during the ‘‘sync’’ will erase the high-level operations that have already beenperformed. We tried this approach, but found it less eye-pleasing.Second, every client displays the visualization to the best of its abilities. The system

supports this feature in two ways. First, several implementations of the graphic displayobjects and operations can be done with different levels of graphic features (e.g., 2Dgraphic objects or 3D graphic objects). The client machine can choose whichimplementation to use. In addition, the server can send very detailed visual events orsimpler versions of them depending on the ability of the client to handle the graphicsoperations load. For example, when motion of an object has to be visualized, the numberof frames of the moving object from source to target is controlled. The source and thetarget frames are of high priority and the intermediate frames have lower priorities.A priority level for each client is determined. Thus, weaker machines will get fewermessages and will display simpler graphic operations.Finally, a way to handle communication bottlenecks is to send the code to the clients

and have it execute locally. This can be done at every nesting level of the code. The systemmonitors the communication loads and when a client seems to be unable to deal with allthe messages that are sent to it, the system changes its level such that more code will be sentto the client. This feature is implemented in the following way. Each function in thealgorithm is a method of a specific class. When the function is to be called, clients whose


level requires that this function be sent to them receive a copy of the object. The server,however, also executes the code in order to send the visual events generated within thefunction to the other clients. The clients that received the code of course do not get thesemessages. When the load monitor decides to change the level of a client, the actual changeis performed by the Channel Manager at the appropriate moment such that no messagesare sent twice or not sent at all to the client.

6. Examples

This section describes students experience when using MAVIS and presents severalobservations.

6.1. Case studies

To check the utility of the model, we asked two teams of undergraduate students toimplement a few algorithms with MAVIS and create their visualizations. The algorithmswere chosen so as to represent different families of algorithms. In particular, one teamimplemented Mergesort and Dijkstra’s algorithm for finding the single source shortestpaths in a weighted directed graph [29]. The second team implemented two path planningalgorithms used in robotics [30]. The first algorithm is based on the construction of avisibility graph, while the second algorithm is based on a Quad-tree data structure. Foreach team, implementing the first algorithm required the study of the MAVIS classes andthe API; implementing the second algorithm was much quicker and easier. Measuring theexact timing was difficult because the students had to study and understand eachalgorithm, implement it, design the animation, and go through phases in improving it.Movies describing the various visualizations can be viewed in http://www.ee.technion.ac.il/�ayellet/MAVIS-movies.

Generally, the development of a new visualization is done in three steps. First, thealgorithmic objects are identified and the algorithm is implemented in Java. Second, thevisualization objects are identified and implemented. These are the graphical displayobjects. Third, the interesting events of the algorithms are identified and implemented andeach event is assigned a priority level.

In our tests, each algorithm was executed and examined in the following configurations:on a stand-alone machine, on a client–server configuration over the Internet, and over theInternet using various load parameters. We hereby describe two of these algorithms andtheir visualizations.

6.1.1. Dijkstra’s algorithm

Given a weighted directed graph GðV ;EÞ where all the weights are non-negative and asource node s 2 V , the algorithm maintains a set S of vertices whose final shortest pathsfrom s have already been determined. The algorithm repeatedly selects a vertex u 2 V � S

with the minimum shortest path estimate, inserts it into S and relaxes all the arcs leaving it.The vertices contained in V � S are maintained in a priority queue.

The algorithmic objects are the graph, consisting of nodes and arcs, and the priorityqueue consisting of queue elements. In the visualization, the graph nodes as well as thequeue elements are presented as spheres and the arcs as straight lines. Fig. 10 demonstratesthe implementation of a graphic object, DrawNodeObject, that represents the Node object.

http://www.ee.technion.ac.il/~ayellet/MAVIS-movies

http://www.ee.technion.ac.il/~ayellet/MAVIS-movies

ARTICLE IN PRESS

Public class DrawNodeObject extends DrawObject {

String image_path; //path to directory where node images are.

ImageIcon I_n; //holds icon of node image

double radius;

double value = 0; // distance from source node

Color ans_color;

//if this node's value is true, display infinitypublic boolean showInfinite = false;

String id_name = new String(); // visual name

...

Fig. 10. Definition of a graphic object.


This object inherits from the basic graphic DrawObject object, which contains informationabout the position of the object. DrawNodeObject has additional attributes such as theimage of the sphere, its radius and information regarding its Dijkstra distance.The visualization consists of the following interesting events. The first interesting event,

initialization, consists of the display of the original graph and the formation of the priorityqueue. In the next interesting event, tree growing, the first node in the priority queue ischosen and inserted into S. This event is animated by moving the node from the queue tothe graph and moving a brush on the arc which connects it to the tree, painting it in red. Inthe next interesting event, cost update, all the outgoing arcs of this new node are relaxedand costs are updated if necessary. This event is animated by moving a brush on eachrelaxed arc in turn, painting it in cyan. The next event, queue update, updates the queueaccording to the new costs. In the visualization, when the position of a node in the priorityqueue changes, it is shown by an arrow pointing from the node’s current location to its newlocation, followed by the move. The final interesting event, results, displays the resultingshortest paths tree in red. Fig. 11 describes part of the tree growing event, painting the nodeextracted from the priority queue in red. Snapshots from the visualization are shown inFig. 12.Recall that each event can be assigned a different priority level. In our visualization, the

highest priority (always presented) is assigned to the initialization interesting event and tothe results event. In other words, if a client wishes to see only the highest level ofabstraction, this client will visualize the given graph and then the shortest path tree paintedin red on the graph. A medium priority is assigned to the tree growing event that displaysthe next selected node that joins the constructed tree and to the queue update event thatupdates the priority queue. Clients having this level will therefore view initialization, theadditions of nodes and red arcs to the shortest path tree, the queue updates correspondingto these additions and the display of the final tree. A low-level visualization also displaysthe cost update event in which every possible arc is examined and painted in cyan. Onlyclients having this level will view the full algorithm visualization.

6.1.2. Path planning algorithm using Quad-trees

Given source and target positions and several polygonal obstacles, the goal is to findthe shortest path from the source to the target, avoiding intersections with the obstacles.

ARTICLE IN PRESS

public class AlgoPaintNodeFinal implements Icommand {

private IObjectContainer context;private IDrawable dr;

// handles the outgoing events when running on the server sideprivate EventHandler outGoingEventHandler;

public void execute (Hashtable params) {

Color final_color = Color.red;

//get algoObject of the nodeString name1 = params.get("one").toString();

AlgoObject aObj1 = (AlgoObject)context.getObject(name1);

//get the node itselfDrawNodeObject dObj1 = (DrawNodeObject)aObj1.getAttachedDrawObject();

dObj1.setColor(final_color);

// the node is changed and should be re-displayeddObj1.select();

context.updateObject(aObj1);

outGoingEventHandler.sendUpdateEvent(aObj1,Messege.HighPriority);}

Fig. 11. Implementing the visualization of the tree growing event.


The algorithm recursively constructs a Quad-tree representing the obstacles. Based on theQuad-tree, an adjacency graph is built. Each empty square in the Quad-tree (i.e., a squarethrough which a robot can pass) becomes a node in the adjacency graph. Two nodes in theadjacency graph are connected by an arc, if their corresponding squares are adjacent.Finally, the shortest path between the source and the target positions is found in thisgraph.

The algorithmic objects are the adjacency graph, consisting of nodes and arcs, theobstacles and the Quad-tree consisting of squares in black, white or gray.

The interesting events of the visualization are as follows. The initialization eventinitializes the obstacle map. The construction of the Quad-tree is visualized by four types ofevents: square-selection, obstacle selection, square– polygon intersection test, and quad split

events. The square-selection event selects a square to be tested. The obstacle selection eventchooses a polygon against which a square will be checked. The square– polygon intersection

test event tests whether a given obstacle intersects a given square in the Quad-tree. Thisevent has three possible outcomes: the square and the polygon are disjoint, the squareintersects the polygon (gray square), or the square is contained in the polygon (blacksquare). The quad split event splits a gray square into four sub-squares. Gray squares at thelowest levels are painted black. An additional event is a graph construction event whichconstructs the adjacency graph from all white squares. The shortest path event finds theshortest path in the adjacency graph. Fig. 13 shows snapshots from the visualization.

Three priority levels were defined for this algorithm. The highest level consists of theinitialization event, the graph construction event, and the shortest path event. The next levelconsists also of the square– polygon intersection test event. The lowest level displays all theinteresting events.

ARTICLE IN PRESS

a b c

d e f

g h i

Fig. 12. Visualization of the shortest-path algorithm by Dijkstra. Both the graph and the priority queue are

shown. Cyan edges are being relaxed, while red edges are determined to be part of the shortest paths tree.


In this algorithm the priority levels are crucial for an effective teaching experience.During the visualization, the instructor can start at the most detailed level. Once theconcept has been explained, the instructor can move to the less detailed level and then tothe highest level which shows the complete graph and the shortest path. Due to the highcomplexity of the algorithm, it is not feasible to run the whole visualization at the highestlevel of detail because it would take too long. However, it is important to build the Quad-tree to a relatively high resolution to demonstrate the characteristics of the data-structure.Note that despite an identical input of this algorithm to the visibility graph algorithm

described in Section 3, the resulting paths differ. This is due to the finite resolution of theQuad-tree.

6.2. Observations

In this section we discuss three observations: the benefits of MAVIS when used forimplementing algorithms that the students are familiar or unfamiliar with; the benefits of

ARTICLE IN PRESS

input intersection test secondlevel of the Quad-tree

third level fourth level final level

final Quad-tree reachability graph shortest path

a b c

d e f

g h i

Fig. 13. Visualization of the path planning algorithm using Quad-trees. (a) Input, (b) intersection test, (c) second

level of the Quad-tree, (d) third level, (e) fourth level, (f) final level, (g) final Quad-tree, (h) reachability graph,

(i) shortest path.


using MAVIS for visualizing algorithms that are naturally predisposed for visualizations;and the importance of abstraction in visualization.

The algorithms implemented using MAVIS can be classified into two classes from thelearning point of view. The first class of algorithms are those that the students are familiarwith before implementing them using MAVIS, such as Mergesort. Still, the implementa-tion of the algorithms using MAVIS enhanced their understanding, due to the experienceof the implementation and the visualization. The multi-level capability of MAVIS is found


to be essential for debugging the algorithm. Without it, it would be highly inefficient toview the full detailed visualization during debugging. Finally, we found that the additionalwork required to transform a simple visualization into a multi-level visualization isminimal, since only a few lines had to be added to the code (Fig. 3).The other class of algorithms are those that the students had not encountered before,

i.e., the robot path planning algorithms. The students reported that implementing andvisualizing the algorithms were essential not only for debugging, but mainly forunderstanding the essence of the algorithms. This was demonstrated in the implementationof the QuadTree algorithm, where a misunderstanding of the algorithm was discovered bystudying the visualization of the shortest path. In this case, the visualization revealed thatthe path found was not the shortest one, and this observation led the student to focus onthe erroneous part of the implementation (the edge cost function) and correct it. Inconclusion, from the experience of the students who implemented these algorithms,working with MAVIS improved their understanding of the algorithms.The second observation concerns the relation between the algorithm to its visualization.

Some algorithms lend themselves to natural visualizations, stemming from their geometricproperties. For instance, the robot path planning algorithms are naturally predisposed forvisualizations, since they have a natural projection to two dimensions. In this case, thedesign of the visualization is straightforward. Moreover, visualizing the algorithm and itsresults are essential for understanding and debugging these types of algorithms. Withoutvisualization, it is very hard to tell if the algorithm is running correctly. On the other hand,there are algorithms for which effort and thought are required in designing a propervisualization. This is the case, for instance, in Mergesort. The students found the multi-level abstraction to be helpful, because they could think about the visualization in a top-down manner.The third observation is the importance of abstraction in student understanding. It is

well known that students have problems in grasping algorithms due to the abstractness ofthe concepts involved [31,32]. The visualization alone alleviates this problem by makingthe algorithm more concrete. The multi-level capabilities of MAVIS enable the student toexperience the algorithm at several levels of abstraction, making MAVIS very useful as atool for the regular and remote classrooms.

7. Conclusions

We have presented in this paper a conceptual model for an algorithm visualizationsystem embedded within a general distance learning framework. The main feature of thismodel is the support for multi-level visualizations necessary for addressing theheterogeneity of the Internet, the diversity of the students, and the iterative nature ofthe learning process. Another important feature of the model is the support forcollaboration and information sharing.We have also presented a system, MAVIS, that realizes the model. MAVIS has a

client–server architecture and supports clients running various operating systems. Itmonitors the loads of the network and adjusts the visualization parameters at each clientaccording to the loads and to the capabilities of each machine. Implementing newalgorithms and new algorithm visualizations with MAVIS is easy since its object-orientednature results in a flexible system whose basic classes can be easily extended by students.


Although using Java has many advantages, writing in a standard programming languagehas its drawback as well. In particular, it does not let the system hide all its implementationdetails. The programmer is thus required to understand the system since no higher-levelabstraction is available. A possible solution is to provide an additional abstraction levelabove Java that handles the structures of MAVIS.

In general, this paper has focused on the conceptual model and the architecture of asystem that facilitates the creation of active-learning collaborative environments thatsupports algorithm visualization. We believe that without such systems, people will bereluctant to create animations of algorithms. Of course, it is important to check theeducational effectiveness of such systems. This is a separate research issue that should bedone by experts in performing studies on human subjects.

In addition, there are several directions for future research in enhancing the system.First, we would like to embed a more advanced statistical monitoring algorithm forhandling overloads. Second, we intend to add a recording mechanism that will let usersrecord classes and re-visualize them at the students’ convenience. Third, we would like toadd video and voice capabilities. Finally, with the advent of portable devices, we wouldlike to extend MAVIS to handle these architectures. Another possible future direction is toincorporate the multi-level concept of MAVIS into an existing virtual learningenvironment.

Acknowledgments

We would like to thank the following people for implementing algorithms andvisualizations within MAVIS: Lior Komem, Eli Cohen, Marina Magitman, and TanyaKostanovich. This work was partially supported by the Israeli Ministry of Science, Grant01-01-01509, by the Smoler Research Fund, by the Technion Fund for The Promotion ofResearch, and by the Ollendorff foundation.

References

[1] M.H. Brown, Algorithm Animation, MIT Press, Cambridge, MA, 1988.

[2] M.H. Brown, Zeus: a system for algorithm animation and multi-view editing, in: IEEE Workshop on Visual

Languages, 1991, pp. 10–17.

[3] M.H. Brown, M.A. Najork, Collaborative active textbooks: a web-based algorithm animation system for an

electronic classroom, in: IEEE Symposium on Visual Languages, 1996, pp. 266–275.

[4] M.H. Brown, R. Raisamo, JCAT: collaborative active textbooks using Java, Computer Networks and ISDN

Systems 29 (14) (1997) 1577–1586.

[5] M.H. Brown, R. Sedgewick, Techniques for algorithm animation, IEEE Software 2 (1) (1985) 28–39.

[6] Y. Frishman, A. Tal, Visualization of mobile object environments, in: ACM Symposium on Software

Visualization, May 2005, pp. 145–154.

[7] M.A. Najork, M.H. Brown, A library for visualizing combinatorial structures, in: IEEE Visualization,

October 1994, pp. 164–171.

[8] M. Shneerson, A. Tal, Visualization of geometric algorithms in an electronic classroom, Journal of Visual

Languages and Computing 6 (6) (2000) 615–637.

[9] J.T. Stasko, TANGO: a framework and system for algorithm animation, Computer 23 (9) (1990) 27–29.

[10] A. Tal, D.P. Dobkin, Visualization of geometric algorithms, IEEE Transactions on Visualization and

Computer Graphics 1 (2) (1995) 194–204.

[11] P. Crescenzi, C. Demetrescu, I. Finocchi, R. Petreschi, Reversible execution and visualization of programs

with LEONARDO, Journal of Visual Languages and Computing 11 (2) (2000) 125–150.


[12] G. Rossling, B. Freisleben, ANIMAL: a system for supporting multiple roles in algorithm animation,

Journal of Visual Languages and Computing 13 (3) (2002) 341–354.

[13] H. Abdel-Wahab, K. Maly, E. Stoica, Multimedia integration into a distance learning environment, in: Third

International Conference on Multimedia Modelling, November 1996, pp. 69–85.

[14] B. Aktan, C.A. Bohus, L.A. Crowl, M.H. Shor, Distance learning applied to control engineering

laboratories, IEEE Transactions on Education 39 (3) (1996) 320–326.

[15] K. Maly, H. Abdel-Wahab, C.M. Overstreet, J.C. Wild, A. Gupta, A. Youssef, E. Stoica, E. Al-Shaer,

Interactive distance learning over intranets, IEEE Internet Computing 1 (1) (1997) 60–71.

[16] L. Sherry, Issues in distance learning, International Journal of Distance Education 1 (4) (1996) 337–365.

[17] S.R. Hansen, N.H. Naryanan, D. Schrimpsher, Helping learners visualize and comprehend algorithms,

Interactive Multimedia Electronic Journal of Computer-Enhanced Learning 2 (1) (2000).

[18] J.T. Stasko, A. Badre, C. Lewis, Do algorithm animations assist learning? an empirical study and analysis, in:

ACM INTERCHI, New York, 1993, pp. 61–66.

[19] V.K. Proulx, R. Rasala, H.J. Fell, Fundamentals of computer science: what are they and how do we teach

them, SIGCSE Bulletin 29 (3) (1997) 42–48.

[20] S.H. Rodger, Integrating animations into courses, in: ACM SIGCSE/SIGCUE Conference on Integrating

Technology in Computer Science Education, 1996, pp. 72–74.

[21] J.T. Stasko, Using student-built algorithm animations as learning aids, in: ACM Technical Symposium on

Computer Science Education, 1997, pp. 25–29.

[22] C.D. Hundhausen, S.A. Douglas, J.T. Stasko, A meta-study of algorithm visualization effectiveness, Journal

of Visual Languages and Computing 13 (3) (2002) 259–290.

[23] T. Koschmann (Ed.), CSCL: Theory and Practice of an Emerging Paradigm, Lawrence Erlbaum Associates,

Publishers, Hillsdale, NJ, 1996.

[24] I. Vaghi, C. Greenhalgh, S. Benford, Coping with inconsistency due to network delays in collaborative

virtual environments, in: VRST, 1999, pp. 42–49.

[25] S. Pettifer, A. West, Subjectivity and the relaxing of synchronization in networked virtual environments, in:

VRST, 1999, pp. 170–171.

[26] D. Snowdon, C. Greenhalgh, S. Benford, What you see is not what I see: subjectivity in virtual environments,

in: Framework for Immersive Virtual Environments, December 1995, pp. 53–69.

[27] M. Stefik, D.G. Bobrow, G. Foster, S. Lanning, D. Tatar, WYSIWIS revised: early experiences with multi-

user interfaces, TOOIS 5 (2) (1987) 147–167.

[28] C.S. Horstmann, G. Cornell, Core Java, Prentice-Hall, Englewood Cliffs, NJ, 1999.

[29] T.H. Cormen, C.E. Leiserson, R.L. Rivest, C. Stein, Introduction to Algorithms, MIT Press, McGraw-Hill,

Cambridge, MA, New York, 2001.

[30] J.C. Latombe, Robot Motion Planning, Kluwer Academic Publishers, Boston, 1991.

[31] O. Hazzan, How students attempt to reduce abstraction in the learning of mathematics and in the learning of

computer science, Computer Science Education 13 (2) (2003) 95–122.

[32] O. Hazzan, I. Hadar, Reducing abstraction when learning graph theory, Journal of Computers in

Mathematics and Science Teaching 24 (3) (2005) 255–272.

mavis: a multi-level algorithm visualization system within a collaborative distance learning...

Documents