Changeset 34942
- Timestamp:
- 2021-03-01T00:23:10+13:00 (3 years ago)
- Location:
- main/trunk/model-sites-dev/eurovision-lod/collect/eurovision
- Files:
-
- 1 added
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/css/eurovision.css
r34911 r34942 37 37 } 38 38 39 40 /* ssq = sample sparql query */ 41 42 ul.ssq li:nth-child(odd) { 43 background-color: rgba(255,255,255,0.2); 44 } 45 ul.ssq li:nth-child(even) { 46 background-color: rgba(255,255,255,0.0); 47 } 48 49 ul.ssq li { 50 padding: 6px; 51 } 52 53 /* 54 a.load-ssq { 55 margin-right: 12px; 56 } 57 */ 58 59 60 .ssq button { 61 border: 2px solid hsl(284, 88%, 35%); 62 background-color: hsl(284, 84%, 20%); 63 border-radius: 8px; 64 padding: 6px; 65 } 66 67 .ssq button:hover { 68 background-color: hsl(284, 84%, 30%); 69 70 } 71 72 .ssq button:focus { 73 outline: none; 74 } 75 76 button.load-ssq { 77 margin-right: 12px; 78 } 79 80 button.exec-ssq { 81 display: none; 82 } -
main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/js/eurovision.js
r34931 r34942 202 202 } 203 203 204 205 206 function ssq_load(query_text_id) 207 { 208 $('#sample-sparql-query').text($('#'+query_text_id).text().trim()); 209 $('.exec-ssq').hide(); 210 $('#exec-'+query_text_id).show(); 211 } 212 213 function ssq_execute(query_text_id) 214 { 215 $('#sample-sparql-query-form').submit(); 216 } 217 218 219 function ssv_execute(query_text_id) 220 { 221 222 var sgvizler_div_raw_text = $('#sample-sgvizler-div').val(); 223 var data_sgvizler_query_raw_text = $('#sample-data-sgvizler-query').val(); 224 //console.log("*** sgvizer_div_raw_text = " + sgvizler_div_raw_text); 225 226 var $sgvizler_div = $(sgvizler_div_raw_text); 227 $sgvizler_div.attr('data-sgvizler-query',data_sgvizler_query_raw_text); 228 229 $sgvizler_div.attr('style',"width:900px; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden;"); 230 231 $('#sgvizler-div-outer').empty().append($sgvizler_div); 232 233 sgvizler2.containerDraw('sgvizler-div'); 234 } -
main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/transform/pages/about.xsl
r34932 r34942 28 28 29 29 <p style="padding-bottom: 10px;"> 30 <i style="padding-right:6px;">A help to shore up a post war Europe in 1956 it 31 all began, where there were only seven countries and one 32 camera man!</i> 30 33 The <a href="https://eurovision.tv">Eurovision Song 31 34 Contest</a> is a live-broadcast televised multi-national 32 competition with a collaborative mission, much like the33 Olympics. <i>A help to shore up a post war Europe in 1956 it34 all began, where there were only seven countries and one35 camera man!</i> The contest has grown significantly from36 there, with 43 countries competing most yearsâeven35 competition with a collaborative mission, not dissimilar 36 in spirit to the Olympics. 37 The contest has grown significantly from 38 that modest start with 7 countries (and one cameraman), 39 with over 40 countries competing these daysâeven 37 40 Australia takes part now, through a specially 38 41 arranged invitation. It's an annual celebration of … … 58 61 all the performances are over, artists wait 59 62 nervously as via the Internet the show's hosts visit each 60 of the 4 3countries in turn collecting all points cast63 of the 40+ countries in turn collecting all points cast 61 64 by the country appointed juries. This includes 62 65 the all important top score that can be cast, 12 points … … 70 73 place, and so on. 71 74 This all culminates in a new winner being crowned, with 72 the competition typically being hosted the following year75 the competition usually being hosted the following year 73 76 by that country. 74 77 </p> 75 78 79 <h2>Features of this Website</h2> 80 76 81 <p> 77 82 This (unoffical) website has been developed by a small … … 103 108 </p> 104 109 105 110 <p> 111 If you'd like to dig into the data behind this Digital Library collection, this can be done directly 112 using the <a href="{$library_name}/collection/{$collName}/page/sparql">SPARQL Query interface</a>. 113 This is a good place to go to see what sort of data is being stored, and we provide some sample 114 queries to get you going. But if you like to see the data presented more visually, we suggest 115 you try out the <a href="{$library_name}/collection/{$collName}/page/sgvizler">SGVizler page</a>, 116 which takes things to the next level, using pie-charts, histograms and other forms of 117 visualization to present the data. 118 </p> 119 120 121 <!-- 106 122 <script type="text/javascript" src="//www.google.com/jsapi"><xsl:text> </xsl:text></script> 107 123 <script type="text/javascript" src="//mgskjaeveland.github.io/sgvizler/v/0.6/sgvizler.js"><xsl:text> </xsl:text></script> 108 124 --> 109 125 <script type="text/javascript" src="ext/jena/sgvizler2/sgvizler2.js"><xsl:text> </xsl:text></script> 110 126 … … 158 174 data-sgvizler-chart-options="title=Number of Songs from each Country|legend.position=none|height=900|chartArea.height=840|fontSize=11" 159 175 data-sgvizler-log="2" 160 style="width: 650px; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden;">176 style="width:900px; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden;"> 161 177 <xsl:attribute name="data-sgvizler-query"> 162 178 PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> … … 173 189 </div> 174 190 191 <div style="padding-top: 6px;"> 192 So the above visualization show how many times each country has entered, over the years, but what about how 193 many times countries have won? And what about how many times countries have won per head of population? 194 <ul> 195 <li> 196 <a href="{$library_name}/collection/{$collName}/page/sgvizler"><i>Show me more visualizations ...</i></a> 197 </li> 198 </ul> 199 </div> 200 175 201 <div id="technicaldev-turnstyle" style="margin-top: 12px;"> 176 202 <div class="turnstyle-header" style="background-image: none; background-color: hsl(195, 47%, 35%);"> -
main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/transform/pages/sparql.xsl
r34790 r34942 5 5 xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil" 6 6 xmlns:gslib="http://www.greenstone.org/skinning" 7 xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat" 7 8 extension-element-prefixes="java util" 8 9 exclude-result-prefixes="java util"> … … 14 15 <xsl:variable name="groupPath"><xsl:value-of select="/page/pageRequest/paramList/param[@name='group']/@value"/></xsl:variable> 15 16 <!-- set page title --> 16 <xsl:template name="pageTitle"> <gslib:collectionName/></xsl:template>17 <xsl:template name="pageTitle">SPARQL Query</xsl:template> 17 18 18 19 <!-- set page breadcrumbs --> … … 29 30 </xsl:for-each> 30 31 </xsl:if> 32 <a href="{$library_name}/collection/{$collName}/page/about"><gslib:collectionName/></a> 31 33 </xsl:template> 32 34 33 35 <!-- the page content --> 34 36 <xsl:template match="/page"> 37 <!-- 35 38 <link rel="stylesheet" href="sites/{$site_name}/collect/{$collName}/style/fuseki.css" type="text/css" /> 39 --> 40 <gsf:script src="sites/{$site_name}/collect/{$collName}/js/eurovision.js"/> 41 42 <link rel="stylesheet" href="sites/{$site_name}/collect/{$collName}/css/eurovision.css" type="text/css" /> 36 43 <style> 37 div { padding: 12px; } 44 div { padding-left: 12px; padding-right: 12px; padding-top: 6px; padding-bottom: 6px;} 45 p { padding-bottom: 12px;} 46 a { text-decoration: underline; } 47 li { padding-bottom: 6px; } 38 48 </style> 49 50 <div> 51 <h2>Query the Linked-Data and let its values Sparkle (aka SPARQL)</h2> 52 53 <p> 54 Using this page you can query the linked-data in the Greenstone3 <i>eurovision</i> triple-store 55 graph using <a href="https://en.wikipedia.org/wiki/SPARQL">SPARQL</a> query syntax. 56 The default query provided in the text box below is effectively issuing a query that 57 returns everything stored (a bit like matching with the wildcard '*' that some text-based search 58 systems have), limited to show just the first 500 entries that matched. 59 </p> 60 61 <p> 62 Use the default query to get a feel for the data that is 63 stored. Feel free to experiment with the syntax to very 64 what is returned. For example, to view other "slices" 65 of the rows of data returned, change the values of 66 OFFSET and LIMIT. OFFSET controls how many result rows 67 are skipped over before rows are selected. LIMIT 68 controls how many rows are then taken. 69 70 </p> 71 72 </div> 39 73 40 74 <div> 41 75 <h2>SPARQL Query</h2> 42 76 43 <p>Dataset: /greenstone</p> 44 <p>Graph: eurovision</p> 77 <p> 78 Dataset: /greenstone<br/> 79 Graph: eurovision 80 </p> 45 81 </div> 46 82 47 83 <div class="moreindent"> 48 <form action="/greenstone3-lod/greenstone/query" method="GET" accept-charset="UTF-8"> 49 50 <textarea name="query" style="width:100%;" rows="20"><xsl:text> select * where { ?s ?p ?o } limit 100</xsl:text></textarea> 51 52 <div> 53 Output: 54 <select name="output"> 55 <option value="text">Text</option> 56 <option value="json">JSON</option> 57 <option value="xml">XML</option> 58 <option value="csv">CSV</option> 59 <option value="tsv">TSV</option> 60 </select> 61 </div> 62 63 <div> 64 If XML output, add XSLT style sheet (blank for none): 65 <select name="stylesheet"> 66 <option value=""></option> 67 <option value="/greenstone3-lod/xml-to-html.xsl">xml-to-html</option> 68 <option value="/greenstone3-lod/xml-to-html-links.xsl">xml-to-html-links</option> 69 <option value="/greenstone3-lod/xml-to-html-plain.xsl">xml-to-html-plain</option> 70 </select> 71 </div> 72 73 <div> 74 <input type="checkbox" name="force-accept" value="text/plain" /> 75 Force the accept header to <tt>text/plain</tt> regardless. 84 <form id="sample-sparql-query-form" action="/greenstone3-lod/greenstone/query" target="_blank" 85 method="GET" accept-charset="UTF-8"> 86 87 <textarea id="sample-sparql-query" name="query" style="width:100%; min-width:100%; max-width: 100%;" rows="14"> 88 <!-- --> 89 <xsl:text> 90 PREFIX gsextracted: <http://greenstone.org/gsextracted#> 91 92 SELECT ?subject ?predicate ?object WHERE { 93 GRAPH <http://localhost:3030/greenstone/data/eurovision> { 94 ?subject ?predicate ?object 95 96 # The following removed a triple that stores JSON data that 97 # is voluminous but not very interesting to look at 98 FILTER (?predicate != gsextracted:JSON). 99 } 100 } 101 OFFSET 0 LIMIT 500 102 </xsl:text> 103 </textarea> 104 105 <div style="display:none;"> 106 <div> 107 Output: 108 <select name="output"> 109 <option value="text">Text</option> 110 <option value="json">JSON</option> 111 <option value="xml" selected="selected">XML</option> 112 <option value="csv">CSV</option> 113 <option value="tsv">TSV</option> 114 </select> 115 </div> 116 117 <div> 118 If XML output, add XSLT style sheet (blank for none): 119 <select name="stylesheet"> 120 <option value=""></option> 121 <option value="/greenstone3-lod/xml-to-html.xsl">xml-to-html</option> 122 <option value="/greenstone3-lod/xml-to-html-links.xsl" selected="selected">xml-to-html-links</option> 123 <option value="/greenstone3-lod/xml-to-html-plain.xsl">xml-to-html-plain</option> 124 </select> 125 </div> 126 127 <div> 128 <input type="checkbox" name="force-accept" value="text/plain" /> 129 Force the accept header to <tt>text/plain</tt> regardless. 130 </div> 76 131 </div> 132 77 133 <div> 78 134 <input type="submit" value="Get Results" /> 79 135 </div> 136 80 137 </form> 138 </div> 139 140 <div> 141 <h2>Sample Queries</h2> 142 143 <p> 144 The sample queries provided below gradually increase in 145 the query syntax complexity used. They are intended 146 primarily for illustrative purposes, to introduce 147 a user unfamiliar to various aspects of 148 SPARQL query syntax. Click on one of the links below 149 to load the relevant query syntax into the SPARQL 150 Query textbox above, then press <i>Get Results</i> 151 to initiate the query. 152 </p> 153 154 <div id="ssq-restrict-year" style="display: none;"> 155 <!-- --> 156 <xsl:text> 157 PREFIX gsextracted: <http://greenstone.org/gsextracted#> 158 159 SELECT ?subject ?predicate ?object WHERE { 160 GRAPH <http://localhost:3030/greenstone/data/eurovision> { 161 ?subject ?predicate ?object 162 163 # The following removed a triple that stores JSON data that 164 # is voluminous but not very interesting to look at 165 FILTER (?predicate != gsextracted:JSON). 166 ?subject gsextracted:Year "2000". 167 } 168 } 169 OFFSET 0 LIMIT 200 170 </xsl:text> 171 </div> 172 173 174 <div id="ssq-restrict-country-and-year" style="display: none;"> 175 <!-- --> 176 <xsl:text> 177 PREFIX gsextracted: <http://greenstone.org/gsextracted#> 178 PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> 179 180 SELECT ?subject ?predicate ?object WHERE { 181 GRAPH <http://localhost:3030/greenstone/data/eurovision> { 182 ?subject ?predicate ?object 183 184 # The following removed a triple that stores JSON data that 185 # is voluminous but not very interesting to look at 186 FILTER (?predicate != gsextracted:JSON). 187 188 ?subject gsextracted:Year ?year. 189 ?subject gsextracted:Country ?country. 190 FILTER (?country = "France"). 191 FILTER (xsd:integer(?year) >= 1996 && xsd:integer(?year) <= 2000). 192 193 } 194 } 195 OFFSET 0 LIMIT 200 196 </xsl:text> 197 </div> 198 199 200 <div id="ssq-esc-entrants" style="display: none;"> 201 <!-- --> 202 <xsl:text> 203 PREFIX gsextracted: <http://greenstone.org/gsextracted#> 204 PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> 205 PREFIX dc: <http://purl.org/dc/elements/1.1/> 206 207 SELECT ?esc_entrant_uri ?country ?year WHERE { 208 GRAPH <http://localhost:3030/greenstone/data/eurovision> { 209 ?esc_entrant_uri dc:Relation.isPartOf <http://127.0.0.1:8383/greenstone3/library/collection/eurovision>. 210 211 ?esc_entrant_uri gsextracted:Year ?year. 212 ?esc_entrant_uri gsextracted:Country ?country. 213 } 214 } 215 ORDER BY ASC(?year) ?country 216 </xsl:text> 217 </div> 218 219 220 <div id="ssq-jury-votes-totals-1975" style="display: none;"> 221 <!-- --> 222 <xsl:text> 223 PREFIX gsextracted: <http://greenstone.org/gsextracted#> 224 PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> 225 PREFIX dc: <http://purl.org/dc/elements/1.1/> 226 227 SELECT ?country ?year ?total WHERE { 228 GRAPH <http://localhost:3030/greenstone/data/eurovision> { 229 ?esc_entrant_uri dc:Relation.isPartOf <http://127.0.0.1:8383/greenstone3/library/collection/eurovision>. 230 231 ?esc_entrant_uri gsextracted:JuryVotesTotal ?total. 232 BIND(xsd:integer(?total) AS ?total_int). 233 234 ?esc_entrant_uri gsextracted:Year ?year 235 FILTER(xsd:integer(?year) = 1975). 236 ?esc_entrant_uri gsextracted:Country ?country. 237 } 238 } 239 ORDER BY DESC(?total_int) 240 </xsl:text> 241 </div> 242 243 244 <div id="ssq-jury-votes-1975" style="display: none;"> 245 <!-- --> 246 <xsl:text> 247 PREFIX gsextracted: <http://greenstone.org/gsextracted#> 248 PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> 249 PREFIX dc: <http://purl.org/dc/elements/1.1/> 250 251 SELECT ?country ?year ?jury_country ?jury_vote WHERE { 252 GRAPH <http://localhost:3030/greenstone/data/eurovision> { 253 ?esc_entrant_uri dc:Relation.isPartOf <http://127.0.0.1:8383/greenstone3/library/collection/eurovision>. 254 255 ?esc_entrant_uri ?gsextracted_jury_country_uri ?jury_vote. 256 BIND(STRENDS(str(?gsextracted_jury_country_uri),"-J") AS ?is_jury_vote) 257 FILTER (?is_jury_vote). 258 BIND(REPLACE(str(?gsextracted_jury_country_uri), ".*#(.*?)-J$", "$1") AS ?jury_country). 259 260 ?esc_entrant_uri gsextracted:Year ?year 261 FILTER(xsd:integer(?year) = 1975). 262 ?esc_entrant_uri gsextracted:Country ?country. 263 264 265 } 266 } 267 ORDER BY ASC(?year) ?country 268 </xsl:text> 269 </div> 270 271 <ul class="ssq"> 272 <li> 273 Year Restricted (raw data rows):<br/> 274 <button type="button" class="load-ssq" id="load-ssq-restrict-year" onclick="ssq_load('ssq-restrict-year')">Load query above</button> 275 <button type="button" class="exec-ssq" id="exec-ssq-restrict-year" onclick="ssq_execute()">Get Results</button><br/> 276 Similar to the default query (all results returned) but restricted to entries associated with the year 2000. 277 </li> 278 279 <li> 280 Country and Year Restricted (raw data rows):<br/> 281 <button type="button" class="load-ssq" id="load-ssq-restrict-country-and-year" onclick="ssq_load('ssq-restrict-country-and-year')">Load query above</button> 282 <button type="button" class="exec-ssq" id="exec-ssq-restrict-country-and-year" onclick="ssq_execute()">Get Results</button><br/> 283 284 Similar to the default query but restricted to entries about the country France, in the years 1996-2000. 285 </li> 286 287 <li> 288 Eurovison Song Contest (ESC) entrants:<br/> 289 <button type="button" class="load-ssq" id="load-ssq-esc-entrants" onclick="ssq_load('ssq-esc-entrants')">Load query above</button> 290 <button type="button" class="exec-ssq" id="exec-ssq-esc-entrants" onclick="ssq_execute()">Get Results</button><br/> 291 292 List all the entrants (country and year) sorted by year, then by country. 293 </li> 294 295 <li> 296 Jury Voting Totals in 1975:<br/> 297 <button type="button" class="load-ssq" id="load-ssq-jury-votes-totals-1975" onclick="ssq_load('ssq-jury-votes-totals-1975')">Load query above</button> 298 <button type="button" class="exec-ssq" id="exec-ssq-jury-votes-totals-1975" onclick="ssq_execute()">Get Results</button><br/> 299 300 The jury vote totals countries received in 1975, ranked to score. 301 </li> 302 303 304 <li> 305 Jury Votes Cast by Country in 1975:<br/> 306 <button type="button" class="load-ssq" id="load-ssq-jury-votes-1975" onclick="ssq_load('ssq-jury-votes-1975')">Load query above</button> 307 <button type="button" class="exec-ssq" id="exec-ssq-jury-votes-1975" onclick="ssq_execute()">Get Results</button><br/> 308 309 List all votes case in the 1975 competition. 310 </li> 311 312 </ul> 313 81 314 </div> 82 315 </xsl:template>
Note:
See TracChangeset
for help on using the changeset viewer.