Changeset 35189 for main


Ignore:
Timestamp:
2021-05-24T20:55:59+12:00 (3 years ago)
Author:
davidb
Message:

Updated to show treemap on about.xsl page

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

Legend:

Unmodified
Added
Removed

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

    r35156 r35189  
    492492}
    493493
     494// endpoint
     495var endpoint_url="//localhost:4040/greenstone/query"; // **** External IP? ****
     496//var endpoint_url="//so-we-must-think.space/greenstone3-lod3/greenstone/query";
     497
    494498function ajaxpick_random_entrant() {
    495499
    496     // endpoint
    497     var endpoint_url="//localhost:4040/greenstone/query"; // **** External IP? ****
    498     //var endpoint_url="//sowemustthink.space/greenstone3-lod3/greenstone/query";
    499500    var sparql_query = $('#select-random-entrant-sparqlquery').text();
    500501
    … …  
    511512    });
    512513}
     514
     515
     516function display_treemap_winner_2021(json_data)
     517{
     518    //console.log('display-treemap-winner-2021');
     519
     520    google.charts.load('current', {'packages':['treemap']});
     521    google.charts.setOnLoadCallback(drawChart);
     522
     523    function drawChart() {
     524
     525   
     526    var results = json_data.results.bindings;
     527
     528    var data_array = []
     529
     530    var results_len = results.length;
     531
     532    var data_header = [ "Vote from country", "To country",
     533                "Total Jury/Tele-combined Vote", "Difference in vote",
     534                "Jury Vote", "Televote"];
     535    data_array.push(data_header);
     536
     537    //console.log(results);
     538    for (var i=0; i<results_len; i++) {
     539        var result = results[i];
     540
     541        var jt_vote_from_country = result.jt_vote_from_country.value;
     542        var to_country           = (result.to_country) ? result.to_country.value : null;
     543        var total_vote_int       = parseInt((result.total_vote_int) ? result.total_vote_int.value : 0);
     544        var diff_vote_int        = parseInt((result.diff_vote_int) ? result.diff_vote_int.value : 0);
     545        var jury_vote_int        = parseInt((result.j_vote_int) ? result.j_vote_int.value : 0);
     546        var tele_vote_int        = parseInt((result.t_vote_int) ? result.t_vote_int.value : 0);
     547       
     548        var data_row = [ jt_vote_from_country, to_country,
     549                 total_vote_int, diff_vote_int,
     550                 jury_vote_int, tele_vote_int ];
     551       
     552        data_array.push(data_row);
     553    }
     554    //console.log(data_array);
     555
     556   
     557        var data = google.visualization.arrayToDataTable(data_array)
     558    var tree = new google.visualization.TreeMap(document.getElementById('treemap-voting-for-winner-2021-divchart'));
     559    tree.draw(data, {
     560        title: "Difference in Jury and Televoting for Italy, the Eurovision Song Contest Winner in 2021",
     561        height: 600,
     562        chartArea: { height: 1100},
     563        fontSize: 14,
     564        minColorValue: -12,
     565        maxColorValue: 12,
     566        minColor: "#008896",
     567        midColor: "#f7f7f7",
     568        maxColor: "#ee4000",
     569        headerHeight: 15,
     570        showScale: true,
     571            fontColor: 'black',
     572        generateTooltip: showTreemapWinner2021Tooltip
     573        });
     574
     575    function showTreemapWinner2021Tooltip(row, size, value) {
     576
     577        var from_country = data.getValue(row, 0);
     578        var to_country   = data.getValue(row, 1);
     579        var total_votes  = data.getValue(row, 2);
     580        var diff_votes   = data.getValue(row, 3);
     581        var jury_votes   = data.getValue(row, 4);
     582        var tele_votes   = data.getValue(row, 5);
     583       
     584        return '<div style="background:#fd9; padding:10px; border-style:solid;">' +
     585        '<span style="font-family:Courier"><b>Voting total from ' + from_country
     586        + ' to ' + to_country + ': ' + total_votes + '</b>'
     587        + ' (a difference of ' + diff_votes + ')<br />'
     588        + 'Tele Vote: ' + tele_votes + '<br />'
     589        + 'Jury Vote: ' + jury_votes + '<br />'
     590        + '</span></div>';
     591
     592    }
     593   
     594    }
     595}
     596
     597function ajax_display_treemap_winner_2021() {
     598
     599    var sparql_query = $('#treemap-voting-for-winner-2021-sparqlquery').text();
     600
     601    $("#select-random-entrant-div").css("cursor", "progress");
     602    $("#select-random-entrant-div a").css("cursor", "progress");
     603    $("#select-random-entrant-div button").css("cursor", "progress");
     604   
     605    $.ajax({
     606    type: "POST",
     607    url: endpoint_url,
     608    data: { query: sparql_query, output: "json" },
     609    success: display_treemap_winner_2021,
     610    dataType: "json"
     611    });
     612}

  • main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/transform/layouts/header.xsl

    r35160 r35189  
    1212
    1313  <!-- Apache Jena Fuseki v3 -->
    14   <xsl:variable name="sparqlEndpointHostAndOptPort">localhost:4040</xsl:variable> <!-- **** External IP? ****-->
    15   <xsl:variable name="sparqlGraphBasePrefix">http://localhost:8383</xsl:variable> <!-- **** External IP? ****-->
     14 
     15  <xsl:variable name="sparqlEndpointHostAndOptPort">localhost:4040</xsl:variable> < ! - - **** External IP? ****- - >
     16  <xsl:variable name="sparqlGraphBasePrefix">http://localhost:8383</xsl:variable> < ! - - **** External IP? ****- - >
    1617
     18  <xsl:variable name="sparqlEndpointPrefix1"></xsl:variable>
    1719  <xsl:variable name="sparqlEndpointPrefix3"></xsl:variable>
    18   <xsl:variable name="sparqlEndpoint3">http://localhost:4040</xsl:variable>       <!-- **** External IP ? **** -->
     20  <xsl:variable name="sparqlEndpoint3">http://localhost:4040</xsl:variable>       < ! - - **** External IP ? **** - - >
    1921
     22  <!--
     23  <xsl:variable name="sparqlEndpointHostAndOptPort">so-we-must-think.space</xsl:variable>
     24  <xsl:variable name="sparqlGraphBasePrefix">https://so-we-must-think.space</xsl:variable>
     25
     26  <xsl:variable name="sparqlEndpointPrefix3">/greenstone3-lod3</xsl:variable>
     27  <xsl:variable name="sparqlEndpointPrefix1">/greenstone3-lod</xsl:variable>
     28  <xsl:variable name="sparqlEndpoint3">https://so-we-must-think.space/greenstone3-lod3</xsl:variable>
     29  -->
     30 
    2031  <!--
    2132  <xsl:variable name="sparqlEndpointProtocol">https</xsl:variable>

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

    r35155 r35189  
    160160        </ul>       
    161161      </p>
    162 
     162     
    163163      <!-- endpoint -->
    164       <xsl:variable name="graphURI"><xsl:value-of select="$sparqlGraphBasePrefix"/><xsl:value-of select="$siteURL"/><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="$collName"/></xsl:variable>   
     164     
     165      <xsl:variable name="graphURI"><xsl:value-of select="$sparqlGraphBasePrefix"/><xsl:value-of select="$siteURL"/><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="$collName"/></xsl:variable>
     166      <!--
     167      <xsl:variable name="graphURI"><xsl:value-of select="$sparqlGraphBasePrefix"/><xsl:value-of select="$siteURL"/>eurovision-dev-library/collection/<xsl:value-of select="$collName"/></xsl:variable>   
     168      -->
    165169      <!--
    166170           Kudos to:
    … …  
    202206
    203207      <h2>Data Analysis and Visualization</h2>
     208
     209
     210      <!-- bespoke visualization done by getting SPARQL data first, and then
     211           feeding into Google Charts (Treemap) to get better control -->
     212      <div id="treemap-voting-for-winner-2021-sparqlquery" style="display: none;">
     213PREFIX rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt;
     214PREFIX xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt;
     215PREFIX gsdlextracted: &lt;http://greenstone.org/gsdlextracted#&gt;
     216
     217SELECT  (?j_country AS ?jt_vote_from_country) ?to_country ?total_vote_int ?diff_vote_int ?j_vote_int ?t_vote_int
     218WHERE {
     219{
     220  GRAPH &lt;<xsl:value-of select="$graphURI"/>&gt;  {
     221
     222  ?esc_entrant_uri gsdlextracted:Year ?year
     223      FILTER(xsd:integer(?year) = 2021).
     224
     225    ?esc_entrant_uri ?gsdlextracted_j_country_uri ?j_vote.
     226    BIND(STRENDS(str(?gsdlextracted_j_country_uri),"-J") AS ?is_j_vote).
     227    FILTER (?is_j_vote).
     228    BIND(REPLACE(str(?gsdlextracted_j_country_uri), ".*#(.*?)-J$", "$1") AS ?j_country).
     229
     230    ?esc_entrant_uri ?gsdlextracted_t_country_uri ?t_vote.
     231    BIND(STRENDS(str(?gsdlextracted_t_country_uri),"-T") AS ?is_t_vote).
     232    FILTER (?is_t_vote).
     233    BIND(REPLACE(str(?gsdlextracted_t_country_uri), ".*#(.*?)-T$", "$1") AS ?t_country).
     234
     235    FILTER(?j_country = ?t_country).
     236
     237    BIND(xsd:integer(?j_vote) AS ?j_vote_int).
     238    BIND(xsd:integer(?t_vote) AS ?t_vote_int).
     239
     240    BIND((?t_vote_int + ?j_vote_int) AS ?total_vote_int).
     241    BIND((?t_vote_int - ?j_vote_int) AS ?diff_vote_int).
     242
     243    ?esc_entrant_uri gsdlextracted:Country ?to_country.
     244
     245    FILTER(?to_country = "Italy").
     246     
     247  }
     248 }
     249 UNION {
     250  VALUES (?j_country ?to_country ?total_vote_int ?diff_vote_int ?j_vote_int ?t_vote_int ) {
     251     ( "Italy"  UNDEF 0 0 0 0 )
     252  }
     253 }
     254}
     255      </div>
     256      <style>
     257        .google-visualization-tooltip {
     258           z-index: 1000;
     259           }
     260         .goog-tooltip {
     261           z-index: 1000;
     262         }
     263      </style>
     264      <div id="treemap-voting-for-winner-2021-divchart" style="width: 900px; height: 600px; background-color: #fff; margin-left: auto; margin-right: auto; margin-bottom: 12px;">">
     265        Loading ...
     266      </div>
     267
     268      <gsf:script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"/>
     269      <gsf:script>
     270        $(document).ready(function() { ajax_display_treemap_winner_2021() });
     271      </gsf:script>
    204272     
    205273      <gsf:script src="ext/jena/sgvizler2/sgvizler2.js"/>
    206274
     275      <!--
    207276      <gsf:script>
    208277          $(document).ready(   
    … …  
    218287          );
    219288      </gsf:script>
     289      -->
    220290
    221291      <!-- endpoint -->
     292      <!--
    222293      <div id="sgvizler2-country-count"
    223294           data-sgvizler-endpoint="//{$sparqlEndpointHostAndOptPort}{$sparqlEndpointPrefix3}/greenstone/query"
    … …  
    245316           <xsl:text> Loading ...</xsl:text>
    246317      </div>
    247 
    248      
     318      -->
     319      <!--
    249320      <p style="padding-top: 10px;">
    250321        All the metadata in the digital library is simultaneously
    … …  
    257328        competed, alphabetically sorted.
    258329      </p>
     330      -->
    259331      <p>
    260         Through our:
     332        For more visualization, see our:
    261333        <ul>
    262334          <li>
    … …  
    266338      </p>
    267339      <p>
    268         we provide samples you can try out to give you an idea of
     340        where we provide samples you can try out to give you an idea of
    269341        the sorts of visualization that can be produced. More
    270342        importantly, these samples are editable so you are free to

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

    r35155 r35189  
    1313
    1414    <!-- endpoint -->
     15   
    1516    <xsl:variable name="graphURI"><xsl:value-of select="$sparqlGraphBasePrefix"/><xsl:value-of select="$siteURL"/><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="$collName"/></xsl:variable>   
    16    
     17    <!--
     18    <xsl:variable name="graphURI"><xsl:value-of select="$sparqlGraphBasePrefix"/><xsl:value-of select="$siteURL"/>eurovision-dev-library/collection/<xsl:value-of select="$collName"/></xsl:variable>       
     19    -->
    1720    <xsl:include href="dataviz/made-the-final.xsl"/>
    1821    <xsl:include href="dataviz/list-of-winners.xsl"/>

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

    r35155 r35189  
    118118
    119119      <!-- endpoint -->
     120
    120121      <xsl:variable name="graphURI"><xsl:value-of select="$sparqlGraphBasePrefix"/><xsl:value-of select="$siteURL"/><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="$collName"/></xsl:variable>
    121      
     122      <!--
     123      <xsl:variable name="graphURI"><xsl:value-of select="$sparqlGraphBasePrefix"/><xsl:value-of select="$siteURL"/>eurovision-dev-library/collection/<xsl:value-of select="$collName"/></xsl:variable>       
     124      -->
    122125      <div class="moreindent">
    123126        <!-- endpoint -->
    … …  
    157160            <option value=""></option>
    158161            <!-- endpoint -->
    159             <option value="//{$sparqlEndpointHostAndOptPort}/xml-to-html.xsl">xml-to-html</option>
    160             <option value="//{$sparqlEndpointHostAndOptPort}/xml-to-html-links.xsl" selected="selected">xml-to-html-links</option>
    161             <option value="//{$sparqlEndpointHostAndOptPort}/xml-to-html-plain.xsl">xml-to-html-plain</option>
     162            <option value="//{$sparqlEndpointHostAndOptPort}{$sparqlEndpointPrefix1}/xml-to-html.xsl">xml-to-html</option>
     163            <option value="//{$sparqlEndpointHostAndOptPort}{$sparqlEndpointPrefix1}/xml-to-html-links.xsl" selected="selected">xml-to-html-links</option>
     164            <option value="//{$sparqlEndpointHostAndOptPort}{$sparqlEndpointPrefix1}/xml-to-html-plain.xsl">xml-to-html-plain</option>
    162165          </select>
    163166        </div>
Note: See TracChangeset for help on using the changeset viewer.