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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE videocollection [
  <!ENTITY ndash "&#8211;">
  <!ENTITY mdash "&#8212;">
]>
<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">


  <xsl:template name="coll-description">
    <gsf:style src="sites/{$site_name}/collect/{$collName}/css/eurovision.css"/>    
    <gsf:script src="sites/{$site_name}/collect/{$collName}/js/jquery.show-more.js"/>

      <div id="about-desc">
      <h2>Introduction</h2>
      <!--
      <p style="padding-bottom: 10px;">
        The <a href="https://eurovision.tv">Eurovision Song
        Content</a> is a live-broadcast televised event that
        was first held in 1956 featuring artists singing original songs from
        7 countries.  Since then it has grown into an event involving
        over 40 countries, and streamed all around the world. ...
        
      </p>
      -->
      
      <p style="padding-bottom: 10px;">
        <i style="padding-right:6px;">A help to shore up a post war Europe in 1956 it
        all began, where there were only seven countries and one
        camera man!</i>
      </p>
      <p>
        The <a href="https://eurovision.tv">Eurovision Song
        Contest</a> is a long-running, live-broadcast televised multi-national
        competition with a collaborative mission, not dissimilar
        in spirit to the Olympics.
        The contest has grown significantly from
        that modest start with 7 countries (and one cameraman),
        with over 40 countries competing these days—even
        Australia takes part now, through a specially
        arranged invitation. It's an annual celebration of
        European culture and the highlight of many people's
        year.
      </p>

      <div id="about-show-more">
        <p>     
          At Eurovision there is no division because wherever
          you come from Eurovision is home. The Eurovision song
          contest is widely known as a safe space for LGBTQIA+
          people and a platform for free expression. For example
          trans-woman
          <a href="https://en.wikipedia.org/wiki/Dana_International">Dana International</a>
          won as far back as 1998.
          There have been songs in many different languages over the
          years, although most are in English these days. This
          doesn't matter, however, because music is a language we all
          know how to speak.
        </p>
        <p>     
          In its latest incarnation, after
          all the performances are over, artists wait
          nervously as via the Internet the show's hosts visit each
          of the 40+ countries in turn collecting all points cast
          by the country appointed juries.  This includes
          the all important top score that can be cast, 12 points
          (douze points!), a double-increment up from the
          10 points awarded to the song a country ranks second,
          followed by 8, 7, 6 
 1 points awarded.
          Next comes the &quot;the popular vote&quot;
          where fans, still grouped by country, have
          the votes they cast by phone, SMS or the Eurovision app
          tallied and mapped into the same format of 12 points for 1st
          place, and so on.
          This all culminates in a new winner being crowned, with
          the competition usually being hosted the following year
          by that country. 
        </p>
      </div>
      <gsf:script>
        $('#about-show-more').showMore({
            minheight: 0,
        buttontxtmore:"show more ...",
        buttontxtless:"... show less"
          });
      </gsf:script>

      
      <h2>Features of this Website</h2>

      <p>       
        This (unoffical) website has been developed by a small
        team of dedicated Digital Library researchers who also
        happen to be <i>huge</i> fans of Eurovision.  We wish to
        share our love for the competition, and at the same time
        demonstrate what is possible when—harnessing some of that
        passion!—the techniques of
        <a href="https://en.wikipedia.org/wiki/Linked_data">Linked
        Open Data</a> are applied
        to the Open Source
        <a href="https://www.greenstone.org">Greenstone3</a>
        Digital Library platform.  For the technically interested
        see the
        <a href="{$library_name}/collection/{$collName}/page/about#it-all-started-with">
          <i style="padding-right: 6px;">It All Started with a Little <strike>Sparkle</strike>SPARQL</i></a>
          below for details about how the digital library was formed.
      </p>

      <p>
        For those who want to jump right in and access information about, as well as see and hear some of the past performances,
        we suggest you
        start by exploring the assembled information through
        the browsing tabs, such as
        <a href="{$library_name}/collection/{$collName}/browse/CL3">browser by country</a>
        or else search the collection for a general term that you sparks
        interest, such as
        <a href="{$library_name}/collection/{$collName}/search/TextQuery?qs=1&amp;rt=rd&amp;s1.level=Doc&amp;startPage=1&amp;s1.query=love&amp;s1.index=ZZ">love</a>
        and
        <a href="{$library_name}/collection/{$collName}/search/TextQuery?qs=1&amp;rt=rd&amp;s1.level=Doc&amp;startPage=1&amp;s1.query=amore&amp;s1.index=ZZ">amore</a>,
        or perhaps something more frivolous such as
        <a href="{$library_name}/collection/{$collName}/search/TextQuery?qs=1&amp;rt=rd&amp;s1.level=Doc&amp;startPage=1&amp;s1.query=la&amp;s1.index=ZZ">la</a>.
        
      </p>

<!--      
      <script type="text/javascript" src="//www.google.com/jsapi"><xsl:text> </xsl:text></script>
          <script type="text/javascript" src="//mgskjaeveland.github.io/sgvizler/v/0.6/sgvizler.js"><xsl:text> </xsl:text></script>
-->
      <script type="text/javascript" src="ext/jena/sgvizler2/sgvizler2.js"><xsl:text> </xsl:text></script>
      
      <script type="text/javascript">
        <xsl:text disable-output-escaping="yes">
          $(document).ready(    
                function() {
          
                  //sgvizler.prefix('dc','http://purl.org/dc/elements/1.1/');
              //sgvizler.prefix('gsdlextracted','http://greenstone.org/gsdlextracted#');


          // Exaple triple
          // "s": { "type": "uri" , "value": "http://127.0.0.1:8383/greenstone3/library/collection/eurovision/document/HASH0191e9cc7bfdf14743472257s10" } ,
          // "p": { "type": "uri" , "value": "gsdlextracted:Country" } ,
          // "o": { "type": "literal" , "value": "United Kingdom" }

          //sgvizler.containerDraw('sgvizler1-country-count');

          sgvizler2.containerDraw('sgvizler2-country-count');
                  
        }
              );
        </xsl:text>
      </script>

      <div id="sgvizler2-country-count"
           data-sgvizler-endpoint="//sowemustthink.space/greenstone3-lod3/greenstone/query"
           data-sgvizler-chart="google.visualization.BarChart"
           data-sgvizler-chart-options="title=Number of Songs from each Country|legend.position=none|height=900|chartArea.height=840|fontSize=11"
           data-sgvizler-log="2"
           style="width:900px; height:300px; margin-left: auto; margin-right: auto; overflow-y: scroll; overflow-x: hidden;">
           <xsl:attribute name="data-sgvizler-query">
         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;http://localhost:4040/greenstone/data/<xsl:value-of select="$collName"/>&gt;  {
                       ?s gsdlextracted:Country ?country
           }
         }
         GROUP BY ?country ORDER BY asc(?country)          
           </xsl:attribute>
           <xsl:text> Loading ...</xsl:text>
      </div>

     
      <p style="padding-top: 10px;">
        All the metadata in the digital library is simultaneously published an linked data, meaning it is
        possible to extract and analyze the data contained here in a variety of ways.
        To aid in such analysis we have also we have added in a data visualization layer to the
        digital library.  This is how the bar-graph below has been created, which shows how many
        times each country has competed.  We provide samples to give you an idea of the sorts of analysis
        that can be done, but—more importantly—these samples are editable so you
        are free to change them however you wish, or once you're mastered the
        query syntax, develop completely original forms of anaysis.
      </p>
      <p>
        Through our
        <a href="{$library_name}/collection/{$collName}/page/sgvizler">Vizualizer page</a>
        you'll find a sample that shows you how often different countries have won
        Eurovision, but what about who has lost the most often?  The provided
        sample dataflow visualization
        of voting patterns over the last decade makes for interesting viewing, but
          what about other time periods?
      </p>

      <div id="viz-show-more" style="margin-bottom: 10px;">     
        <p>
          We suggest starting with viewing sample visualizations to see what's possible,
          and making minor edits to that to adjust what is visualized.
          Then, if you want to start visualizing the data in a more substantially different way
          or else export the data for more detailed analysis under your own control,
          switch to the SPARQL Query Interface.  We also provide sample queries on the
          this page to help you get started.
        
        </p>
        <ul>
          <li><a href="{$library_name}/collection/{$collName}/page/sgvizler">Visualizer page</a></li>
          
          <li><a href="{$library_name}/collection/{$collName}/page/sparql">Data Export</a>
          </li>
          <!--
        This is a good place to go to see what sort of data is being stored, and we provide some sample
        queries to get you going.  But if you like to see the data presented more visually, we suggest
        you try out the

        <li><a href="{$library_name}/collection/{$collName}/page/sgvizler">SGVizler page</a></li>
-->
        </ul>

      </div>

      <gsf:script>
        $('#viz-show-more').showMore({
            minheight: 0,
        buttontxtmore:"show more ...",
        buttontxtless:"... show less"
          });
      </gsf:script>


<!--
      <p>       
        If you'd like to dig into the data behind this Digital Library collection, this can be done directly
        using the <a href="{$library_name}/collection/{$collName}/page/sparql">SPARQL Query interface</a>.
        This is a good place to go to see what sort of data is being stored, and we provide some sample
        queries to get you going.  But if you like to see the data presented more visually, we suggest
        you try out the <a href="{$library_name}/collection/{$collName}/page/sgvizler">SGVizler page</a>,
        which takes things to the next level, using pie-charts, histograms and other forms of
        visualization to present the data.      
      </p>

-->


<!--      
      <div style="padding-top: 6px;">
        So the above visualization show how many times each country has entered, over the years, but what about how
        many times countries have won?  And what about how many times countries have won per head of population?
        <ul>
          <li>
        <a href="{$library_name}/collection/{$collName}/page/sgvizler"><i>Show me more visualizations ...</i></a>
          </li>
        </ul>
      </div>
-->

      <h2 id="it-all-started-with">It All Started with a Little <strike>Sparkle</strike>SPARQL</h2>
      
      
      <div id="technicaldev-turnstyle" style="margin-top: 12px;">
        <div class="turnstyle-header" style="background-image: none; background-color: hsl(195, 47%, 35%);">
          DL Technical Development
        </div>

        <div style="display: none; padding-left: 6px; padding-top: 6px; margin-left: 2px; margin-right: 2px; border-left: white solid 1px; border-right: white solid 1px; border-bottom: white solid 1px;">
          <p>
        In terms of how this collection was developed using the
        Greenstone DL architecture, the starting point is the
        formulation of a SPARQL query to retrieve from DBpedia
        entries about all the entrants in the contest over the
        years:
        <pre style="background-color: #fff; color: #000; padding: 12px; margin-right: 6px;">
SELECT ?countries_in_esc_by_year ?country_in_year ?year as ?Year ?country as ?Country ?entrant ?entrant_label as ?Creator ?song ?song_label as ?Title ?was_derived_from as ?WikipediaURL
WHERE {
    ?countries_in_esc_by_year skos:broader dbc:Countries_in_the_Eurovision_Song_Contest_by_year.

    ?country_in_year dct:subject ?countries_in_esc_by_year.
    bind( REPLACE(str(?country_in_year), ".*(\\d{4})", "$1") as ?year).
    FILTER ( xsd:integer(?year) &lt; 2020).

    ?country_in_year dbp:country ?country.

    ?country_in_year dbp:entrant ?entrant.
    ?entrant rdfs:label ?entrant_label
      FILTER (lang(?entrant_label) = 'en').

    ?country_in_year dbp:song ?song.
    ?song rdfs:label ?song_label
      FILTER (lang(?song_label) = 'en').

    OPTIONAL {
      ?song prov:wasDerivedFrom ?was_derived_from
    }
}
ORDER BY DESC(?countries_in_esc_by_year)
        </pre>
          
          </p>
          
          <p>         
        The resulting SPARQL query result set (JSON format
        selected for output) is then ingested into a Greenstone
        DL collection, and used in a variety of ways.  For now
        an (admittedly cryptic) list of technical steps that
        were developed and/or deployed to provide the
        functionality encountered in interacting with this site.
        
        <ul>
          <li>New SPARQL plugin for <i>download_from.pl</i> developed, used in GLI to enter the above query</li>
          <li>New SPARQL <i>Document Processing</i> plugin developed</li>
          <li>Greenstone3 Apache Jena Triple Store Extension activated</li>
          <li>SGVizler used to display Google Visualizations such as the pie-chart above.</li>
          <li>Metadata in document view enhanced through Greenstone Format Statements micro-data</li>
          <li>Custom <i>interface</i> developed</li>
        </ul>
          </p>
          
          <p>
        Bullet points above to be expanded upon!
          </p>
          
          <p>
        Viewing the
        <a download="collectionConfig.xml"
               href="sites/{$site_name}/collect/{$collName}/etc/collectionConfig.xml">collection
        configuration file</a> provides a good insight into how
        all of these technical aspectcs are brought together.
          </p>
          
          <p>
        Full disclosure as to how the collection all ticks is
        provided through our Subversion repository.  Topping up
        our
        <a href="https//trac.greenstone.org/browser/main/trunk/greenstone3">Greenstone3
        code base</a> we have:
        
        <ul>
          <li>The site: <a href="https://trac.greenstone.org/browser/main/trunk/model-sites-dev/eurovision-lod">eurovision-lod</a></li>
          <li>The interface: <a href="https://trac.greenstone.org/browser/main/trunk/model-interfaces-dev/eurovision-lod">eurovision-lod</a></li>
          <li>The triplestore extension: <a href="https://trac.greenstone.org/browser/gs2-extensions/apache-jena/trunk/src">apache-jena</a></li>
        </ul>
            
          </p>
        </div>
      </div>
      
      <script>
        <xsl:text disable-output-escaping="yes">
              $(function(){
                transformToTurnstyleBlock("technicaldev");
              });
        </xsl:text>
      </script>
      
      <div id="LOD-turnstyle" style="margin-top: 12px;">
        <div class="turnstyle-header" style="background-image: none; background-color: hsl(195, 47%, 35%);">
          Linked Open Data
        </div>

        <div style="display: none; padding-left: 6px; padding-top: 6px; margin-left: 2px; margin-right: 2px; border-left: white solid 1px; border-right: white solid 1px; border-bottom: white solid 1px;">


          <h2>Eurovision LOD SPARQL Endpoints</h2>
          <p>
        The source data can be access vis the DBpedia SPARQL endpoint.  The ingested,
        data (with correction) is available through the collection's local
        SPARQL endpoint:
        <ul>
          <li>
            <a href="https://dbpedia.org/sparql/">DBpedia's SPARQL endpoint</a>
          </li>
          <li>
            <a href="{$library_name}/collection/{$collName}/page/sparql">DL's (local) SPARQL endpoint</a>
          </li>
        </ul>
          </p>
          
          <h2>Eurovision LOD Errata</h2>
          <p>
        Songs titles and Entrants (artists) that do not resolve to URIs:
        <ul>
          <li>
            <a href="sites/{$site_name}/collect/{$collName}/prepare/problem-lod-lists/dbpedia-problem-songs.html">Problem Songs (titles are string literals not IRIs)</a>
          </li>
          <li>
            <a href="sites/{$site_name}/collect/{$collName}/prepare/problem-lod-lists/dbpedia-problem-entrants.html">Problem Entrants (artists are string literals not IRIs)</a>
          </li>
          <li>
            <a href="sites/{$site_name}/collect/{$collName}/prepare/problem-lod-lists/dbpedia-problem-category-in-year.html">Problem Category pages (some countries not listed in a given year despite competing)</a>
          </li>
        </ul>
          </p>
        </div>
      </div>
      
      <script>
        <xsl:text disable-output-escaping="yes">
              $(function(){
                transformToTurnstyleBlock("LOD");
              });
        </xsl:text>
      </script>

      <div id="voting-turnstyle" style="margin-top: 12px;">
        <div class="turnstyle-header" style="background-image: none; background-color: hsl(195, 47%, 35%);">
          Voting Data
        </div>

        <div style="display: none; padding-left: 6px; padding-top: 6px; margin-left: 2px; margin-right: 2px; border-left: white solid 1px; border-right: white solid 1px; border-bottom: white solid 1px;">
          <p>
        The Voting data used in this collection is sourced from the Kaggle, which in turn
        is derived from work available through Data Graver:
        <ul>
          <li><a href="https://www.kaggle.com/datagraver/eurovision-song-contest-scores-19752019">Kaggle Eurovision Voting dataset 1975-2019</a></li>
          <li><a href="https://data.world/datagraver/eurovision-song-contest-scores-1975-2019">Data Graver</a></li>
          <li><a href="https://docs.google.com/spreadsheets/d/1veXpiF54hQGP4OVuf1xjowumIe8HUOhI/edit#gid=528591420">Google Spreadsheet (internal use only)</a></li>
          
        </ul>
          </p>
        </div>    
      </div>

      <script>
        <xsl:text disable-output-escaping="yes">
              $(function(){
                transformToTurnstyleBlock("voting");
              });
        </xsl:text>
      </script>

      
    </div>
    
  </xsl:template>
    

</xsl:stylesheet>