-
Notifications
You must be signed in to change notification settings - Fork 0
/
example_arborator-draft.html
198 lines (172 loc) · 10.4 KB
/
example_arborator-draft.html
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
<!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>