1. Simply put the CoNLL-U data between <conll> tags where you want to show the dependency graph.
2. Import arborator-draft.css, arborator-draft.js, d3.js, and jquery.
3. Add this in the end of your html page:

     window.onload = function () { 
		new ArboratorDraft(); // START
        }

Automatically, the CoNLL-U data will be transformed into beautiful dependency graphs!

Graphical options are in arborator-draft.css

If you want to generally modify which features are shown, modify these lines in the arborator-draft.js:

    shownfeatures=["FORM", "UPOS", "LEMMA", "MISC.Gloss"];
    shownmetas=['text_en']

If you want to temporarily modify which features are shown, add the shownfeatures attribute to the meta-features of the conll representations, and provide the list of features separated by commas. Morphosyntactic features must be prefixed by FEATS. and miscellaneous features by MISC. as in:

# shownfeatures = FORM, UPOS, LEMMA, MISC.Gloss, FEATS.ExtPos, FEATS.PhraseType, FEATS.InTitle

If you want to have a button to show the complete conll data (not only per tree), change showAllConllButton to true

If you want to add those two blue buttons just below to your page, which allow to download the complete set of svg or png images in a zip, add jszip.min.js and FileSaver.min.js to the imports

---

Please admire the speed of the non-blocking rendering in this file with many separate CoNLL nodes and that file with one very long CoNLL node

Todo:

• add sound player if sound_url is present.
• For SVG and PNG download, update automatically the information from the .css file, instead of copying it into the code as defaultcss. See problem at https://stackoverflow.com/questions/3211536/accessing-cross-domain-style-sheet-with-cssrules
• When hanging back in the conll node, fix the order with the neighbors, so that a surrounding div becomes unnecessary.

# sent_id = KAD_15_Money-Wahala_MG__22 # sound_url = http://www.tal.univ-paris3.fr/trameur/iTrameur-naija/mp3/KAD_15_Money-Wahala_MG.mp3 # speaker_id = Sp194 # text = # how { di gene- || generation } go be ?// # text_en = How will the next gene… generation be? # text_ortho = How di gene-... generation go be? # shownfeatures = FORM, UPOS, LEMMA, MISC.Gloss, FEATS.PronType, FEATS.Aspect 1 # # PUNCT _ _ 2 punct _ AlignBegin=85160|AlignEnd=85800|Gloss=PUNCT 2 how how ADV _ PronType=Int 0 root 10:@mod AlignBegin=85800|AlignEnd=86049|Gloss=how.Q 3 { { PUNCT _ _ 5 punct _ AlignBegin=86049|AlignEnd=86079|Gloss=PUNCT 4 di the DET _ Definite=Def|PronType=Art 5 det _ AlignBegin=86079|AlignEnd=86230|Gloss=DEF.ART 5 gene- X X _ _ 9 subj _ AlignBegin=86230|AlignEnd=86530|Gloss=X 6 || || PUNCT _ _ 7 punct _ AlignBegin=86530|AlignEnd=86560|Gloss=PUNCT 7 generation generation NOUN _ _ 5 conj:coord _ AlignBegin=86560|AlignEnd=86950|Gloss=generation 8 } } PUNCT _ _ 5 punct _ AlignBegin=86950|AlignEnd=86980|Gloss=PUNCT 9 go go AUX _ Aspect=Prosp 2 comp:cleft _ AlignBegin=86980|AlignEnd=87110|Gloss=PROSP 10 be be VERB _ PartType=Cop 9 comp:aux _ AlignBegin=87110|AlignEnd=87310|Gloss=be 11 ?// ?// PUNCT _ _ 2 punct _ AlignBegin=87310|AlignEnd=87340|Gloss=PUNCT 1 l' le DET _ _ 2 spe _ _ 2 avenir avenir NOM _ _ 3 subj _ _ 3 dépend dépendre VRB _ _ 0 root _ _ 4 de de PRE _ _ 3 comp _ _ 5 notre son DET _ _ 6 spe _ _ 6 capacité capacité NOM _ _ 4 dep _ _ 7 à à PRE _ _ 6 dep _ _ 8 construire construire VNF _ _ 7 dep _ _ 9 à à PRE _ _ 7 para _ _ 10 créer créer VNF _ _ 9 dep _ _ 11 à à PRE _ _ 9 para _ _ 12 rêver rêver VNF _ _ 11 dep _ _ 13 ensemble ensemble ADV _ _ 12 ad _ _ 14 les le DET _ _ 15 spe _ _ 15 voies voie NOM _ _ 12 comp _ _ 16 de de PRE _ _ 15 dep _ _ 17 l' le DET _ _ 18 spe _ _ 18 aventure aventure NOM _ _ 16 dep _ _ 19 humaine humain ADJ _ _ 18 dep _ _