Changeset 34956


Ignore:
Timestamp:
2021-03-03T00:27:10+13:00 (3 years ago)
Author:
davidb
Message:

DL collection extended to support loading in sampel SGVizler queries

Location:
main/trunk/model-sites-dev/eurovision-lod/collect/eurovision
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/css/eurovision.css

    r34942 r34956  
    8181    display: none;
    8282}
     83
     84
     85.sgvizler-form textarea {
     86    width:100%;
     87    min-width:100%;
     88    max-width: 100%;
     89    min-height: 24px;
     90    padding-left: 6px;
     91    padding-right: 6px;
     92}
     93.sgvizler-form pre {
     94    margin-top: 9px;
     95    margin-bottom: 3px;
     96}
     97       

  • main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/js/eurovision.js

    r34942 r34956  
    211211}
    212212
    213 function ssq_execute(query_text_id)
     213function ssq_execute()
    214214{   
    215215    $('#sample-sparql-query-form').submit();
    … …  
    217217
    218218
     219
    219220function ssv_execute(query_text_id)
    220221{
    221222   
    222223    var sgvizler_div_raw_text = $('#sample-sgvizler-div').val();
     224
     225    // var data_sgvizler_query_raw_text = $('#sample-data-sgvizler-query').val();
     226    //var $sgvizler_div1 = $(sgvizler_div_raw_text);
     227
     228    var data_sgvizler_endpoint      = $('#sample-data-sgvizler-endpoint').val().trim();
     229    var data_sgvizler_chart         = $('#sample-data-sgvizler-chart').val().trim();
     230    var data_sgvizler_chart_options = $('#sample-data-sgvizler-chart-options').val().trim();
     231
     232    var div_style = $('#sample-div-style').val();
     233
     234    var $sgvizler_div2 = $('<div>').attr("id","sgvizler-div");
     235    $sgvizler_div2.attr("data-sgvizler-endpoint",data_sgvizler_endpoint);
     236    $sgvizler_div2.attr("data-sgvizler-chart",data_sgvizler_chart);
     237    $sgvizler_div2.attr("data-sgvizler-chart-options",data_sgvizler_chart_options);
     238    $sgvizler_div2.attr("data-sgvizler-log","2");
     239   
     240    $sgvizler_div2.attr("style",div_style);
     241
    223242    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);
     243    //$sgvizler_div1.attr('data-sgvizler-query',data_sgvizler_query_raw_text);
     244    $sgvizler_div2.attr('data-sgvizler-query',data_sgvizler_query_raw_text);
     245
     246   
     247    //$sgvizler_div1.attr('style',"width:900px; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden;");
     248
     249    /*
     250    console.log("**** sgvizler_div1 = ");
     251    console.log($sgvizler_div1[0]);
     252
     253    console.log("**** sgvizler_div2 = ");
     254    console.log($sgvizler_div2[0]);
     255    */
     256   
     257    $('#sgvizler-div-outer').empty().append($sgvizler_div2);
    232258   
    233259    sgvizler2.containerDraw('sgvizler-div');
    234260}
     261
     262
     263function ssv_load(query_text_id)
     264{
     265    $('#sample-data-sgvizler-query').text($('#'+query_text_id).text().trim());
     266    $('.exec-ssq').hide();
     267    $('#exec-'+query_text_id).show();
     268}
     269

  • main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/transform/pages/sgvizler.xsl

    r34942 r34956  
    6565     
    6666      <div class="page moreindent">
    67         <form id="sample-sparql-query-form" action="/greenstone3-lod/greenstone/query" target="_blank"
     67        <form class="sgvizler-form" id="sample-sparql-query-form"
     68          action="/greenstone3-lod/greenstone/query" target="_blank"
    6869          method="GET" accept-charset="UTF-8">
    69 
    7070          <pre>data-sgvizler-query:</pre>
    71               <textarea id="sample-data-sgvizler-query" name="query" style="width:100%; min-width:100%; max-width: 100%;" rows="10">
     71              <textarea id="sample-data-sgvizler-query" name="query" class="sgvizler" rows="10">
    7272<!-- -->
    7373<xsl:text>
    … …  
    7777WHERE {
    7878    GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
    79         ?s gsextracted:Country ?country
     79        ?s gsextracted:Country ?country.
    8080   }
    8181}
    82 GROUP BY ?country ORDER BY asc(?country)           
    83 </xsl:text>
    84           </textarea>
    85 
     82GROUP BY ?country ORDER BY DESC(?freqCount)
     83</xsl:text>
     84          </textarea>
     85<!--
    8686          <pre>sgvizler-div:</pre>
    87           <textarea id="sample-sgvizler-div" name="sgvizler-div" style="width:100%; min-width:100%; max-width: 100%;" rows="7">
    88 <!-- -->
     87          <textarea id="sample-sgvizler-div" name="sgvizler-div" class="sgvizler" rows="7">
     88
    8989<xsl:text>
    9090&lt;div id="sgvizler-div"
    9191     data-sgvizler-endpoint="//sowemustthink.space/greenstone3-lod/greenstone/query"     
    9292     data-sgvizler-chart="google.visualization.BarChart"
    93      XXdata-sgvizler-chart-options="title=Number of Songs from each Country|legend.position=none"
    94      data-sgvizler-chart-options="title=Number of Songs from each Country|legend.position=none|height=900|chartArea.height=840|fontSize=11"
     93     data-sgvizler-chart-options="title=Number of Songs from each Country (sorted by size)|legend.position=none|height=900|chartArea.height=840|fontSize=11"
    9594     data-sgvizler-log="2"&gt;
    9695&lt;/div&gt;
    9796</xsl:text>
    9897          </textarea>
    99 
    100           <!--
    101           <div>
    102         <input type="submit" value="Show Visualization" />
    103           </div>
    104           -->
     98-->
     99
     100
     101          <pre>data-sgvizler-endpoint:</pre>
     102          <textarea id="sample-data-sgvizler-endpoint" name="sgvizler-endpoint" class="sgvizler" rows="1">
     103<!-- -->
     104<xsl:text>
     105//sowemustthink.space/greenstone3-lod/greenstone/query
     106</xsl:text>
     107          </textarea>
     108
     109          <pre>data-sgvizler-chart:</pre>
     110          <textarea id="sample-data-sgvizler-chart" name="sgvizler-chart" class="sgvizler" rows="1">
     111<!-- -->
     112<xsl:text>
     113google.visualization.BarChart
     114</xsl:text>
     115          </textarea>
     116
     117
     118          <pre>data-sgvizler-chart-options:</pre>
     119          <textarea id="sample-data-sgvizler-chart-options" name="sgvizler-chart-options" class="sgvizler" rows="2">
     120<!-- -->
     121<xsl:text>
     122title=Number of Songs from each Country (sorted by size)|legend.position=none|height=900|chartArea.height=840|fontSize=11
     123</xsl:text>
     124          </textarea>
     125
     126          <pre>div-style:</pre>
     127          <textarea id="sample-div-style" name="sgvizler-style" class="sgvizler" rows="2">
     128<!-- -->
     129<xsl:text>
     130width:900px; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden; 
     131</xsl:text>
     132          </textarea>
    105133         
    106134          <div class="page ssq">
    … …  
    111139      </div>
    112140
    113      
    114      
     141         
    115142      <div id="sgvizler-div-outer">
    116         <!--
    117         <div id="sgvizler-div"
    118            data-sgvizler-endpoint="//sowemustthink.space/greenstone3-lod/greenstone/query"
    119            data-sgvizler-chart="google.visualization.BarChart"
    120            data-sgvizler-chart-options="title=Number of Songs from each Country|legend.position=none|height=900|chartArea.height=840|fontSize=11"
    121            data-sgvizler-log="2"
    122            style="width:100%; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden;">
    123            <xsl:attribute name="data-sgvizler-query">
    124          PREFIX rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt;
    125          PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
    126          SELECT (?country) (COUNT(?country) AS ?freqCount)       
    127          WHERE {
    128            GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
    129                        ?s gsextracted:Country ?country
    130            }
    131          }
    132          GROUP BY ?country ORDER BY asc(?country)         
    133            </xsl:attribute>
    134            <xsl:text> Loading ...</xsl:text>
    135         </div>
    136 -->
     143        <xsl:text>Loading ...</xsl:text>
    137144      </div>
    138145     
    … …  
    140147        <xsl:text disable-output-escaping="yes">
    141148          $(document).ready(   
    142               function() {
     149                function() {
    143150              ssv_execute();
    144          
    145           /*
    146               var sgvizler_div_raw_text = $('#sample-sgvizler-div').text();
    147               var data_sgvizler_query_raw_text = $('#sample-data-sgvizler-query').text();
    148          
    149           var $sgvizler_div = $(sgvizler_div_raw_text);
    150           $sgvizler_div.attr('data-sgvizler-query',data_sgvizler_query_raw_text);
    151 
    152           $sgvizler_div.attr('style',"width:900px; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden;");
    153          
    154           $('#sgvizler-div-outer').empty().append($sgvizler_div);
    155          
    156           sgvizler2.containerDraw('sgvizler-div');
    157           */
    158         }
     151            }
    159152              );
    160153        </xsl:text>
    161154      </script>
    162155
    163      
    164156      <div class="page">
    165157        <h2>Sample Queries</h2>
    166158
    167159        <p>
    168           The sample queries provided below gradually increase in
    169           the query syntax complexity used.  They are intended
    170           primarily for illustrative purposes, to introduce
    171           a user unfamiliar to various aspects of
    172           SPARQL query syntax.  Click on one of the links below
     160          The samples provided below show a range
     161          of vizisualizations related to the
     162          Eurovision Song Contest, sourced from the raw
     163          data in the triple-store, and converted into
     164          a visualization using SGVizler.
     165
     166          Click on one of <i>Load query above</i> buttons to load
    173167          to load the relevant query syntax into the SPARQL
    174           Query textbox above, then press <i>Get Results</i>
    175           to initiate the query.
     168          Query textbox above, accompanied with SGVizler
     169          attributes that control the visualization,
     170          then press <i>Get Results</i>
     171          to initiate the visualization.
    176172        </p>
    177          
    178         <div id="ssq-restrict-year" style="display: none;">
    179 <!-- -->
    180 <xsl:text>
     173
     174        <div id="ssv-made-the-final" style="display: none;">
     175
     176<!-- Made the finals -->
     177<xsl:text>
     178PREFIX rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt;
    181179PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
    182 
    183 SELECT ?subject ?predicate ?object WHERE {
    184   GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
    185     ?subject ?predicate ?object
    186 
    187     # The following removed a triple that stores JSON data that
    188     # is voluminous but not very interesting to look at
    189     FILTER (?predicate != gsextracted:JSON).
    190     ?subject gsextracted:Year "2000".   
    191   }
     180SELECT (?country) (COUNT(?country) AS ?freqCount)       
     181WHERE {
     182    GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
     183        ?s gsextracted:Country ?country.
     184        ?s gsextracted:Final "true"
     185   }
    192186}
    193 OFFSET 0 LIMIT 200
     187GROUP BY ?country ORDER BY DESC(?freqCount)                   
    194188</xsl:text>
    195189        </div>
    196190
    197 
    198         <div id="ssq-restrict-country-and-year" style="display: none;">
    199 <!-- -->
    200 <xsl:text>
    201 PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
    202 PREFIX xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt;
    203  
    204 SELECT ?subject ?predicate ?object WHERE {
    205   GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
    206     ?subject ?predicate ?object
    207 
    208     # The following removed a triple that stores JSON data that
    209     # is voluminous but not very interesting to look at
    210     FILTER (?predicate != gsextracted:JSON).
    211 
    212     ?subject gsextracted:Year ?year.
    213     ?subject gsextracted:Country ?country.   
    214     FILTER (?country = "France").
    215     FILTER (xsd:integer(?year) >= 1996 &amp;&amp; xsd:integer(?year) &lt;= 2000).
    216 
    217   }
    218 }
    219 OFFSET 0 LIMIT 200
    220 </xsl:text>
    221         </div>
    222 
    223 
    224         <div id="ssq-esc-entrants" style="display: none;">
    225 <!-- -->
    226 <xsl:text>
    227 PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
    228 PREFIX xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt;
    229 PREFIX dc: &lt;http://purl.org/dc/elements/1.1/&gt;
    230 
    231 SELECT ?esc_entrant_uri ?country ?year WHERE {
    232   GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
    233     ?esc_entrant_uri dc:Relation.isPartOf &lt;http://127.0.0.1:8383/greenstone3/library/collection/eurovision&gt;.
    234 
    235     ?esc_entrant_uri gsextracted:Year ?year.
    236     ?esc_entrant_uri gsextracted:Country ?country.   
    237   }
    238 }
    239 ORDER BY ASC(?year) ?country
    240 </xsl:text>
    241         </div>
    242 
    243 
    244         <div id="ssq-jury-votes-totals-1975" style="display: none;">
    245 <!-- -->
    246 <xsl:text>
    247 PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
    248 PREFIX xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt;
    249 PREFIX dc: &lt;http://purl.org/dc/elements/1.1/&gt;
    250 
    251 SELECT ?country ?year ?total WHERE {
    252   GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
    253     ?esc_entrant_uri dc:Relation.isPartOf &lt;http://127.0.0.1:8383/greenstone3/library/collection/eurovision&gt;.
    254 
    255     ?esc_entrant_uri gsextracted:JuryVotesTotal ?total.
    256     BIND(xsd:integer(?total) AS ?total_int).
    257    
    258     ?esc_entrant_uri gsextracted:Year ?year
    259       FILTER(xsd:integer(?year) = 1975).
    260     ?esc_entrant_uri gsextracted:Country ?country.   
    261   }
    262 }
    263 ORDER BY DESC(?total_int)
    264 </xsl:text>
    265         </div>
    266 
    267        
    268         <div id="ssq-jury-votes-1975" style="display: none;">
    269 <!-- -->
    270 <xsl:text>
    271 PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
    272 PREFIX xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt;
    273 PREFIX dc: &lt;http://purl.org/dc/elements/1.1/&gt;
    274 
    275 SELECT ?country ?year ?jury_country ?jury_vote WHERE {
    276   GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
    277     ?esc_entrant_uri dc:Relation.isPartOf &lt;http://127.0.0.1:8383/greenstone3/library/collection/eurovision&gt;.
    278 
    279     ?esc_entrant_uri ?gsextracted_jury_country_uri ?jury_vote.
    280     BIND(STRENDS(str(?gsextracted_jury_country_uri),"-J") AS ?is_jury_vote)
    281     FILTER (?is_jury_vote).
    282     BIND(REPLACE(str(?gsextracted_jury_country_uri), ".*#(.*?)-J$", "$1") AS ?jury_country).
    283 
    284     ?esc_entrant_uri gsextracted:Year ?year
    285       FILTER(xsd:integer(?year) = 1975).
    286     ?esc_entrant_uri gsextracted:Country ?country.
    287 
    288      
    289   }
    290 }
    291 ORDER BY ASC(?year) ?country 
    292 </xsl:text>
    293         </div>
    294191       
    295192        <ul class="ssq">
    296193          <li>
    297         Year Restricted (raw data rows):<br/>
    298         <button type="button" class="load-ssq" id="load-ssq-restrict-year" onclick="ssq_load('ssq-restrict-year')">Load query above</button>
    299         <button type="button" class="exec-ssq" id="exec-ssq-restrict-year" onclick="ssq_execute()">Get Results</button><br/>
    300         Similar to the default query (all results returned) but restricted to entries associated with the year 2000.
     194        Made the Finals:<br/>
     195        <button type="button" class="load-ssq" id="load-ssv-made-the-final" onclick="ssv_load('ssv-made-the-final')">Load query above</button>
     196        <button type="button" class="exec-ssq" id="exec-ssv-made-the-final" onclick="ssv_execute()">Visualize Results</button><br/>
     197        Plot as a bar graph the number of times each country has made it to the finals.
    301198          </li>
    302199
    303           <li>
    304         Country and Year Restricted (raw data rows):<br/>
    305         <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>
    306         <button type="button" class="exec-ssq" id="exec-ssq-restrict-country-and-year" onclick="ssq_execute()">Get Results</button><br/>
    307        
    308         Similar to the default query but restricted to entries about the country France, in the years 1996-2000.
    309           </li>
    310 
    311           <li>
    312         Eurovison Song Contest (ESC) entrants:<br/>
    313         <button type="button" class="load-ssq" id="load-ssq-esc-entrants" onclick="ssq_load('ssq-esc-entrants')">Load query above</button>
    314         <button type="button" class="exec-ssq" id="exec-ssq-esc-entrants" onclick="ssq_execute()">Get Results</button><br/>
    315        
    316         List all the entrants (country and year) sorted by year, then by country.
    317           </li>
    318 
    319           <li>
    320         Jury Voting Totals in 1975:<br/>
    321         <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>
    322         <button type="button" class="exec-ssq" id="exec-ssq-jury-votes-totals-1975" onclick="ssq_execute()">Get Results</button><br/>
    323        
    324         The jury vote totals countries received in 1975, ranked to score.
    325           </li>
    326          
    327 
    328           <li>
    329         Jury Votes Cast by Country in 1975:<br/>
    330         <button type="button" class="load-ssq" id="load-ssq-jury-votes-1975" onclick="ssq_load('ssq-jury-votes-1975')">Load query above</button>
    331         <button type="button" class="exec-ssq" id="exec-ssq-jury-votes-1975" onclick="ssq_execute()">Get Results</button><br/>
    332        
    333         List all votes case in the 1975 competition.
    334           </li>
    335200         
    336201        </ul>

  • main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/transform/pages/sparql.xsl

    r34942 r34956  
    144144          The sample queries provided below gradually increase in
    145145          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.
     146          primarily for illustrative purposes, to introduce a user
     147          unfamiliar to various aspects of SPARQL query syntax.
     148          Click on one of <i>Load query above</i> buttons to load
     149          the relevant query syntax into the SPARQL Query textbox
     150          above, then press <i>Get Results</i> to initiate the
     151          query.
    152152        </p>
    153153         
    … …  
    268268</xsl:text>
    269269        </div>
     270
     271
     272        <div id="ssq-country-info" style="display: none;">
     273<!--
     274  Adapted from:
     275     https://stackoverflow.com/questions/40069644/retrieve-information-about-all-european-countries
     276-->
     277<xsl:text>
     278
     279PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
     280
     281PREFIX  dbo:  &lt;http://dbpedia.org/ontology/&gt;
     282PREFIX  dbp:  &lt;http://dbpedia.org/property/&gt;
     283PREFIX  dct:  &lt;http://purl.org/dc/terms/&gt;
     284#PREFIX  geo:  &lt;http://www.opengis.net/ont/geosparql#&gt;
     285
     286PREFIX geo: &lt;http://www.w3.org/2003/01/geo/wgs84_pos#&gt;
     287
     288SELECT DISTINCT ?country_uri ?capital ?area ?populationTotal ?lat ?long
     289     ?currency ?gdpPppPerCapita ?giniCoefficient WHERE {
     290
     291#  SERVICE &lt;https://dbpedia.demo.openlinksw.com/sparql&gt; {
     292  SERVICE &lt;https://dbpedia.org/sparql&gt; {
     293
     294    ?db_country_uri dbo:capital ?db_capital.
     295
     296    BIND(?db_country_uri AS ?country_uri).
     297    BIND(str(?db_country_uri) AS ?country_uri_str).
     298    BIND(?db_capital AS ?capital).
     299
     300#    OPTIONAL {
     301#      ?country_uri dbp:areaKm          ?area.         
     302#      ?country_uri dbo:populationTotal ?populationTotal.
     303#      ?country_uri geo:lat             ?lat.           
     304#      ?country_uri geo:long            ?long.
     305#    }
     306
     307    OPTIONAL { ?country_uri dbp:areaKm          ?area.            }
     308    OPTIONAL { ?country_uri dbo:populationTotal ?populationTotal. }
     309    OPTIONAL { ?capital     geo:lat             ?lat.             }
     310    OPTIONAL { ?capital     geo:long            ?long.            }
     311   
     312    OPTIONAL { ?country_uri dbp:currencyCode    ?currency.        }
     313    OPTIONAL { ?country_uri dbp:gdpPppPerCapita ?gdpPppPerCapita.  }
     314
     315    OPTIONAL { ?country_uri dbo:giniCoefficient ?giniCoefficient. }
     316  }
     317
     318  ?esc_entrant_uri gsextracted:CountryDBURI ?country_uri_str.
     319
     320}
     321ORDER BY ASC(?country_uri) 
     322</xsl:text>
     323        </div>
     324
     325     
    270326       
    271327        <ul class="ssq">
    … …  
    301357          </li>
    302358         
    303 
    304359          <li>
    305360        Jury Votes Cast by Country in 1975:<br/>
    … …  
    309364        List all votes case in the 1975 competition.
    310365          </li>
     366
     367          <li>
     368        Facts and Figures About Competing Countries:<br/>
     369        <button type="button" class="load-ssq" id="load-ssq-country-info" onclick="ssq_load('ssq-country-info')">Load query above</button>
     370        <button type="button" class="exec-ssq" id="exec-ssq-country-info" onclick="ssq_execute()">Get Results</button><br/>
     371       
     372        Demographics about other related information about the countries the song constest entries are from.
     373          </li>
    311374         
    312375        </ul>
Note: See TracChangeset for help on using the changeset viewer.