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

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:java="http://xml.apache.org/xslt/java"
    xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
    xmlns:gslib="http://www.greenstone.org/skinning"
    xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"   
    extension-element-prefixes="java util"
    exclude-result-prefixes="java util">

    <!-- use the 'main' layout -->
    <xsl:import href="layouts/main.xsl"/>


    <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>
    
    <xsl:include href="dataviz/made-the-final.xsl"/>
    <xsl:include href="dataviz/list-of-winners.xsl"/>
    <xsl:include href="dataviz/list-of-losers.xsl"/>
    <xsl:include href="dataviz/top-3-with-mir-content.xsl"/>
    <xsl:include href="dataviz/got-nul-point.xsl"/>
    <xsl:include href="dataviz/got-nul-point-after-winning.xsl"/>
    <xsl:include href="dataviz/voting-dataflow-jury.xsl"/>
    <xsl:include href="dataviz/voting-dataflow-tele.xsl"/>
    <xsl:include href="dataviz/jury-tele-diff.xsl"/>
    <xsl:include href="dataviz/draw-bias.xsl"/>
    <xsl:include href="dataviz/draw-bias-normalized.xsl"/>
    
    <xsl:variable name="groupPath"><xsl:value-of select="/page/pageRequest/paramList/param[@name='group']/@value"/></xsl:variable>
    <!-- set page title -->
    <xsl:template name="pageTitle">SPARQL Visualizer</xsl:template>

    <!-- set page breadcrumbs -->
    <xsl:template name="breadcrumbs"><gslib:siteLink/><gslib:rightArrow/>
    <xsl:if test="$groupPath != ''">
      <xsl:for-each select="/page/pageResponse/pathList/group">
        <xsl:sort data-type="number" select="@position"/>
          <a>
        <xsl:attribute name="href"><gslib:groupHref path="{@path}"/></xsl:attribute>                
        <xsl:attribute name="title"><gslib:groupName path="{@path}"/></xsl:attribute>
        <gslib:groupName path="{@path}"/>
          </a>
          <gslib:rightArrow/>
      </xsl:for-each>
    </xsl:if>
    <a href="{$library_name}/collection/{$collName}/page/about"><gslib:collectionName/></a>
    </xsl:template>

    <!-- the page content -->
    <xsl:template match="/page">
      <!--
      <link rel="stylesheet" href="sites/{$site_name}/collect/{$collName}/style/fuseki.css" type="text/css" />
      -->
      <gsf:script src="sites/{$site_name}/collect/{$collName}/js/eurovision.js"/>
      <gsf:script src="sites/{$site_name}/collect/{$collName}/js/dataviz.js"/>

      <link rel="stylesheet" href="sites/{$site_name}/collect/{$collName}/css/eurovision.css" type="text/css" />
      <link rel="stylesheet" href="sites/{$site_name}/collect/{$collName}/css/dataviz.css" type="text/css" />
      <style>
        div.page { margin-left: 12px; margin-right: 12px; margin-top: 6px; margin-bottom: 6px;}

        p  { padding-top: 6px; padding-bottom: 6px;}
        a  { text-decoration: underline; }
        li { padding-bottom: 6px; margin-bottom: 6px; }
      </style>

      <div class="page">
        <h2>Visualize the Eurovision Linked-Data</h2>

        <p>       
          Explore the Linked Data stored in this collection
          through the samples provided that produce a range of
          visualizations.  For a given sample visualization, the
          approach used is to first load in a SPARQL query that
          extracts and manipulates the linked data in the
          underlying triplestore that represents all the metadata
          stored in the collection. 
          This is then passed on to
          <i>SGVizler</i>, a JavaScript visualization library, to
          display in graphical form the generated data.       
        </p>

        <p>
          In terms of operating the user interface, this is
          achieved by pressing the <i>Load query above</i> button
          for a sample visualization that has piqued your interest
          (listed below).  This causes a <i>Visualize Results</i>
          button to appear alongside the load button you have just
          pressed, which when clicked runs the loaded-in query and
          visualizes the result.
        </p>

        <p>
          We use this two-step process so it is possible to
          change what query is run, and how the resulting data is visualized.
          The first text-box below is for the SPARQL query.  The following
          3 text-boxes control aspects of the visualization.
          If you haven't worked with the underlying tools before,
          we suggest you work your way through the sample visualizations
          provided, trying out small edits to see how that affects
          what is produced.
        </p>
        <p>
          Rather than visualize results, if you would like to
          directly access and/or export the data to peroforms
          other forms of analysis, then you'll probably want to
          use the:
          <ul>
        <li>
          <a href="{$library_name}/collection/{$collName}/page/sparql">Data Analysis page</a>
        </li>
          </ul>
        </p>
        
      </div>      

      <div class="page">
        <h2>SGVizler Query</h2>
      </div>

      <script type="text/javascript" src="ext/jena/sgvizler2/sgvizler2.js"><xsl:text> </xsl:text></script>
      <div class="page moreindent">
        <form class="sgvizler-form" id="sample-sparql-query-form"
          action="/greenstone3-lod3/greenstone/query" target="_blank"
          method="GET" accept-charset="UTF-8">
          <pre>data-sgvizler-query:</pre>
              <textarea id="sample-data-sgvizler-query" name="query" class="sgvizler" rows="10">
<!-- -->
<xsl:text>
</xsl:text>
          </textarea>

          <div style="display:none;">
        <pre>data-sgvizler-endpoint:</pre>
        <textarea id="sample-data-sgvizler-endpoint" name="sgvizler-endpoint" class="sgvizler" rows="1">
<!-- -->
<xsl:text>
//sowemustthink.space/greenstone3-lod3/greenstone/query
</xsl:text>
        </textarea>
          </div>
          
          <pre>data-sgvizler-chart:</pre>
          <textarea id="sample-data-sgvizler-chart" name="sgvizler-chart" class="sgvizler" rows="1">
<!-- -->
<xsl:text>
google.visualization.BarChart
</xsl:text>
          </textarea>


          <pre>data-sgvizler-chart-options:</pre>
          <textarea id="sample-data-sgvizler-chart-options" name="sgvizler-chart-options" class="sgvizler" rows="2">
<!-- -->
<xsl:text>
title=Number of Songs from each Country (sorted by size)|legend.position=none|height=900|chartArea.height=840|fontSize=11
</xsl:text>
          </textarea>

          <pre>div-style:</pre>
          <textarea id="sample-div-style" name="sgvizler-style" class="sgvizler" rows="2">
<!-- -->
<xsl:text>
width:900px; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden;  
</xsl:text>
          </textarea>

          <!-- locate this anchor tag a bit ealiler in the page, so there's a bit of breathing space 
           at the top of the page, before the sgvizler-div-outer starts -->
          <a name="sgvizler-plot" ><xsl:text> </xsl:text></a>
          
          <div class="page ssq">
        <button type="button" onclick="ssv_execute()">Show Visualization</button>
          </div>
          
        </form>
      </div>

      <div id="sgvizler-div-outer">
        <xsl:text>Loading ...</xsl:text>
      </div>
      
      <script type="text/javascript">
        <xsl:text disable-output-escaping="yes">
          $(document).ready(    
                function() {
              ssv_load("ssv-orig");
              ssv_execute();
            }
              );
        </xsl:text>
      </script>

      <div class="page">
        <h2>Sample Visualizations</h2>

        <p>
          The samples provided below show a range
          of visualizations related to the
          Eurovision Song Contest, sourced from the raw
          data in the triple-store, and converted into
          a visualization using SGVizler.

          Click on one of the <i>Load query above</i> buttons
          to load the relevant query syntax into the SPARQL
          Query textbox above, accompanied with SGVizler
          attributes that control the visualization,
          then press <i>Get Results</i>
          to initiate the visualization.
        </p>



        <div id="ssv-orig" style="display: none;">
<!-- -->
<xsl:text>
PREFIX rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt;
PREFIX gsdlextracted: &lt;http://greenstone.org/gsdlextracted#&gt;

SELECT ?country (COUNT(?country) AS ?freqCount)      
WHERE {
    GRAPH &lt;</xsl:text><xsl:value-of select="$graphURI"/><xsl:text>&gt;  {
        { 
            SELECT DISTINCT ?country ?year WHERE {
                ?s gsdlextracted:Country ?country.
                ?s gsdlextracted:Year ?year.
           } ORDER BY ?country ?year
        }
    }
}
GROUP BY ?country ORDER BY DESC(?freqCount)
</xsl:text>
        </div>
        <div id="ssv-orig-endpoint" style="display: none;">
<!-- -->
<xsl:text>
//sowemustthink.space/greenstone3-lod3/greenstone/query
</xsl:text>
        </div>
        <div id="ssv-orig-chart" style="display: none;">
<!-- -->
<xsl:text>
google.visualization.BarChart
</xsl:text>
        </div>
        <div id="ssv-orig-chart-options" style="display: none;">
<!-- -->
<xsl:text>
title=Number of Songs from each Country (sorted by size)|legend.position=none|height=900|chartArea.height=840|fontSize=11
</xsl:text>
        </div>
        <div id="ssv-orig-div-style" style="display: none;">
<!-- -->
<xsl:text>
width:900px; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden;  
</xsl:text>
        </div>


        <xsl:call-template name="ssv-made-the-final"/>
        <xsl:call-template name="ssv-list-of-winners"/>
        <xsl:call-template name="ssv-list-of-losers"/>
        <xsl:call-template name="ssv-top-3-with-mir-content"/>
        <xsl:call-template name="ssv-got-nul-point"/>
        <xsl:call-template name="ssv-got-nul-point-after-winning"/>
        <xsl:call-template name="ssv-voting-dataflow-jury"/>
        <xsl:call-template name="ssv-voting-dataflow-tele"/>
        <xsl:call-template name="ssv-jury-tele-diff"/>
        <xsl:call-template name="ssv-draw-bias"/>
        <xsl:call-template name="ssv-draw-bias-normalized"/>
        
        
        <ul class="ssq">
          <li>
        <b>Number of times entered, sorted by frequency:</b><br/>
        <button type="button" class="load-ssq" id="load-ssv-orig" onclick="ssv_load('ssv-orig')">Load query above</button>
        <button type="button" class="exec-ssq" id="exec-ssv-orig" onclick="ssv_execute()">Visualize Results</button><br/>
        <p>
          Plot as a bar graph the number of times each country has competed in the
          Eurovision Song Contest, sorted by frequency.
        </p>
          </li>

          <li>
        <b>Made the Finals:</b><br/>
        <button type="button" class="load-ssq" id="load-ssv-made-the-final" onclick="ssv_load('ssv-made-the-final')">Load query above</button>
        <button type="button" class="exec-ssq" id="exec-ssv-made-the-final" onclick="ssv_execute()">Visualize Results</button><br/>
        <p>Plot as a bar graph the number of times each country has made it to the finals.</p>
          </li>

          <li>
        <b>List of Winners:</b><br/>
        <button type="button" class="load-ssq" id="load-ssv-list-of-winners" onclick="ssv_load('ssv-list-of-winners')">Load query above</button>
        <button type="button" class="exec-ssq" id="exec-ssv-list-of-winners" onclick="ssv_execute()">Visualize Tabulated Results</button><br/>
        <p>The songs that have won through the ages.</p>
          </li>

          <li>
        <b>List of Last Place Entrants:</b><br/>
        <button type="button" class="load-ssq" id="load-ssv-list-of-losers" onclick="ssv_load('ssv-list-of-losers')">Load query above</button>
        <button type="button" class="exec-ssq" id="exec-ssv-list-of-losers" onclick="ssv_execute()">Visualize Tabulated Results</button><br/>
        <p>The songs that have won through the ages.</p>
          </li>
          
          <li>
        <b>Top 3 Acts per Year with (where available) Details of Musical Content:</b><br/>
        <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>
        <button type="button" class="exec-ssq" id="exec-ssv-top-3-with-mir-content" onclick="ssv_execute()">Visualize Tabulated Results</button><br/>
        <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>
          </li>

          <li>
        <b>The ignominy of &quot;nul point&quot;:</b><br/>
        <button type="button" class="load-ssq" id="load-ssv-got-nul-point" onclick="ssv_load('ssv-got-nul-point')">Load query above</button>
        <button type="button" class="exec-ssq" id="exec-ssv-got-nul-point" onclick="ssv_execute()">Visualize Results</button><br/>
        <p>
          Plot a bar graph showing which countries, and how
          often they have, competed in the final but received
          zero points as their final total score.
        </p>
          </li>

          <li>
        <b>The even more galling circumstance of getting &quot;nul point&quot; having won the previous year:</b><br/>
        <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>
        <button type="button" class="exec-ssq" id="exec-ssv-got-nul-point-after-winning" onclick="ssv_execute()">Visualize Results</button><br/>
        <p>
          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
          the contest.
        </p>
          </li>


          <li>
        <b>Dataflow Voting Patterns of Juries:</b><br/>
        <div>
          <button type="button" class="load-ssq" id="load-ssv-voting-dataflow-jury" onclick="ssv_load('ssv-voting-dataflow-jury')">Load query above</button>
          <div style="display: inline-block; padding-right: 12px;">
            <label style="padding-right: 6px;" for="ssv-voting-dataflow-jury-startyear">Start Year:</label>
            <input type="text" id="ssv-voting-dataflow-jury-startyear" value="2010" style="width: 80px; padding-left: 6px"/>
            <label style="padding-right: 6px; padding-left: 12px;" for="ssv-voting-dataflow-jury-endyear">End Year:</label>
            <input type="text" id="ssv-voting-dataflow-jury-endyear"   value="2019" style="width: 80px; padding-left: 6px"/>
          </div>
          <button type="button" class="exec-ssq" id="exec-ssv-voting-dataflow-jury" onclick="ssv_execute('ssv-voting-dataflow-jury')">Visualize Results</button>
        </div>
        <p>
          Plot as a Sankey Dataflow Graph how juries allocate
          their votes to countries over the years 2010-2019.
          Note: to help emphasize the voting patterns, we plot
          the <i>square</i> of the voting totals.
        </p>

        <p>
          Experiment with editing the date range specified in
          the <i>Start Year</i> and <i>End Year</i> text-input
          boxes.  Alternatively, the the SPARQL query itself
          edit
          the <tt>FILTER(xsd:integer(?year) &gt; 2010
          &amp;&amp; xsd:integer(?year) &lt;= 2019)</tt> clause
          in the above text box and then press <i>Show
          Visualization</i> to see how the voting by jury has
          changed over the decades.
        </p>
          </li>

          
          <li>
        <b>Dataflow Voting Patterns in Televoting:</b><br/>
        <div>
          <button type="button" class="load-ssq" id="load-ssv-voting-dataflow-tele" onclick="ssv_load('ssv-voting-dataflow-tele')">Load query above</button>
          <span style="padding-right: 12px;">
            Start Year: <input type="text" id="ssv-voting-dataflow-tele-startyear" value="2016" style="width: 80px; padding-left: 6px"/>
            End Year:   <input type="text" id="ssv-voting-dataflow-tele-endyear"   value="2019" style="width: 80px; padding-left: 6px"/>
          </span>
        
          <button type="button" class="exec-ssq" id="exec-ssv-voting-dataflow-tele" onclick="ssv_execute('ssv-voting-dataflow-tele')">Visualize Results</button><br/>
        </div>
        <p>
          Plot as a Sankey Dataflow Graph of the televoting
          data by country.  Years plotted are 2016-2019
          as these are the only years the data has been
          published separate to jury voting.  As with
          the Jury Sankey visual above, we plot  
          the <i>square</i> of the voting totals to
          help emphasize where differences occur.
        </p>
          </li>       


          <li>
        <b>Differences between Jury and Televoting:</b><br/>
        <div>
          <button type="button" class="load-ssq" id="load-ssv-jury-tele-diff" onclick="ssv_load('ssv-jury-tele-diff')">Load query above</button>
          <span style="padding-right: 12px;">
            For the country: <input type="text" id="ssv-jury-tele-diff-tocountry" value="The Netherlands" style="width: 180px; padding-left: 6px"/>
            In the year:     <input type="text" id="ssv-jury-tele-diff-inyear"    value="2019"        style="width:  80px; padding-left: 6px"/>
          </span>
        
          <button type="button" class="exec-ssq" id="exec-ssv-jury-tele-diff" onclick="ssv_execute('ssv-jury-tele-diff')">Visualize Results</button><br/>
        </div>
        <p>
          Plot as a Tree-map how the various juries have cast
          their votes for a specific country.  The area of the
          block represents the number of points awarded by
          the jury.  To this we add colouring
          to the block to show how much in agreement
          the televote was: red indicates the televote was
          higher than the the jury vote; green is when the
          votes are similar (neutral); and
          blue indicates the televote was lower then the
          jury vote.
        </p>
          </li>       
          

          <li>
        <b>The Curse of Being the Second Performer in the Lineup?</b><br/>
        <button type="button" class="load-ssq" id="load-ssv-draw-bias" onclick="ssv_load('ssv-draw-bias')">Load query above</button>
        <button type="button" class="exec-ssq" id="exec-ssv-draw-bias" onclick="ssv_execute()">Visualize Results</button><br/>
        <p>
          Plot as a bar graph how many times an entrant
          performing in a given position in the lineup has
          gone on to win the competition.  Performing second
          in the line-up historically has been considered an
          unlucky draw position to perform in, but are there
          any others?  Any draw positions that seem to
          prove favourable to winning?
        </p>
          </li>

          <li>
        <b>Normalized Plot of ... The Curse of Being the Second Performer in the Lineup?</b><br/>
        <button type="button" class="load-ssq" id="load-ssv-draw-bias-normalized" onclick="ssv_load('ssv-draw-bias-normalized')">Load query above</button>
        <button type="button" class="exec-ssq" id="exec-ssv-draw-bias-normalized" onclick="ssv_execute()">Visualize Results</button><br/>
        <p>
          Same as the above, only to better take account of
          the fact that an increasing number of countries have
          been taking part in the final, in this version of
          the plot the values have normalized to express as a
          percentage the number of times an entrant has won in
          that position of the draw, as a percentage of the
          total number of times there has been an entrant
          performing at that position of the draw.
        </p>
          </li>
          
          
        </ul>
        
      </div>
    </xsl:template>
    
</xsl:stylesheet>