source: main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/transform/pages/sgvizler.xsl@ 35093

Last change on this file since 35093 was 35093, checked in by davidb, 3 years ago

General text update; auto-focus param added into ssv_execute()
  • Property svn:executable set to *
File size: 18.9 KB
Line 
1<?xml version="1.0" encoding="UTF-8"?>
2<xsl:stylesheet version="1.0"
3 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
4 xmlns:java="http://xml.apache.org/xslt/java"
5 xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
6 xmlns:gslib="http://www.greenstone.org/skinning"
7 xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
8 extension-element-prefixes="java util"
9 exclude-result-prefixes="java util">
10
11 <!-- use the 'main' layout -->
12 <xsl:import href="layouts/main.xsl"/>
13
14
15 <xsl:variable name="graphURI">https://so-we-must-think.space<xsl:value-of select="$siteURL"/><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="$collName"/></xsl:variable>
16
17 <xsl:include href="dataviz/made-the-final.xsl"/>
18 <xsl:include href="dataviz/list-of-winners.xsl"/>
19 <xsl:include href="dataviz/list-of-losers.xsl"/>
20 <xsl:include href="dataviz/top-3-with-mir-content.xsl"/>
21 <xsl:include href="dataviz/got-nul-point.xsl"/>
22 <xsl:include href="dataviz/got-nul-point-after-winning.xsl"/>
23 <xsl:include href="dataviz/voting-dataflow-jury.xsl"/>
24 <xsl:include href="dataviz/voting-dataflow-tele.xsl"/>
25 <xsl:include href="dataviz/jury-tele-diff.xsl"/>
26 <xsl:include href="dataviz/draw-bias.xsl"/>
27 <xsl:include href="dataviz/draw-bias-normalized.xsl"/>
28
29 <xsl:variable name="groupPath"><xsl:value-of select="/page/pageRequest/paramList/param[@name='group']/@value"/></xsl:variable>
30 <!-- set page title -->
31 <xsl:template name="pageTitle">SPARQL Visualizer</xsl:template>
32
33 <!-- set page breadcrumbs -->
34 <xsl:template name="breadcrumbs"><gslib:siteLink/><gslib:rightArrow/>
35 <xsl:if test="$groupPath != ''">
36 <xsl:for-each select="/page/pageResponse/pathList/group">
37 <xsl:sort data-type="number" select="@position"/>
38 <a>
39 <xsl:attribute name="href"><gslib:groupHref path="{@path}"/></xsl:attribute>
40 <xsl:attribute name="title"><gslib:groupName path="{@path}"/></xsl:attribute>
41 <gslib:groupName path="{@path}"/>
42 </a>
43 <gslib:rightArrow/>
44 </xsl:for-each>
45 </xsl:if>
46 <a href="{$library_name}/collection/{$collName}/page/about"><gslib:collectionName/></a>
47 </xsl:template>
48
49 <!-- the page content -->
50 <xsl:template match="/page">
51 <!--
52 <link rel="stylesheet" href="sites/{$site_name}/collect/{$collName}/style/fuseki.css" type="text/css" />
53 -->
54 <gsf:script src="sites/{$site_name}/collect/{$collName}/js/jquery.show-more.js"/>
55 <gsf:script src="sites/{$site_name}/collect/{$collName}/js/eurovision.js"/>
56 <gsf:script src="sites/{$site_name}/collect/{$collName}/js/dataviz.js"/>
57
58 <link rel="stylesheet" href="sites/{$site_name}/collect/{$collName}/css/eurovision.css" type="text/css" />
59 <link rel="stylesheet" href="sites/{$site_name}/collect/{$collName}/css/dataviz.css" type="text/css" />
60 <style>
61 #gs_content div.page { margin-left: 12px; margin-right: 12px; margin-top: 6px; margin-bottom: 6px;}
62 #gs_content div.showmore { padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px;}
63
64 #gs_content p { padding-top: 6px; padding-bottom: 6px;}
65 #gs_content a { text-decoration: underline; }
66 #gs_content li { padding-bottom: 6px; margin-bottom: 6px; }
67 </style>
68
69 <div class="page">
70 <h2>Visualize the Eurovision Linked-Data</h2>
71
72 <p>
73 Explore the Linked Data stored in this collection
74 through the samples provided that produce a range of
75 visualizations. For a given sample visualization, the
76 approach used is to first load in a SPARQL query that
77 extracts and manipulates the linked data in the
78 underlying triplestore that represents all the metadata
79 stored in the collection.
80 This is then passed on to
81 <i>SGVizler</i>, a JavaScript visualization library, to
82 display in graphical form the generated data.
83 </p>
84
85 <p>
86 In terms of operating the user interface, this is
87 achieved by pressing the <i>Load query above</i> button
88 for a sample visualization that has piqued your interest
89 (listed below). This causes a <i>Visualize Results</i>
90 button to appear alongside the load button you have just
91 pressed, which when clicked runs the loaded-in query and
92 visualizes the result.
93 </p>
94
95 <div id="sgvizler-show-more" class="showmore">
96 <p>
97 We use this two-step process so it is possible to
98 change what query is run, and how the resulting data is visualized.
99 The first text-box below is for the SPARQL query. The following
100 3 text-boxes control aspects of the visualization.
101 If you haven't worked with the underlying tools before,
102 we suggest you work your way through the sample visualizations
103 provided, trying out small edits to see how that affects
104 what is produced.
105 </p>
106 <p>
107 Rather than visualize results, if you would like to
108 directly access and/or export the data to peroforms
109 other forms of analysis, then you'll probably want to
110 use the:
111 <ul>
112 <li>
113 <a href="{$library_name}/collection/{$collName}/page/sparql">Data Analysis page</a>
114 </li>
115 </ul>
116 </p>
117 </div>
118 <gsf:script>
119 $('#sgvizler-show-more').showMore({
120 minheight: 0,
121 buttontxtmore:"show more ...",
122 buttontxtless:"... show less"
123 });
124 </gsf:script>
125
126 </div>
127
128 <div class="page">
129 <h2>SGVizler Query</h2>
130 </div>
131
132 <script type="text/javascript" src="ext/jena/sgvizler2/sgvizler2.js"><xsl:text> </xsl:text></script>
133 <div class="page moreindent">
134 <form class="sgvizler-form" id="sample-sparql-query-form"
135 action="/greenstone3-lod3/greenstone/query" target="_blank"
136 method="GET" accept-charset="UTF-8">
137 <pre>data-sgvizler-query:</pre>
138 <textarea id="sample-data-sgvizler-query" name="query" class="sgvizler" rows="10">
139<!-- -->
140<xsl:text>
141</xsl:text>
142 </textarea>
143
144 <div style="display:none;">
145 <pre>data-sgvizler-endpoint:</pre>
146 <textarea id="sample-data-sgvizler-endpoint" name="sgvizler-endpoint" class="sgvizler" rows="1">
147<!-- -->
148<xsl:text>
149//sowemustthink.space/greenstone3-lod3/greenstone/query
150</xsl:text>
151 </textarea>
152 </div>
153
154 <pre>data-sgvizler-chart:</pre>
155 <textarea id="sample-data-sgvizler-chart" name="sgvizler-chart" class="sgvizler" rows="1">
156<!-- -->
157<xsl:text>
158google.visualization.BarChart
159</xsl:text>
160 </textarea>
161
162
163 <pre>data-sgvizler-chart-options:</pre>
164 <textarea id="sample-data-sgvizler-chart-options" name="sgvizler-chart-options" class="sgvizler" rows="2">
165<!-- -->
166<xsl:text>
167title=Number of Songs from each Country (sorted by size)|legend.position=none|height=900|chartArea.height=840|fontSize=11
168</xsl:text>
169 </textarea>
170
171 <pre>div-style:</pre>
172 <textarea id="sample-div-style" name="sgvizler-style" class="sgvizler" rows="2">
173<!-- -->
174<xsl:text>
175width:900px; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden;
176</xsl:text>
177 </textarea>
178
179 <!-- locate this anchor tag a bit ealiler in the page, so there's a bit of breathing space
180 at the top of the page, before the sgvizler-div-outer starts -->
181 <a name="sgvizler-plot" ><xsl:text> </xsl:text></a>
182
183 <div class="page ssq">
184 <button type="button" onclick="ssv_execute()">Show Visualization</button>
185 </div>
186
187 </form>
188 </div>
189
190 <div id="sgvizler-div-outer">
191 <xsl:text>Loading ...</xsl:text>
192 </div>
193
194 <script type="text/javascript">
195 <xsl:text disable-output-escaping="yes">
196 $(document).ready(
197 function() {
198 ssv_load("ssv-orig");
199 ssv_execute(ssv_no_auto_focus);
200 }
201 );
202 </xsl:text>
203 </script>
204
205 <div class="page">
206 <h2>Sample Visualizations</h2>
207
208 <p>
209 The samples provided below show a range
210 of visualizations related to the
211 Eurovision Song Contest, sourced from the raw
212 data in the triple-store, and converted into
213 a visualization using SGVizler.
214
215 Click on one of the <i>Load query above</i> buttons
216 to load the relevant query syntax into the SPARQL
217 Query textbox above, accompanied with SGVizler
218 attributes that control the visualization,
219 then press <i>Get Results</i>
220 to initiate the visualization.
221 </p>
222
223
224
225 <div id="ssv-orig" style="display: none;">
226<!-- -->
227<xsl:text>
228PREFIX rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt;
229PREFIX gsdlextracted: &lt;http://greenstone.org/gsdlextracted#&gt;
230
231SELECT ?country (COUNT(?country) AS ?freqCount)
232WHERE {
233 GRAPH &lt;</xsl:text><xsl:value-of select="$graphURI"/><xsl:text>&gt; {
234 {
235 SELECT DISTINCT ?country ?year WHERE {
236 ?s gsdlextracted:Country ?country.
237 ?s gsdlextracted:Year ?year.
238 } ORDER BY ?country ?year
239 }
240 }
241}
242GROUP BY ?country ORDER BY DESC(?freqCount)
243</xsl:text>
244 </div>
245 <div id="ssv-orig-endpoint" style="display: none;">
246<!-- -->
247<xsl:text>
248//sowemustthink.space/greenstone3-lod3/greenstone/query
249</xsl:text>
250 </div>
251 <div id="ssv-orig-chart" style="display: none;">
252<!-- -->
253<xsl:text>
254google.visualization.BarChart
255</xsl:text>
256 </div>
257 <div id="ssv-orig-chart-options" style="display: none;">
258<!-- -->
259<xsl:text>
260title=Number of Songs from each Country (sorted by size)|legend.position=none|height=900|chartArea.height=840|fontSize=11
261</xsl:text>
262 </div>
263 <div id="ssv-orig-div-style" style="display: none;">
264<!-- -->
265<xsl:text>
266width:900px; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden;
267</xsl:text>
268 </div>
269
270
271 <xsl:call-template name="ssv-made-the-final"/>
272 <xsl:call-template name="ssv-list-of-winners"/>
273 <xsl:call-template name="ssv-list-of-losers"/>
274 <xsl:call-template name="ssv-top-3-with-mir-content"/>
275 <xsl:call-template name="ssv-got-nul-point"/>
276 <xsl:call-template name="ssv-got-nul-point-after-winning"/>
277 <xsl:call-template name="ssv-voting-dataflow-jury"/>
278 <xsl:call-template name="ssv-voting-dataflow-tele"/>
279 <xsl:call-template name="ssv-jury-tele-diff"/>
280 <xsl:call-template name="ssv-draw-bias"/>
281 <xsl:call-template name="ssv-draw-bias-normalized"/>
282
283
284 <ul class="ssq">
285 <li>
286 <b>Number of times entered, sorted by frequency:</b><br/>
287 <button type="button" class="load-ssq" id="load-ssv-orig" onclick="ssv_load('ssv-orig')">Load query above</button>
288 <button type="button" class="exec-ssq" id="exec-ssv-orig" onclick="ssv_execute(ssv_auto_focus)">Visualize Results</button><br/>
289 <p>
290 Plot as a bar graph the number of times each country has competed in the
291 Eurovision Song Contest, sorted by frequency.
292 </p>
293 </li>
294
295 <li>
296 <b>Made the Finals:</b><br/>
297 <button type="button" class="load-ssq" id="load-ssv-made-the-final" onclick="ssv_load('ssv-made-the-final')">Load query above</button>
298 <button type="button" class="exec-ssq" id="exec-ssv-made-the-final" onclick="ssv_execute(ssv_auto_focus)">Visualize Results</button><br/>
299 <p>Plot as a bar graph the number of times each country has made it to the finals.</p>
300 </li>
301
302 <li>
303 <b>List of Winners:</b><br/>
304 <button type="button" class="load-ssq" id="load-ssv-list-of-winners" onclick="ssv_load('ssv-list-of-winners')">Load query above</button>
305 <button type="button" class="exec-ssq" id="exec-ssv-list-of-winners" onclick="ssv_execute(ssv_auto_focus)">Visualize Tabulated Results</button><br/>
306 <p>The songs that have won through the ages.</p>
307 </li>
308
309 <li>
310 <b>List of Last Place Entrants:</b><br/>
311 <button type="button" class="load-ssq" id="load-ssv-list-of-losers" onclick="ssv_load('ssv-list-of-losers')">Load query above</button>
312 <button type="button" class="exec-ssq" id="exec-ssv-list-of-losers" onclick="ssv_execute(ssv_auto_focus)">Visualize Tabulated Results</button><br/>
313 <p>The songs that have won through the ages.</p>
314 </li>
315
316 <li>
317 <b>Top 3 Acts per Year with (where available) Details of Musical Content:</b><br/>
318 <button type="button" class="load-ssq" id="load-ssv-top-3-with-mir-content" onclick="ssv_load('ssv-top-3-with-mir-content')">Load query above</button>
319 <button type="button" class="exec-ssq" id="exec-ssv-top-3-with-mir-content" onclick="ssv_execute(ssv_auto_focus)">Visualize Tabulated Results</button><br/>
320 <p>List the Top 3 entries per year, including musical details such as tempo, time-signature, and key where alignment with content in MusicBrainz was possible.</p>
321 </li>
322
323 <li>
324 <b>The ignominy of &quot;nul point&quot;:</b><br/>
325 <button type="button" class="load-ssq" id="load-ssv-got-nul-point" onclick="ssv_load('ssv-got-nul-point')">Load query above</button>
326 <button type="button" class="exec-ssq" id="exec-ssv-got-nul-point" onclick="ssv_execute(ssv_auto_focus)">Visualize Results</button><br/>
327 <p>
328 Plot a bar graph showing which countries, and how
329 often they have, competed in the final but received
330 zero points as their final total score.
331 </p>
332 </li>
333
334 <li>
335 <b>The even more galling circumstance of getting &quot;nul point&quot; having won the previous year:</b><br/>
336 <button type="button" class="load-ssq" id="load-ssv-got-nul-point-after-winning" onclick="ssv_load('ssv-got-nul-point-after-winning')">Load query above</button>
337 <button type="button" class="exec-ssq" id="exec-ssv-got-nul-point-after-winning" onclick="ssv_execute(ssv_auto_focus)">Visualize Results</button><br/>
338 <p>
339 Have any countries ever been in the situation of going from Hero (i.e., winning) to Zero (nul point) in back to back years in
340 the contest.
341 </p>
342 </li>
343
344
345 <li>
346 <b>Dataflow Voting Patterns of Juries:</b><br/>
347 <div>
348 <button type="button" class="load-ssq" id="load-ssv-voting-dataflow-jury" onclick="ssv_load('ssv-voting-dataflow-jury')">Load query above</button>
349 <div style="display: inline-block; padding-right: 12px;">
350 <label style="padding-right: 6px;" for="ssv-voting-dataflow-jury-startyear">Start Year:</label>
351 <input type="text" id="ssv-voting-dataflow-jury-startyear" value="2010" style="width: 80px; padding-left: 6px"/>
352 <label style="padding-right: 6px; padding-left: 12px;" for="ssv-voting-dataflow-jury-endyear">End Year:</label>
353 <input type="text" id="ssv-voting-dataflow-jury-endyear" value="2019" style="width: 80px; padding-left: 6px"/>
354 </div>
355 <button type="button" class="exec-ssq" id="exec-ssv-voting-dataflow-jury" onclick="ssv_execute(ssv_auto_focus,'ssv-voting-dataflow-jury')">Visualize Results</button>
356 </div>
357 <p>
358 Plot as a Sankey Dataflow Graph how juries allocate
359 their votes to countries over the years 2010-2019.
360 Note: to help emphasize the voting patterns, we plot
361 the <i>square</i> of the voting totals.
362 </p>
363
364 <p>
365 Experiment with editing the date range specified in
366 the <i>Start Year</i> and <i>End Year</i> text-input
367 boxes. Alternatively, the the SPARQL query itself
368 edit
369 the <tt>FILTER(xsd:integer(?year) &gt; 2010
370 &amp;&amp; xsd:integer(?year) &lt;= 2019)</tt> clause
371 in the above text box and then press <i>Show
372 Visualization</i> to see how the voting by jury has
373 changed over the decades.
374 </p>
375 </li>
376
377
378 <li>
379 <b>Dataflow Voting Patterns in Televoting:</b><br/>
380 <div>
381 <button type="button" class="load-ssq" id="load-ssv-voting-dataflow-tele" onclick="ssv_load('ssv-voting-dataflow-tele')">Load query above</button>
382 <span style="padding-right: 12px;">
383 Start Year: <input type="text" id="ssv-voting-dataflow-tele-startyear" value="2016" style="width: 80px; padding-left: 6px"/>
384 End Year: <input type="text" id="ssv-voting-dataflow-tele-endyear" value="2019" style="width: 80px; padding-left: 6px"/>
385 </span>
386
387 <button type="button" class="exec-ssq" id="exec-ssv-voting-dataflow-tele" onclick="ssv_execute(ssv_auto_focus,'ssv-voting-dataflow-tele')">Visualize Results</button><br/>
388 </div>
389 <p>
390 Plot as a Sankey Dataflow Graph of the televoting
391 data by country. Years plotted are 2016-2019
392 as these are the only years the data has been
393 published separate to jury voting. As with
394 the Jury Sankey visual above, we plot
395 the <i>square</i> of the voting totals to
396 help emphasize where differences occur.
397 </p>
398 </li>
399
400
401 <li>
402 <b>Differences between Jury and Televoting:</b><br/>
403 <div>
404 <button type="button" class="load-ssq" id="load-ssv-jury-tele-diff" onclick="ssv_load('ssv-jury-tele-diff')">Load query above</button>
405 <span style="padding-right: 12px;">
406 For the country: <input type="text" id="ssv-jury-tele-diff-tocountry" value="The Netherlands" style="width: 180px; padding-left: 6px"/>
407 In the year: <input type="text" id="ssv-jury-tele-diff-inyear" value="2019" style="width: 80px; padding-left: 6px"/>
408 </span>
409
410 <button type="button" class="exec-ssq" id="exec-ssv-jury-tele-diff" onclick="ssv_execute(ssv_auto_focus,'ssv-jury-tele-diff')">Visualize Results</button><br/>
411 </div>
412 <p>
413 Plot as a Tree-map how the various juries have cast
414 their votes for a specific country. The area of the
415 block represents the number of points awarded by
416 the jury. To this we add colouring
417 to the block to show how much in agreement
418 the televote was: red indicates the televote was
419 higher than the the jury vote; green is when the
420 votes are similar (neutral); and
421 blue indicates the televote was lower then the
422 jury vote.
423 </p>
424 </li>
425
426
427 <li>
428 <b>The Curse of Being the Second Performer in the Lineup?</b><br/>
429 <button type="button" class="load-ssq" id="load-ssv-draw-bias" onclick="ssv_load('ssv-draw-bias')">Load query above</button>
430 <button type="button" class="exec-ssq" id="exec-ssv-draw-bias" onclick="ssv_execute(ssv_auto_focus)">Visualize Results</button><br/>
431 <p>
432 Plot as a bar graph how many times an entrant
433 performing in a given position in the lineup has
434 gone on to win the competition. Performing second
435 in the line-up historically has been considered an
436 unlucky draw position to perform in, but are there
437 any others? Any draw positions that seem to
438 prove favourable to winning?
439 </p>
440 </li>
441
442 <li>
443 <b>Normalized Plot of ... The Curse of Being the Second Performer in the Lineup?</b><br/>
444 <button type="button" class="load-ssq" id="load-ssv-draw-bias-normalized" onclick="ssv_load('ssv-draw-bias-normalized')">Load query above</button>
445 <button type="button" class="exec-ssq" id="exec-ssv-draw-bias-normalized" onclick="ssv_execute(ssv_auto_focus)">Visualize Results</button><br/>
446 <p>
447 Same as the above, only to better take account of
448 the fact that an increasing number of countries have
449 been taking part in the final, in this version of
450 the plot the values have normalized to express as a
451 percentage the number of times an entrant has won in
452 that position of the draw, as a percentage of the
453 total number of times there has been an entrant
454 performing at that position of the draw.
455 </p>
456 </li>
457
458
459 </ul>
460
461 </div>
462 </xsl:template>
463
464</xsl:stylesheet>
465
Note: See TracBrowser for help on using the repository browser.