forked from Sensaku/sparql_lib
-
Notifications
You must be signed in to change notification settings - Fork 0
/
barchart_documentation.html
354 lines (326 loc) · 14.3 KB
/
barchart_documentation.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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="./../css/prism.css">
<link rel="stylesheet" href="./../css/leaflet.css">
<script src="https://d3js.org/d3.v6.js"></script>
<script src="./lib/echarts.js"></script>
<script src="lib/prism.js" defer></script>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<title>SPARQL Visualisation Library</title>
</head>
<body>
<section id="body">
<h1>Barchart, Stacked Barchart and Multi-set Barchart visualisation</h1>
<h2>1. Description of barchart and multi-set barchart visualisation usage</h2>
<h3>1.1 - Barchart</h3>
<p>Also known as Bar Graph or Column Graph. A Bar Chart uses either horizontal or vertical bars
(column chart) to show discrete, numerical comparisons across categories. One axis of the chart
shows the specific categories being compared and the other axis represents a discrete value scale.
Bar Charts are distinguished from Histograms, as they do not display continuous developments over
an interval. Instead, Bar Chart's discrete data is categorical and therefore answers the question
of "how many?" in each category. </p>
<p>Source: <a href="https://datavizcatalogue.com/methods/bar_chart.html">Dataviz Catalog - Barchart</a></p>
<h3>1.2 - Multi-set Barchart</h3>
<p> Also known as a Grouped Bar Chart or Clustered Bar Chart.
This variation of a Bar Chart can be used when two or more data series need to be plotted all on the same
axis and grouped into parent categories.
Like on a Bar Chart, the length of each bar on a Multiset Bar Chart is used to show discrete, numerical
comparisons amongst categories. Each bar for a data series is assigned a colour to distinguish them apart.
Bars in the same group are placed together and are then spaced apart from other bar groupings.
The use of Multiset Bar Charts is usually to compare across categories that contain the same sub-categorical
variables between them. Each bar is a subcategory that is grouped into a larger parent category.
Multiset Bar Charts can also be used to compare mini Histograms to each other, so each bar in the group
would represent the significant intervals of a variable. Another use could be to use Multiset Bar Charts to
show data changing over time by having, for example, each bar represent a point in time such as a year.
The downside of Multiset Bar Charts is that they become harder to read the more bars you have in one group.
Therefore, you should try to limit the number of bars per group. </p>
<p>Source : <a href="https://datavizcatalogue.com/methods/multiset_barchart.html">Dataviz catalog - Multi-set
Barchart</a></p>
<h2>2. How to use</h2>
<p>To add a barchart visualisation, you have to define a parameters data-object with the following attributes:
</p>
<ul>
<li>endpoint: the SPARQL endpoint URL to be queried</li>
<li>query: The SPARQL query</li>
<li>title: A representativ title for the visualisation</li>
<li>type: Type "barchart" to specified that you want a barchart visualisation</li>
<li>stacked: Specified if the series should be stacked</li>
<li>scale: Specified the scale based of the bar (log or linear)</li>
<li>display: Specified if the display of bar should be vertical or horizontal</li>
<li>config: An array of variable matching that correspond to the different information</li>
<li>options: An array of options to customize the visualisation</li>
</ul>
<p>The following section will details the different key for specific barchart parameter, config and options
parameters.</p>
<h3>2.1 - Specific parameters</h3>
<p>Few parameters available can customise the display of the barchart:</p>
<p>- <b>stacked</b>: boolean [true, false] (<i>false by default</i>). Set the display of bar to stacked.<br>
<pre><code class="language-javascript"> stacked: true </code></pre>
</p>
<p>- <b>scale</b>: string [linear, log] (<i>'linear' by default</i>). Change the base of displayed value.<br>
<pre><code class="language-javascript"> scale: 'log' </code></pre>
<p>- <b>display</b>: string [row, column] (<i>'column' by default</i>). <br>
<pre><code class="language-javascript"> display: 'row' </code></pre>
</p>
</p>
<h3>2.2 - Config parameter</h3>
<p>The barchart requieres 2 mandatory keys: (1) <b>label</b> and (2) <b>value</b><br>
An extra key <b>category</b> can be specified. The config parameter takes an array of object using these key
</p>
<p>- <b>label</b>: string. This parameter specify which SPARQL variable will be used to define value labels.
</p>
<pre><code class="language-javascript">config: [{
label: 'endpointUrl'
}]</code></pre>
<p>- <b>value</b>: string. This parameter specify which SPARQL variable will be used to define values for
labels.
This is closely link to the label variable.</p>
<pre><code class="language-javascript">config: [{
value: 'triples'
}]
</code></pre>
<p>- <b>category</b>: string. This parameter specify which SPARQL variable will be used to define categories of
value for each label (ie, a bar for each label). If the given string is not a SPARQL variable, the string
define
a unique category of value. If a SPARQL variable define the category, you should only use one Object of
SPARQL variable.
The visualisation become a multi-set barchart if this parameter is used. </p>
<pre><code class="language-javascript">config: [{
category: 'number of triples'
}]
</code></pre>
<p>The following line of code is a full example of the config parameter with only one object of SPARQL variable.
</p>
<pre><code class="language-javascript">config: [{
label: 'endpointUrl',
value: 'triples',
category: 'nb_triple'
}]
</code></pre>
<p>The following line of code is a full example of the config parameter using multiple object of SPARQL
variable. The barchart contains 2 kind of bar define by the category.</p>
<pre><code class="language-javascript">config: [{
label: 'endpointUrl',
value: 'triples',
category: "number of triples"
},{
label: 'endpointUrl',
value: 'classes',
category: 'number of classes'
}]
</code></pre>
<h3>2.3 - Options parameter</h3>
<p>Currently not implemented</p>
<h2>3. Examples</h2>
<h3>3.1 - Simple barchart</h3>
<section class="code-display">
<div class="code-left">
<h4>SPARQL Query</h4>
<pre><code class="language-sparql line-numbers">PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
prefix ex: <http://www.example.org/ontology#>
SELECT ?teamname (count(?person) as ?nb_person) WHERE {
?person ex:belong ?team.
?team ex:Name ?teamname.
}GROUP BY ?team</code></pre>
</div>
<div class="code-right">
<h4>Javascript</h4>
<pre><code class="language-javascript line-numbers">const parameters_ex_1 = {
endpoint: endpoint_local,
query: query_ex_1,
type: 'bar',
title: "Number of people per team",
config: [{
label: "teamname",
value: "nb_person"
}]
}</code></pre>
</div>
</section>
<section class="code-display">
<div class="code-left">
<h4>barchart render</h4>
<div id="barchart_1" class="chart-div"></div>
</div>
<div class="code-right"></div>
</section>
<h3>3.2 - Barchart with label specified</h3>
<p>On this example, we want to show how many papers each team from the dataset publish per year.</p>
<section class="code-display">
<div class="code-left">
<h4>SPARQL Query</h4>
<pre><code class="language-sparql line-numbers">PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX ex: <http://www.example.org/ontology#>
SELECT ?teamname ?year (count(?paper) as ?nb_paper) WHERE {
?paper ex:author ?person;
ex:year ?year.
?person ex:belong ?team.
?team ex:Name ?teamname.
}
GROUP BY ?team ?year</code></pre>
</div>
<div class="code-right">
<h4>Javascript</h4>
<pre class="code-block">
<code class="language-javascript line-numbers"><div id="map1"></div>
const parameters_ex_1 = {
endpoint: endpoint_local,
query: query_ex_1,
type: 'bar',
title: "Number of article per team per year",
config: [{
category: "teamname",
label: "year",
value: "nb_paper"
}]
};
loadChartViz("barchart_1", parameters_ex_1)
</code></pre>
</div>
</section>
<section class="code-display">
<div class="code-left">
<h4>Barchart render</h4>
<div id="barchart_2" class="chart-div"></div>
</div>
<div class="code-right">
</div>
</section>
<h3>3.3 - Multi-set barchart with multiple variable config definition</h3>
<p>This is an example of a declaration of a multi-set barchart visualisation with the use of multiple variable
config definition.</p>
<section class="code-display">
<div class="code-left">
<h4>SPARQL Query</h4>
<pre><code class="language-sparql line-numbers">PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX ex: <http://www.example.org/ontology#>
SELECT ?teamname ?nb_person ?nb_paper WHERE{
{SELECT ?teamname (count(?person) as ?nb_person) WHERE {
?person ex:belong ?team.
?team ex:Name ?teamname.
}GROUP BY ?team}
{SELECT ?teamname (count(?paper) as ?nb_paper) WHERE {
?paper ex:author ?person;
ex:year ?year.
?person ex:belong ?team.
?team ex:Name ?teamname.
}GROUP BY ?team }
}</code></pre>
</div>
<div class="code-right">
<h4>Javascript</h4>
<pre><code class="language-javascript line-numbers"><div id="barchart_3"></div>
const parameters_ex_3 = {
endpoint: endpoint_local,
query: query_bar_3,
type: 'bar',
title: "Number of paper and number of person per team",
config: [{
category: "nb paper",
label: "teamname",
value: "nb_paper"
},
{
category: "nb person",
label: "teamname",
value: "nb_person"
}
]
};
loadChartViz("barchart_3", parameters_ex_3)
</code></pre>
</div>
</section>
<section class="code-display">
<div class="code-left">
<h4>Barchart render</h4>
<div id="barchart_3" class="chart-div"></div>
</div>
<div class="code-left"></div>
</section>
</section>
<script type="module">
import loadChartViz from "./modules/visualisationManager.js";
const endpoint_local = "http://localhost:8080/sparql";
const query_ex_1 = `PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
prefix ex: <http://www.example.org/ontology#>
SELECT ?teamname (count(?person) as ?nb_person) WHERE {
?person ex:belong ?team.
?team ex:Name ?teamname.
}GROUP BY ?team`
const parameters_ex_1 = {
endpoint: endpoint_local,
query: query_ex_1,
type: 'bar',
title: "Number of people per team",
config: [{
label: "teamname",
value: "nb_person"
}]
}
loadChartViz("barchart_1", parameters_ex_1)
const query_ex_2 = `PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX ex: <http://www.example.org/ontology#>
SELECT ?teamname ?year (count(?paper) as ?nb_paper) WHERE {
?paper ex:author ?person;
ex:year ?year.
?person ex:belong ?team.
?team ex:Name ?teamname.
}
GROUP BY ?team ?year`;
const parameters_ex_2 = {
endpoint: endpoint_local,
query: query_ex_2,
type: 'bar',
title: "Number of article per team per year",
config: [{
category: "teamname",
label: "year",
value: "nb_paper"
}]
};
loadChartViz("barchart_2", parameters_ex_2)
const query_bar_3 = `PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX ex: <http://www.example.org/ontology#>
SELECT ?teamname ?nb_person ?nb_paper WHERE{
{SELECT ?teamname (count(?person) as ?nb_person) WHERE {
?person ex:belong ?team.
?team ex:Name ?teamname.
}GROUP BY ?team}
{ SELECT ?teamname (count(?paper) as ?nb_paper) WHERE {
?paper ex:author ?person;
ex:year ?year.
?person ex:belong ?team.
?team ex:Name ?teamname.
}GROUP BY ?team }}`
const parameters_ex_3 = {
endpoint: endpoint_local,
query: query_bar_3,
type: 'bar',
title: "Number of paper and number of person per team",
config: [{
category: "nb paper",
label: "teamname",
value: "nb_paper"
},
{
category: "nb person",
label: "teamname",
value: "nb_person"
}
]
};
loadChartViz("barchart_3", parameters_ex_3)
</script>
</body>
</html>