Required Files and HTML

Loading the Required Files

The easiest way to check the required files is to look at the examples directory and copy one of those files as a template for your new AV.

If done manually, the files required (in this order) are as follows. Note that [JSAV] refers to the relative position of the JSAV library directory, which depends on where you are developing from.

• jquery.transit: [JSAV]/lib/jquery.transit.js
• Raphaël: [JSAV]/lib/raphael.js
• The library: Either [JSAV]/build/jsav.js or [JSAV]/build/jsav-min.js. This must always be included.

The main jQuery library must always be loaded. jQuery UI and jquery.transit are only needed when you use the library to show animations, such as using the data structures or graphical primitives and modifying them. In other words, using any other part of the library than the messaging API. Raphaël is only needed when using graphical primitives like circles and rectangles or when using data structures with edges.

In addition, developers must include the supporting .css file: [JSAV]/css/JSAV.css

HTML Template for the Visualization

Visualizations generally include two parts: HTML DOM elements, and JavaScript elements. The HTML section typical includes something like this:

<div id="container">
  <div class="jsavcontrols"></div>
  <p class="jsavoutput jsavline"></p>
</div>

• container This is the container element for the visualization
• jsavcontrols The library will generate slideshow controls inside this element if your visualization uses the slideshow API
• jsavoutput The area where the messages from the visualization will be displayed to the user. Type can further be specified using either class jsavline or jsavscroll. See the Messages API for more details.

If you want a finer control on where inside the JSAV container the data structures are added, you can also add <div class="jsavcanvas"></div>. Then, all DOM elements created by JSAV will be added inside this element.