Spaces:
Running
Running
File size: 10,674 Bytes
ec63fa6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="arborator-draft.css" type="text/css" />
<title>Arborator Draft - Example of visualization of CoNLL-U data</title>
</head>
<body>
<div class="container">
<div style="text-align: center;">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="-4202 0 5704.1939 1840.839"
style="image-rendering:optimizeQuality;"
height="130"
width="270"
xml:space="preserve">
<path
style="fill:none;stroke:#4a2769;stroke-width:128.73750305;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"
d="m -1890.5398,1002.7933 -1822.5445,615.288 c -261.3344,-190.4146 -424.5469,-433.2903 -424.5469,-661.59345 0,-685.88115 1244.2446,-1296.6446 2780.191,-1296.6446 1534.97478,0 2795.2653,610.76345 2795.2653,1296.6446 0,685.88105 -1252.26757,1244.49535 -2787.2424,1244.49535 -239.9613,0 -490.6091,-19.4301 -718.9123,-43.7176 L -751.94297,618.40481 -882.8496,663.4494" /><path
style="fill:none;stroke:#dd137b;stroke-width:128.73750305;stroke-miterlimit:4;"
d="M -864.53567,745.22843 C -964.68477,501.46149 -1354.4152,-183.90675 -1694.5756,-3.2652517 -2014.6556,165.68318 -2049.9732,423.17981 -1871.2632,1084.3717 c 67.0564,232.3776 161.3346,398.0135 238.7197,540.6756" /><path
style="fill:none;stroke:#4a2769;stroke-width:128.73750305;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"
d="M -2068.3297,2157.2657 -751.94297,618.40481"
/>
</svg>
</div>
<div class="row" style="margin-top: 15px;">
<div class="panel panel-primary" style="border-color: #4a2769;">
<div class="panel-heading" style="background-color: #4a2769;"><h2 >It's easy to add dependency graphs to your web page</h2></div>
<div class="panel-body">
<ol>
<li> <strong>Simply put the CoNLL-U data between <conll> tags where you want to show the dependency graph.</strong></li>
<li><strong>Import arborator-draft.css, arborator-draft.js, d3.js, and jquery.</strong></li>
<li><strong>Add this in the end of your html page:</strong></li>
</ol>
<pre><code> window.onload = function () {
new ArboratorDraft(); // START
}</code></pre>
<p><strong>Automatically, the CoNLL-U data will be transformed into beautiful dependency graphs!</strong></p>
<p>Graphical options are in arborator-draft.css</p>
<p>If you want to generally modify which features are shown, modify these lines in the arborator-draft.js:</p>
<pre><code> shownfeatures=["FORM", "UPOS", "LEMMA", "MISC.Gloss"];
shownmetas=['text_en']</code></pre>
<p>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:</p>
<pre><code># shownfeatures = FORM, UPOS, LEMMA, MISC.Gloss, FEATS.ExtPos, FEATS.PhraseType, FEATS.InTitle
</code></pre>
<p>If you want to have a button to show the complete conll data (not only per tree), change <code>showAllConllButton</code> to true</p>
<p>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 <code>jszip.min.js</code> and <code>FileSaver.min.js</code> to the imports</p>
<hr/>
<p>Please admire the speed of the non-blocking rendering in <a href="speedtest.separateConllTags.html">this file with many separate CoNLL nodes</a> and <a href="speedtest.oneBigConllTag.html">that file with one very long CoNLL node</a></p>
<p>Todo:
<ul>
<li>add sound player if sound_url is present.</li>
<li>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</li>
<li>When hanging back in the conll node, fix the order with the neighbors, so that a surrounding div becomes unnecessary.</li>
</ul> </p>
</div>
<div class="panel-footer">
<button id="btnSvgZip" class="btn btn-primary" style="background-color: #4a2769; border-color: #4a2769;">Export SVG files in Zip</button>
<button id="btnPngZip" class="btn btn-primary" style="background-color: #4a2769; border-color: #4a2769;">Export PNG files in Zip</button>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-primary" style="border-color: #4a2769;">
<div class="panel-heading" style="background-color: #4a2769; border-color: #4a2769;"><h2>First example of CoNLL-U data surrounded by Conll tags</h2></div>
<p>Random text before the div containing the conll tag</p>
<div class="panel-body">
<conll>
# 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 _ _
</conll>
</div>
<p>Random text after the div containing the conll tag</p>
</div>
</div>
<div class="row">
<div class="panel panel-danger">
<div class="panel-heading" style="background-color: #dd137b;color:white; border-color: #dd137b;"><h2>Another example of CoNLL-U data surrounded by Conll tags</h2></div>
<div class="panel-body">
<conll>
# text_en = I wrote the letter with a quill.
1 Я ja PRON _ Case=Nom|Number=Sing|Person=1|PronType=Prs 2 nsubj _ Gloss=I
2 написал napisat' VERB _ Gender=Masc|Number=Sing|VerbForm=Part|Voice=Act 0 root _ Gloss=wrote
3 письмо pis'mo NOUN _ Case=Acc|Gender=Neut|Number=Sing 2 dobj _ Gloss=the-letter
4 пером pero NOUN _ Case=Ins|Gender=Neut|Number=Sing 2 nmod _ Gloss=with-a-quill
1 car car COO _ _ 12 mark _ _
2 dans dans PRE _ _ 12 periph _ _
3 un un DET _ _ 4 spe _ _
4 monde monde NOM _ _ 2 dep _ _
5 où où PRQ _ _ 9 ad _ _
6 rien rien PRO _ _ 8 subj _ _
7 n' ne CLN _ _ 8 ad _ _
8 est être VRB _ _ 4 dep _ _
9 figé figer VPP _ _ 8 aux _ _
10 l' le DET _ _ 11 spe _ _
11 avenir avenir NOM _ _ 12 subj _ _
12 dépend dépendre VRB _ _ 0 root _ _
13 de de PRE _ _ 12 comp _ _
14 nous lui PRO _ _ 13 dep _ _
</conll>
</div>
</div>
</div>
</div>
<!--
-->
<!-- <script language="JavaScript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js"></script> -->
<script src="d3.js"></script>
<!-- <script src="d3-drag.min.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script> -->
<script src="jquery-3.2.1.min.js"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
<!-- <script src="bootstrap.min.css"></script> -->
<script src="FileSaver.min.js"></script>
<script src="jszip.min.js"></script>
<!-- <script type="text/javascript" src="rgbcolor.js"></script>
<script type="text/javascript" src="StackBlur.js"></script> -->
<script type="text/javascript" src="canvg.js"></script>
<script language="JavaScript" type="text/javascript" src="arborator-draft.js"></script>
<script>
window.onload = function () {
new ArboratorDraft(myshownfeatures=["FORM", "UPOS", "LEMMA", "MISC.Gloss"]); // START. myshownfeatures has the standard value here and can be omitted if this is the desired set of features to be shown.
}
</script>
</body>
</html>
|