-
Notifications
You must be signed in to change notification settings - Fork 12
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.
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.
<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>
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>
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 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 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.
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"}
}
);
- 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"]]]