Changeset 34942


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

Development of SPARQL page so it can load in different examples; then some preliminary work on doing the same for SGVizler

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  
    3737}
    3838
     39
     40/* ssq = sample sparql query */
     41
     42ul.ssq li:nth-child(odd) {
     43    background-color: rgba(255,255,255,0.2);
     44}
     45ul.ssq li:nth-child(even) {
     46    background-color: rgba(255,255,255,0.0);
     47}
     48
     49ul.ssq li {
     50    padding: 6px;
     51}
     52
     53/*
     54a.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
     76button.load-ssq  {
     77    margin-right: 12px;
     78}
     79
     80button.exec-ssq  {
     81    display: none;
     82}

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

    r34931 r34942  
    202202}
    203203     
     204
     205
     206function 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
     213function ssq_execute(query_text_id)
     214{   
     215    $('#sample-sparql-query-form').submit();
     216}
     217
     218
     219function 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  
    2828     
    2929      <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>
    3033        The <a href="https://eurovision.tv">Eurovision Song
    3134        Contest</a> is a live-broadcast televised multi-national
    32         competition with a collaborative mission, much like the
    33         Olympics.  <i>A help to shore up a post war Europe in 1956 it
    34         all began, where there were only seven countries and one
    35         camera man!</i> The contest has grown significantly from
    36         there, with 43 countries competing most years—even
     35        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
    3740        Australia takes part now, through a specially
    3841        arranged invitation. It's an annual celebration of
    … …  
    5861        all the performances are over, artists wait
    5962        nervously as via the Internet the show's hosts visit each
    60         of the 43 countries in turn collecting all points cast
     63        of the 40+ countries in turn collecting all points cast
    6164        by the country appointed juries.  This includes
    6265        the all important top score that can be cast, 12 points
    … …  
    7073        place, and so on.
    7174        This all culminates in a new winner being crowned, with
    72         the competition typically being hosted the following year
     75        the competition usually being hosted the following year
    7376        by that country.
    7477      </p>
    75      
     78
     79      <h2>Features of this Website</h2>
     80
    7681      <p>       
    7782        This (unoffical) website has been developed by a small
    … …  
    103108      </p>
    104109     
    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<!--     
    106122      <script type="text/javascript" src="//www.google.com/jsapi"><xsl:text> </xsl:text></script>
    107123          <script type="text/javascript" src="//mgskjaeveland.github.io/sgvizler/v/0.6/sgvizler.js"><xsl:text> </xsl:text></script>
    108 
     124-->
    109125      <script type="text/javascript" src="ext/jena/sgvizler2/sgvizler2.js"><xsl:text> </xsl:text></script>
    110126     
    … …  
    158174           data-sgvizler-chart-options="title=Number of Songs from each Country|legend.position=none|height=900|chartArea.height=840|fontSize=11"
    159175           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;">
    161177           <xsl:attribute name="data-sgvizler-query">
    162178         PREFIX rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt;
    … …  
    173189      </div>
    174190
     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     
    175201      <div id="technicaldev-turnstyle" style="margin-top: 12px;">
    176202        <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  
    55    xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
    66    xmlns:gslib="http://www.greenstone.org/skinning"
     7    xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"   
    78    extension-element-prefixes="java util"
    89    exclude-result-prefixes="java util">
    … …  
    1415    <xsl:variable name="groupPath"><xsl:value-of select="/page/pageRequest/paramList/param[@name='group']/@value"/></xsl:variable>
    1516    <!-- set page title -->
    16     <xsl:template name="pageTitle"><gslib:collectionName/></xsl:template>
     17    <xsl:template name="pageTitle">SPARQL Query</xsl:template>
    1718
    1819    <!-- set page breadcrumbs -->
    … …  
    2930      </xsl:for-each>
    3031    </xsl:if>
     32    <a href="{$library_name}/collection/{$collName}/page/about"><gslib:collectionName/></a>
    3133    </xsl:template>
    3234
    3335    <!-- the page content -->
    3436    <xsl:template match="/page">
     37      <!--
    3538      <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" />
    3643      <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; }
    3848      </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>     
    3973
    4074      <div>
    4175        <h2>SPARQL Query</h2>
    4276
    43         <p>Dataset: /greenstone</p>
    44         <p>Graph: eurovision</p>
     77        <p>
     78          Dataset: /greenstone<br/>
     79          Graph: eurovision
     80        </p>
    4581      </div>
    4682
    4783      <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>
     90PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
     91
     92SELECT ?subject ?predicate ?object WHERE {
     93  GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
     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}
     101OFFSET 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>
    76131          </div>
     132         
    77133          <div>
    78134        <input type="submit" value="Get Results" />
    79135          </div>
     136         
    80137        </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>
     157PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
     158
     159SELECT ?subject ?predicate ?object WHERE {
     160  GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
     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}
     169OFFSET 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>
     177PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
     178PREFIX xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt;
     179 
     180SELECT ?subject ?predicate ?object WHERE {
     181  GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
     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 &amp;&amp; xsd:integer(?year) &lt;= 2000).
     192
     193  }
     194}
     195OFFSET 0 LIMIT 200
     196</xsl:text>
     197        </div>
     198
     199
     200        <div id="ssq-esc-entrants" style="display: none;">
     201<!-- -->
     202<xsl:text>
     203PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
     204PREFIX xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt;
     205PREFIX dc: &lt;http://purl.org/dc/elements/1.1/&gt;
     206
     207SELECT ?esc_entrant_uri ?country ?year WHERE {
     208  GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
     209    ?esc_entrant_uri dc:Relation.isPartOf &lt;http://127.0.0.1:8383/greenstone3/library/collection/eurovision&gt;.
     210
     211    ?esc_entrant_uri gsextracted:Year ?year.
     212    ?esc_entrant_uri gsextracted:Country ?country.   
     213  }
     214}
     215ORDER 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>
     223PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
     224PREFIX xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt;
     225PREFIX dc: &lt;http://purl.org/dc/elements/1.1/&gt;
     226
     227SELECT ?country ?year ?total WHERE {
     228  GRAPH &lt;http://localhost:3030/greenstone/data/eurovision&gt;  {
     229    ?esc_entrant_uri dc:Relation.isPartOf &lt;http://127.0.0.1:8383/greenstone3/library/collection/eurovision&gt;.
     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}
     239ORDER 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>
     247PREFIX gsextracted: &lt;http://greenstone.org/gsextracted#&gt;
     248PREFIX xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt;
     249PREFIX dc: &lt;http://purl.org/dc/elements/1.1/&gt;
     250
     251SELECT ?country ?year ?jury_country ?jury_vote 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_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}
     267ORDER 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       
    81314      </div>
    82315    </xsl:template>
Note: See TracChangeset for help on using the changeset viewer.