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.

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>

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.