Arborator as viewer

In order to integrate dependency graphs into your webpage, please check the example file on the arborator website. The easiest is probably to look at the source code and integrate it into your webpage.

Table of Contents the files the holder the draw function the json syntax of the token object using the viewer to show comparison files

the files

In brief, you need the following files:

• jquery.js (1.7 or better)
• raphael.js (1.5 or better)
• and a version of arborator.view, either the human readable version arborator.view.js, for modifying parameters, or the compressed version arborator.view.min.js for quicker loading and execution.

All three javascript files should be imported in the header of your webpage.

 	<script type="text/javascript" src="script/jquery.js"></script>
 	<script type="text/javascript" src="script/raphael.js"></script>

and

 	<script type="text/javascript" src="script/arborator.view.js"></script>

or

 	<script type="text/javascript" src="script/arborator.view.min.js"></script>

the holder

Wherever you want your dependency graph to appear, you have to create a holder, with an id of your choice:

 <div id="holder1" class="svgholder"> </div>

the draw function

Somewhere on your webpage (header or body doesn't matter) you have to add the draw function into a $(document).ready(function(){ function

 <script type="text/javascript"> 
 		$(document).ready(function(){ 
 			draw("holder1",tokens1); 
 		});
 </script>

You add as many calls to the draw functions as you want to have dependency graphs.

It is important to include the draw function in a document ready function, in order for the other js files to be loaded before this code is executed.

The draw function takes two arguments:

• the id of the holder (the empty div where you want your dependency graph to appear)
• the tokens

the json syntax of the token object

The tokens object has the following syntax:

• Every node has a number starting with one, not with zero (whether the number is between quotes or not should not matter: 3:... or "3":...)
• The number links to another object with all the features of the node. Depending on the parameters in the arborator.view script, some attributes are special. By default these are the following:
  • t is the token, e.g. "t": "soit"
  • cat is the category (POS), e.g. "cat": "J"
  • lemma is the lemma

The number and the names of these special features can be parametrized in the beginning of arborator view.

• The feature gov is special: It contains another object, attribute value couples giving the governors of the given node. For example, {1:"subject"} says that node 1 is a subject of the given node. A node can have more than one governor: {"7": "obj_inherited", "10": "para"}. The governor '0' is special: It is the root link creating a straight line to the top of the canvas.
• Other features will not appear in this mode.

Check this complete example:

 draw("holder2",
 {
 "1": {"cat": "J", "gov": {"3": "attention"}, "index": "20", "lemma": "soit", "lexid": "lex20", "nb": "1", "t": "soit", "token": "soit"}, 
 "2": {"cat": "Cl", "gov": {"3": "obj"}, "index": "21", "lemma": "on", "lexid": "lex21", "nb": "2", "t": "on", "token": "on"}, 
 "3": {"cat": "V", "control": "-", "extraction": "-", "gov": {"0": "root"}, "index": "22", "inv": "-", "lemma": "travailler", 
       "lexid": "lex22", "mode": "subjonctive/indicative", "nb": "3", "neg": "-", "number": "sg", "person": "3", "sat": "+", 
       "t": "travaille", "tense": "present", "token": "travaille"}
 }
 ); 

using the viewer to show comparison files

• It is also possible to use this viewer to show comparison graphs (graphical diffs between dependency graphs). They have a special syntax: Features can be common to all trees (to be shown in gray) and to be different between the trees (for example between different annotators - to be shown in different colors). In this case, all features are arrays:
  • When a feature is common, it is coupled with ["ok"]

 "cat": [["J", ["ok"]]]
 "gov": {"3": [["attention", ["ok"]]]}

• • When a feature differs, we list the different possibilities with the name of the different annotators (which will appear in popups)

 "gov": {"3": [["obj", ["admin"]], ["sub", ["parser"]]]