RESTORE_FE/js/map.js

// Raccatto i parametri dall'URL -- mi aspetto un parametro di nome 'link'!
thisUrlParams = {};
window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    thisUrlParams[key] = value;
});
console.log('URL get params: ', thisUrlParams);

// Funzioni per eseguire le queries
function prepareQueryURL(query){
    sparqlEndpoint = 'http://dev.restore.ovi.cnr.it:8890/sparql/';
    sparqlUrlParams = '?default-graph-uri=&query=' + encodeURIComponent(query) + '&output=json&callback=?';
    return sparqlEndpoint + sparqlUrlParams;
}

function doJsonQuery(query){

    queryURL = prepareQueryURL(query);

    response = $.ajax({//OGGETTO

        url: queryURL,
        dataType: "json",
        success: function (data){},
        error: function (e) {}
    });

    return response;

}

// Funzioni per raccattare + stringhificare l'output
queryStringOutput = "";
function stringifyResponse(val){
    resultArray = val['results']['bindings'];
    out = "";
    for(i = 0; i < resultArray.length; i++){
        out = out + JSON.stringify(resultArray[i])
    }
    queryStringOutput = (queryStringOutput + out).replace("}{",",");
}

prefixes = "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> \
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> \
PREFIX crm: <http://www.cidoc-crm.org/cidoc-crm/> \
PREFIX owl: <http://www.w3.org/2002/07/owl#>"

query = prefixes + " SELECT DISTINCT ?graph ?name_place ?coordinates {\
GRAPH ?graph {<" + thisUrlParams.link + "> crm:P168_place_is_defined_by ?coordinates;\
rdfs:label ?name_place .\
}\
}"

queryRiferimenti = prefixes + " SELECT DISTINCT ?references {\
<" + thisUrlParams.link + "> owl:sameAs ?references\
}"

queryToponimi = prefixes + " SELECT DISTINCT ?toponimi {\
<" + thisUrlParams.link + "> crm:P1_is_identified_by ?uri_toponym .\
?uri_toponym rdfs:label ?toponimi\
}"

queryRicezione = prefixes + " SELECT DISTINCT ?segnatura ?document_uri ?document_name ?time_span ?InfObj \
WHERE { \
<" + thisUrlParams.link + "> owl:sameAs ?place . \
?event_to crm:P26_moved_to ?place ; \
rdf:type crm:EL3_Receive_Letter ; \
rdfs:subClassOf ?event . \
?document_uri crm:P25i_moved_by ?event ; \
rdfs:label ?document_name . \
?document_uri crm:P1_is_identified_by ?uriSegnatura . \
?uriSegnatura crm:P2_has_type 'Segnatura' ; \
rdfs:label ?segnatura . \
OPTIONAL {GRAPH <http://dev.restore.ovi.cnr.it:8890/ovi/datini> {?document_uri crm:P128_carries ?InfObj . \
?InfObj rdf:type crm:E73_Information_Object} }. \
OPTIONAL {?event_to crm:P4_has_time-span ?uri_ts . \
?uri_ts rdfs:label ?time_span . } \
} "

queryInvio = prefixes + " SELECT DISTINCT ?segnatura ?document_uri ?document_name ?time_span ?InfObj \
WHERE { \
<" + thisUrlParams.link + "> owl:sameAs ?place . \
?event_to crm:P27_moved_from ?place ; \
rdf:type crm:EL2_Send_Letter ; \
rdfs:subClassOf ?event . \
?document_uri crm:P25i_moved_by ?event ; \
rdfs:label ?document_name . \
?document_uri crm:P1_is_identified_by ?uriSegnatura . \
?uriSegnatura crm:P2_has_type 'Segnatura' ; \
rdfs:label ?segnatura . \
OPTIONAL {GRAPH <http://dev.restore.ovi.cnr.it:8890/ovi/datini> {?document_uri crm:P128_carries ?InfObj . \
?InfObj rdf:type crm:E73_Information_Object} }. \
OPTIONAL {?event_to crm:P4_has_time-span ?uri_ts . \
?uri_ts rdfs:label ?time_span . } \
}"

queryCitazione = prefixes + " SELECT DISTINCT ?segnatura ?document_uri ?document_name SAMPLE(?time_span) AS ?time_span ?InfObj \
WHERE { \
<" + thisUrlParams.link + "> crm:P1_is_identified_by ?toponym . \
?InfObj crm:P67_refers_to ?toponym . \
?document_uri crm:P128_carries ?InfObj ; \
rdfs:label ?document_name . \
OPTIONAL {?document_uri crm:P1_is_identified_by ?uriSegnatura . \
?uriSegnatura crm:P2_has_type 'Segnatura' ; \
rdfs:label ?segnatura . } \
OPTIONAL {?document_uri crm:P25i_moved_by ?event . \
?event_send rdfs:subClassOf ?event ; \
rdf:type crm:EL2_Send_Letter ; \
crm:P4_has_time-span ?uri_ts . \
?uri_ts rdfs:label ?time_span . } \
} "

queryPersone = prefixes + " SELECT DISTINCT ?role ?range SAMPLE(?name) AS ?label COUNT(?range) AS ?count \
WHERE{ \
{?place owl:sameAs <" + thisUrlParams.link + "> . \
?event_to crm:P26_moved_to ?place ; \
rdf:type crm:EL3_Receive_Letter ; \
crm:P01_has_domain ?domain . \
?domain crm:P02_has_range ?range ; \
crm:P14.1_in_the_role_of ?uri_role . \
?uri_role rdfs:label ?role . \
?range rdfs:label ?lb ; \
foaf:name ?name . \
} UNION { \
?place owl:sameAs <" + thisUrlParams.link + "> . \
?event_to crm:P27_moved_from ?place ; \
rdf:type crm:EL2_Send_Letter ; \
crm:P01_has_domain ?domain . \
?domain crm:P02_has_range ?range ; \
crm:P14.1_in_the_role_of ?uri_role . \
?uri_role rdfs:label ?role . \
?range rdfs:label ?lb ; \
foaf:name ?name . \
} \
} GROUP BY ?role ?range \
ORDER BY ?label"

queryCount = prefixes + " SELECT ?place ?label COUNT(?label) AS ?Count \
WHERE{ \
?place_to owl:sameAs <" + thisUrlParams.link + "> . \
?event_to crm:P26_moved_to ?place_to ; \
rdf:type crm:EL3_Receive_Letter ; \
rdfs:subClassOf ?event . \
?event_from rdfs:subClassOf ?event ; \
rdf:type crm:EL2_Send_Letter ; \
crm:P27_moved_from ?place . \
?place rdfs:label ?label \
} \
ORDER BY DESC (?Count)"

queryCount2 = prefixes + " SELECT ?place ?label COUNT(?label) AS ?Count \
WHERE{ \
?place_from owl:sameAs <" + thisUrlParams.link + "> . \
?event_from crm:P27_moved_from ?place_from ; \
rdf:type crm:EL2_Send_Letter ; \
rdfs:subClassOf ?event . \
?event_to rdfs:subClassOf ?event ; \
rdf:type crm:EL2_Send_Letter ; \
crm:P27_moved_from ?place . \
?place rdfs:label ?label . \
} \
ORDER BY DESC (?Count) "


queryURL = prepareQueryURL(query);

queryRef = prepareQueryURL(queryRiferimenti);

queryTopo = prepareQueryURL(queryToponimi);

queryRec = prepareQueryURL(queryRicezione);

querySend = prepareQueryURL(queryInvio);

queryCit = prepareQueryURL(queryCitazione);

queryPer = prepareQueryURL(queryPersone);

queryCon1 = prepareQueryURL(queryCount);

queryCon2 = prepareQueryURL(queryCount2);


response = $.ajax({//OGGETTO

    url: queryURL,
    dataType: "json",
    success: function (data){
    	handle_data(data);
    },
    error: function (e) {}
});


response_ref = $.ajax({//OGGETTO

    url: queryRef,
    dataType: "json",
    success: function (data){
      handle_ref(data);
    },
    error: function (e) {}
});

response_top = $.ajax({//OGGETTO

    url: queryTopo,
    dataType: "json",
    success: function (data){
      handle_toponym(data);
    },
    error: function (e) {}
});

response_receive = $.ajax({//OGGETTO

    url: queryRec,
    dataType: "json",
    success: function (data){
      handle_receive(data);
    },
    error: function (e) {}
});

response_send = $.ajax({//OGGETTO

    url: querySend,
    dataType: "json",
    success: function (data){
      handle_send(data);
    },
    error: function (e) {}
});

response_cit = $.ajax({//OGGETTO

    url: queryCit,
    dataType: "json",
    success: function (data){
      handle_cit(data);
    },
    error: function (e) {}
});

response_per = $.ajax({//OGGETTO

    url: queryPer,
    dataType: "json",
    success: function (data){
      handle_persons(data);
    },
    error: function (e) {}
});

responseCountA = $.ajax({//OGGETTO

    url: queryCon1,
    dataType: "json",
    success: function (data){
      handle_count(data);
    },
    error: function (e) {}
});

responseCountP = $.ajax({//OGGETTO

    url: queryCon2,
    dataType: "json",
    success: function (data){
      handle_count2(data);
    },
    error: function (e) {}
});


function handle_data(json) {
	console.log(json);

	const locations = [];

	$.each(
			json['results']['bindings'],
			function (index, value) {
				const loc = []
				var graph = value['graph']['value'];
				var label = value['name_place']['value'];
				var coord = value['coordinates']['value'];
        var variante = "";
        var note = "";
				const coordinates = coord.split(", ");
				loc.push(label);
				loc.push(coordinates[0]);
				loc.push(coordinates[1]);
				locations.push(loc);

        if (value.hasOwnProperty('variant')) {
          variante = value['variant']['value'];
        } else {
          variante = "Nessun risultato trovato";
        }

        if (value.hasOwnProperty('notes')) {
          note = value['notes']['value'];
        } else {
          note = "Nessuna informazione trovata";
        }

        document.getElementById("grafo").innerHTML = graph;
        document.getElementById("nome_luogo").innerHTML = label;
        document.getElementById("place_name").innerHTML = label;
        document.getElementById("coords").innerHTML = coord;
        document.getElementById("note").innerHTML = note;
        document.getElementById("variants").innerHTML = variante;
        document.getElementById("nome_lu").innerHTML = label;
        document.getElementById("nome_lp").innerHTML = label;
        document.getElementById("nome_ll").innerHTML = label;
        document.getElementById("nome_lg").innerHTML = label;
				
		});

	var map = L.map('map').setView([locations[0][1], locations[0][2]], 7);
	mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';

	L.tileLayer(
	  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution: '&copy; ' + mapLink + ' Contributors',
	    maxZoom: 18,
	  }).addTo(map);

	for (var i = 0; i < locations.length; i++) {
	  marker = new L.marker([locations[i][1], locations[i][2]])
	    .bindPopup(locations[i][0])
	    .addTo(map);
	}
}


function handle_ref(json) {

  console.log(json);

  const references = [];

  var list_ref = "";

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var ref = value['references']['value'];
        references.push(ref);        
      });

  
  for (i=0; i<references.length; i++) {
      list_ref += "<a target='_blank' href='" + references[i] + "'>" + references[i] + "</a>";
  }
  
  document.getElementById("riferimenti").innerHTML = list_ref;
  
}

function handle_toponym(json) {

  console.log(json);

  const toponym = [];

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var topo = value['toponimi']['value'];
        toponym.push(" " + topo);        
      });
  
  document.getElementById("toponimi").innerHTML = toponym;

}

function handle_receive(json) {

  console.log(json);

  const received = [];

  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        uri = value['document_uri']['value'];
        title = value['document_name']['value'];
        segnatura = value['segnatura']['value'];
        var data = "";
        var InfObj = "";
        if (value.hasOwnProperty('time_span')) {
            data = value['time_span']['value'];
        }
        if (value.hasOwnProperty('InfObj')) {
            InfObj = value['InfObj']['value'];
        }
        received.push([uri, title, segnatura, data, InfObj]);    
      });

  var myArray = "";

  for (var i=0; i<received.length; i++) {
    var letter = "";
    var infObject_button = "";


    if (received[i][4] != "") {
          letter = '<div class="col-8"><p><span id="' + received[i][0] + '" class="title_doc lettera">'+ received[i][1] + '</span>';
          infObject_button  += '<button type="button" id="' + received[i][4] + 
          '" class="lettera btn btn-default" alt="lettera" ><i class="fa fa-envelope"></i><p class="btn-text">Scheda Lettera</p></button>';
    } else {
          letter = '<div class="col-8"><p><span id="' + received[i][0] + '" class="title_doc object">'+ received[i][1] + '</span>';
          infObject_button  += '<button type="button" id="' + received[i][0] + 
          '" class="object btn btn-default" alt="oggetto" title="' + received[i][1] + 
          '"><i class="fa fa-book"></i><p class="btn-text">Scheda Oggetto</p></button>';
    }

    if (received[i][2] != "") {
      letter = letter + "<br />Segnatura: " + received[i][2];
    }
    if (received[i][3] != "") {
      letter = letter + "<br />Data: " + received[i][3];
    }

    letter = letter + '</p></div>';

    myArray += '<div class="row res">'+ letter + 
        '<div class="col d-flex align-items-start justify-content-end">' + infObject_button +
        '<button type="button" id="' + received[i][0] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button>' +
        '<button type="button" id="' + received[i][0] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
        '<a href="http://dev.restore.ovi.cnr.it/lodlive/?' + received[i][0] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';

  }

  document.getElementById("n_receive").innerHTML = received.length;
  document.getElementById("object_receive").innerHTML = myArray;

  if (received.length==0) {
    var messaggio = "<p class='no-results'>Nessun risultato trovato</p>";
    document.getElementById("object_receive").innerHTML = messaggio;
  }

}


function handle_send(json) {

  console.log(json);

  const sent = [];

  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        uri = value['document_uri']['value'];
        title = value['document_name']['value'];
        segnatura = value['segnatura']['value'];
        var data = "";
        var InfObj = "";
        if (value.hasOwnProperty('time_span')) {
            data = value['time_span']['value'];
        }
        if (value.hasOwnProperty('InfObj')) {
            InfObj = value['InfObj']['value'];
        }
        sent.push([uri, title, segnatura, data, InfObj]);    
      });

  var myArray = "";

  for (var i=0; i<sent.length; i++) {
    var letter = "";
    var infObject_button = "";

    if (sent[i][4] != "") {
          letter = '<div class="col-8"><p><span id="' + sent[i][0] + '" class="title_doc lettera">'+ sent[i][1] + '</span>';
          infObject_button  += '<button type="button" id="' + sent[i][4] + 
          '" class="lettera btn btn-default" alt="lettera" ><i class="fa fa-envelope"></i><p class="btn-text">Scheda Lettera</p></button>';
    } else {
          letter = '<div class="col-8"><p><span id="' + sent[i][0] + '" class="title_doc object">'+ sent[i][1] + '</span>';
          infObject_button  += '<button type="button" id="' + sent[i][0] + 
          '" class="object btn btn-default" alt="oggetto" title="' + sent[i][1] + 
          '"><i class="fa fa-book"></i><p class="btn-text">Scheda Oggetto</p></button>';
    }

    if (sent[i][2] != "") {
      letter = letter + "<br />Segnatura: " + sent[i][2];
    }
    if (sent[i][3] != "") {
      letter = letter + "<br />Data: " + sent[i][3];
    }

    letter = letter + '</p></div>';

    myArray += '<div class="row res">'+ letter + 
        '<div class="col d-flex align-items-start justify-content-end">' + infObject_button +
        '<button type="button" id="' + sent[i][0] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button>' +
        '<button type="button" id="' + sent[i][0] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
        '<a href="http://dev.restore.ovi.cnr.it/lodlive/?' + sent[i][0] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';

  }

  document.getElementById("n_send").innerHTML = sent.length;
  document.getElementById("object_send").innerHTML = myArray;

  if (sent.length==0) {
    var messaggio = "<p class='no-results'>Nessun risultato trovato</p>";
    document.getElementById("object_send").innerHTML = messaggio;
  }

}

function handle_cit(json) {

  console.log(json);

  const citations = [];

  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        uri = value['document_uri']['value'];
        title = value['document_name']['value'];
        segnatura = value['segnatura']['value'];
        var data = "";
        var InfObj = "";
        if (value.hasOwnProperty('time_span')) {
            data = value['time_span']['value'];
        }
        if (value.hasOwnProperty('InfObj')) {
            InfObj = value['InfObj']['value'];
        }
        citations.push([uri, title, segnatura, data, InfObj]);    
      });

  var myArray = "";

  for (var i=0; i<citations.length; i++) {
    var letter = "";
    var infObject_button = "";

    if (citations[i][4] != "") {
          letter = '<div class="col-8"><p><span id="' + citations[i][0] + '" class="title_doc lettera">'+ citations[i][1] + '</span>';
          infObject_button  += '<button type="button" id="' + citations[i][4] + 
          '" class="lettera btn btn-default" alt="lettera" ><i class="fa fa-envelope"></i><p class="btn-text">Scheda Lettera</p></button>';
    } else {
          letter = '<div class="col-8"><p><span id="' + citations[i][0] + '" class="title_doc object">'+ citations[i][1] + '</span>';
          infObject_button  += '<button type="button" id="' + citations[i][0] + 
          '" class="object btn btn-default" alt="oggetto" title="' + citations[i][1] + 
          '"><i class="fa fa-book"></i><p class="btn-text">Scheda Oggetto</p></button>';
    }

    if (citations[i][2] != "") {
      letter = letter + "<br />Segnatura: " + citations[i][2];
    }
    if (citations[i][3] != "") {
      letter = letter + "<br />Data: " + citations[i][3];
    }

    letter = letter + "</p></div>";

    myArray += '<div class="row res">'+ letter + 
        '<div class="col d-flex align-items-start justify-content-end">' + infObject_button +
        '<button type="button" id="' + citations[i][0] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button>' +
        '<button type="button" id="' + citations[i][0] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
        '<a href="http://dev.restore.ovi.cnr.it/lodlive/?' + citations[i][0] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';

  }

  document.getElementById("n_cit").innerHTML = citations.length;
  document.getElementById("object_cit").innerHTML = myArray;

  if (citations.length==0) {
    var messaggio = "<p class='no-results'>Nessun risultato trovato</p>";
    document.getElementById("object_cit").innerHTML = messaggio;
  }

}


function handle_persons(json) {

  console.log(json);

  const people = [];
  const person_names = [];
  const person_events = [];
  var Person = "";

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var uri = value['range']['value'];
        var label = value['label']['value'];
        var ruolo = value['role']['value']
        var count = value['count']['value']
        var evento = ruolo + ": " + count
        person_events.push([uri, label, evento]);
        if (!person_names.includes(uri)) {
          person_names.push([uri, label]);
        }
        
      });

  for (var k=0; k<person_names.length; k++) {
    const tempArray = [];
    var uri = person_names[k][0];
    var nome = person_names[k][1]
    tempArray.push(uri);
    tempArray.push(nome);
    for (var y=0; y<person_events.length; y++) {
      var ev = person_events[y][2];
      if (person_names[k][0] == person_events[y][0]) {
        tempArray.push(ev);
      }
    }
    people.push(tempArray);
  }

  for (var i=0; i<people.length; i++) {

      var info = "";
      for (var h=2; h<people[i].length; h++) {
        info += people[i][h] + ' occorrenze<br />';
      }

      Person += '<div class="row res"><div class="col-8">' +
      '<p><span id="' + people[i][0] + '" class="title_doc persona">'+ people[i][1] + '</span><br />' + info + '</p></div>' +
      '<div class="col d-flex align-items-start justify-content-end"><button type="button" id="' + people[i][0] + '" class="persona btn btn-default" alt="persona" title="' +
      people[i][1] + '"><i class="fa fa-user"></i><p class="btn-text">Scheda Persona</p></button>' +
      '<button type="button" id="' + people[i][0] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button>' +
      /*DA QUI HYPERLINK ->*/'<button type="button" id="' + people[i][0] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
      /*DA QUI LOD ->*/'<a href="http://dev.restore.ovi.cnr.it/lodlive/?' + people[i][0] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';
  }

  document.getElementById("n_per").innerHTML = people.length;
  document.getElementById("object_per").innerHTML = Person;

  if (people.length==0) {
    var messaggio = "<p class='no-results'>Nessun risultato trovato</p>";
    document.getElementById("object_per").innerHTML = messaggio;
  }
} 

function handle_count(json) {
  console.log(json);

  const toponimi = [];

  const dataToponimi = [];

  var max = 0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        const topo = [];

        var toponimo = value['label']['value'];
        var count = value['Count']['value'];
        var temp = parseInt(count);
        toponimi.push(toponimo);
        dataToponimi.push([toponimo, count]);

        if (temp>max) {
          max = temp;
        }
        
      });

  // set the dimensions and margins of the graph
      var margin = {top: 20, right: 30, bottom: 40, left: 90},
          width = 460 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;

      // append the svg object to the body of the page
      var svg = d3.select("#my_dataviz")
        .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

      // Parse the Data
      //d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv", function(data) {
        // Add X axis
        var x = d3.scaleLinear()
          .domain([0, max])
          .range([ 0, width]);
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
          .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");

        // Y axis
        var y = d3.scaleBand()
          .range([ 0, height ])
          .domain(toponimi)
          .padding(.1);
        svg.append("g")
          .call(d3.axisLeft(y))

        //Bars
        svg.selectAll("myRect")
          .data(dataToponimi)
          .enter()
          .append("rect")
          .attr("x", x(0) )
          .attr("y", function(d) { return y(d[0]); })
          .attr("width", function(d) { return x(d[1]); })
          .attr("height", y.bandwidth() )
          .attr("fill", "#69b3a2")


  /*var texts = svg.selectAll("myRect")
    .data(dataToponimi)
    .enter()
    .append("text");

  texts.attr("x", function(d){ return d[1] / 4 - 20})
      .attr("y", function(d,i){ return 22.26*i +20})
      .attr("text-anchor", "middle")
      .attr("fill", "#fff")
      .text(function(d){ return d[1]});*/

}


function handle_count2(json) {
  console.log(json);

  const toponimi = [];

  const dataToponimi = [];

  const values = [];

  var max = 0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        const topo = [];

        var toponimo = value['label']['value'];
        var count = value['Count']['value'];
        var temp = parseInt(count);
        toponimi.push(toponimo);
        dataToponimi.push([toponimo, count]);

        if (temp>max) {
          max = temp;
        }
        
      });

  // set the dimensions and margins of the graph
      var margin = {top: 20, right: 30, bottom: 40, left: 90},
          width = 460 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;

      // append the svg object to the body of the page
      var svg = d3.select("#my_dataviz2")
        .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

      // Parse the Data
      //d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv", function(data) {
        // Add X axis
        var x = d3.scaleLinear()
          .domain([0, max])
          .range([ 0, width]);
        
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
          .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");

        // Y axis
        var y = d3.scaleBand()
          .range([ 0, height ])
          .domain(toponimi)
          .padding(.1);

        svg.append("g")
          .call(d3.axisLeft(y))

        //Bars
        svg.selectAll("myRect")
          .data(dataToponimi)
          .enter()
          .append("rect")
          .attr("x", x(0) )
          .attr("y", function(d) { return y(d[0]); })
          .attr("width", function(d) { return x(d[1]); })
          .attr("height", y.bandwidth() )
          .attr("fill", "#69b3a2")

        svg.selectAll("text2")
          .data(dataToponimi)
          .enter().append("text2")
          .text(function(d) {return d[1]})
          .attr("class", "text")
}

function open_info() {

    document.getElementById("info_luogo").style.display = "block";
    document.getElementById("place_info").style.display = "block";
    document.getElementById("topo").style.display = "none";
    document.getElementById("rif").style.display = "none";
}

function open_toponimi() {

    document.getElementById("info_luogo").style.display = "block";
    document.getElementById("place_info").style.display = "none";
    document.getElementById("topo").style.display = "block";
    document.getElementById("rif").style.display = "none";
}

function open_riferimenti() {

    document.getElementById("info_luogo").style.display = "block";
    document.getElementById("place_info").style.display = "none";
    document.getElementById("topo").style.display = "none";
    document.getElementById("rif").style.display = "block";
}

function open_collegamenti() {

    document.getElementById("references").style.display = "flex";
    document.getElementById("statistiche").style.display = "none";
    document.getElementById("regole_associazione").style.display = "none";
}

function open_statistiche() {

    document.getElementById("references").style.display = "none";
    document.getElementById("statistiche").style.display = "flex";
    document.getElementById("regole_associazione").style.display = "none";
}

function open_correlazioni() {

    document.getElementById("references").style.display = "none";
    document.getElementById("statistiche").style.display = "none";
    document.getElementById("regole_associazione").style.display = "flex";
}

/*
var header = document.getElementById("ref_buttons");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
*/

//out = "";
//for(i = 0; i < resultArray.length; i++){
 //   out = out + JSON.stringify(resultArray[i])
//}
//queryStringOutput = (queryStringOutput + out).replace("}{",",");


/*

var locations = [
  ["LOCATION_1", 11.8166, 122.0942],
  ["LOCATION_2", 11.9804, 121.9189],
  ["LOCATION_3", 10.7202, 122.5621],
  ["LOCATION_4", 11.3889, 122.6277],
  ["LOCATION_5", 10.5929, 122.6325]
];

var map = L.map('map').setView([11.206051, 122.447886], 8);
mapLink =
  '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
  }).addTo(map);

for (var i = 0; i < locations.length; i++) {
  marker = new L.marker([locations[i][1], locations[i][2]])
    .bindPopup(locations[i][0])
    .addTo(map);
}
*/

$(document).on("click", ".persona", function (ev) {

    var link = this.id;
    //alert(nome_autore);
    //$('#myModal').text("");
    window.open("Persona.html?link="+this.id);
    

  });

$(document).on("click", ".lettera", function (ev) {

  var link = this.id;
  //alert(nome_autore);
  //$('#myModal').text("");
  window.open("lettera.html?link="+this.id);
  

});

$(document).on("click", ".object", function (ev) {

  var link = this.id;
  //alert(nome_autore);
  //$('#myModal').text("");
  window.open("object.html?link="+this.id);
  

});

$(document).on("click", ".hyp", function (ev) {

  var link = this.id;
  $("#myModal").empty();
  $("#myModal").css("display", "block");
  $('#myModal').append("<div class='modal-content'><div class='modal-close'><span class='close'>&times;</span></div><div id='myInput'>" +
    link + "</div><button id='copy_btn' class='btn btn-theme-primary btn-md' onclick='myFunction()'>Copia</button>");

  

});

$(document).on("click", ".close", function (ev) {

  var link = this.id;
  //alert(nome_autore);
  //$('#myModal').text("");
  $("#myModal").css("display", "none");

});


$(document).on("click", ".back", function (ev) {

  $("#myTab").css("display", "none");

});


$(document).on("click", ".cit", function (ev) {
  
  var author ="RESTORE. smart access to digital heritage and memory"

  var year = new Date().getFullYear()

  var today = new Date();
  var dd = String(today.getDate()).padStart(2, '0');
  var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
  var yyyy = today.getFullYear();

  today = dd + '/' + mm + '/' + yyyy;

  var link = this.id;
  //alert(nome_autore);
  //$('#myModal').text("");
  $("#myModal").empty();
  $("#myModal").css("display", "block");
  $('#myModal').append("<div class='modal-content'><div class='modal-close'><span class='close'>&times;</span></div><div id='myInput'>" + 
    author + " " + year + ", accesso effettuato: " + today + ", &lt;" + link + "&gt;</div><button id='copy_btn' class='btn btn-theme-primary btn-md' onclick='myFunction()'>Copia</button>");

});


function copyToClipboard(text) {
    var sampleTextarea = document.createElement("textarea");
    document.body.appendChild(sampleTextarea);
    sampleTextarea.value = text; //save main text in it
    sampleTextarea.select(); //select textarea contenrs
    document.execCommand("copy");
    document.body.removeChild(sampleTextarea);
}

function myFunction(){
    var copy = document.getElementById("myInput");
    copyText = copy.textContent;
    copyToClipboard(copyText);

    //copyToClipboard(copyText.value);
}