Carica file su 'js'

js/map.js

@@ -0,0 +1,723 @@
+// 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 ?object ?label {\
+<" + thisUrlParams.link + "> owl:sameAs ?place .\
+?event_to crm:P26_moved_to ?place ;\
+rdf:type crm:EL3_Receive_Letter ;\
+rdfs:subClassOf ?event .\
+?object crm:P25i_moved_by ?event ; \
+rdfs:label ?label .\
+} "
+
+queryInvio = prefixes + " SELECT DISTINCT ?object ?label {\
+<" + thisUrlParams.link + "> owl:sameAs ?place .\
+?event_to crm:P27_moved_from ?place ;\
+rdf:type crm:EL2_Send_Letter ;\
+rdfs:subClassOf ?event .\
+?object crm:P25i_moved_by ?event ; \
+rdfs:label ?label .\
+}"
+
+queryCitazione = prefixes + " SELECT DISTINCT ?object ?label\
+{<" + thisUrlParams.link + "> crm:P1_is_identified_by ?toponym .\
+?object crm:P67_refers_to ?toponym ;\
+rdfs:label ?label\
+}"
+
+queryPersone = prefixes + " SELECT DISTINCT ?range ?label \
+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 .\
+  ?range rdfs:label ?label .\
+} 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 .\
+  ?range rdfs:label ?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'];
+				const coordinates = coord.split(", ");
+				loc.push(label);
+				loc.push(coordinates[0]);
+				loc.push(coordinates[1]);
+				locations.push(loc);
+
+        document.getElementById("grafo").innerHTML = graph;
+        document.getElementById("nome_luogo").innerHTML = label;
+        document.getElementById("nome_lu").innerHTML = label;
+        document.getElementById("nome_lp").innerHTML = label;
+        document.getElementById("nome_ll").innerHTML = label;
+        document.getElementById("nome_lg").innerHTML = label;
+        document.getElementById("nome_st1").innerHTML = label;
+        document.getElementById("nome_st2").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 += "<div class='row'><div class='col'><a href='" + references[i] + "'>" + references[i] + "</a></div></div>";
+  }
+  
+  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) {
+        key = value['object']['value'];
+        data = value['label']['value'];   
+        received[key] = data;  
+        i++;   
+      });
+
+  var myArray = "";
+
+  for (var key in received) {
+    myArray += "<div class='row'><div class='col-10'>" + received[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
+  }
+
+  document.getElementById("n_receive").innerHTML = i;
+  document.getElementById("object_receive").innerHTML = myArray;
+
+  if (i==0) {
+    var messaggio = "<p>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) {
+        key = value['object']['value'];
+        data = value['label']['value'];   
+        sent[key] = data;   
+        i++;  
+      });
+
+  var myArray = "";
+
+  for (var key in sent) {
+    myArray += "<div class='row'><div class='col-10'>" + sent[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
+  }
+
+  document.getElementById("n_send").innerHTML = i;
+  document.getElementById("object_send").innerHTML = myArray;
+
+  if (i==0) {
+    var messaggio = "<p>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) {
+        key = value['object']['value'];
+        data = value['label']['value'];   
+        citations[key] = data;  
+        i++;   
+      });
+
+  var myArray = "";
+
+  for (var key in citations) {
+    myArray += "<div class='row'><div class='col-10'>" + citations[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
+  }
+
+  document.getElementById("n_cit").innerHTML = i;
+  document.getElementById("object_cit").innerHTML = myArray;
+
+  if (i==0) {
+    var messaggio = "<p>Nessun risultato trovato</p>";
+    document.getElementById("object_cit").innerHTML = messaggio;
+  }
+
+}
+
+function handle_persons(json) {
+
+  console.log(json);
+
+  const people = {};
+
+  var i=0;
+
+  $.each(
+      json['results']['bindings'],
+      function (index, value) {
+        key = value['range']['value'];
+        data = value['label']['value'];   
+        people[key] = data;  
+        i++;   
+      });
+
+  var myArray = "";
+
+  for (var key in people) {
+    myArray += "<div class='row'><div class='col-9'>" + people[key] + "</div><div class='persona col' id='" + 
+    key + "'><i class='fa fa-user'></i></div><div class='col'><a href='" + 
+    key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
+  }
+
+
+  document.getElementById("n_per").innerHTML = i;
+  document.getElementById("object_per").innerHTML = myArray;
+
+  if (i==0) {
+    var messaggio = "<p>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";
+}
+
+function open_statistiche() {
+
+    document.getElementById("references").style.display = "none";
+    document.getElementById("statistiche").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);
+    
+
+  });

js/people.js

@@ -0,0 +1,653 @@
+// 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#> \
+PREFIX schema: <http://schema.org/> \
+PREFIX foaf: <http://xmlns.com/foaf/0.1/> \
+PREFIX person: <http://www.w3.org/ns/person#>"
+
+query = prefixes + " SELECT DISTINCT ?place ?label ?coordinates \
+WHERE { \
+{?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
+?event_from crm:P01_has_domain ?pc ; \
+rdf:type crm:EL3_Receive_Letter; \
+crm:P26_moved_to ?place_from . \
+?place_from rdf:type crm:E53_Place ; \
+owl:sameAs ?place . \
+?place rdfs:label ?label ; \
+crm:P168_place_is_defined_by ?coordinates . \
+} UNION { \
+?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
+?event_from crm:P01_has_domain ?pc ; \
+rdf:type crm:EL2_Send_Letter; \
+crm:P27_moved_from ?place_from . \
+?place_from rdf:type crm:E53_Place ; \
+owl:sameAs ?place . \
+?place rdfs:label ?label ; \
+crm:P168_place_is_defined_by ?coordinates . \
+} \
+}"
+
+queryInfo = prefixes + " SELECT DISTINCT ?graph ?label ?identifier ?name ?givenName ?familyName ?gender ?Birth_Date ?Birth_Place ?Death_Date ?Death_Place ?patronymic ?occupation (group_concat(distinct ?relative1 ;separator=', ') as ?relatives) ?qualification ?group \
+WHERE { \
+VALUES ?uri {<" + thisUrlParams.link + ">} \
+GRAPH ?graph {?uri rdfs:label ?label} \
+?uri foaf:name ?name . \
+OPTIONAL {?uri crm:P1_is_identified_by ?id . \
+?id rdfs:label ?identifier } \
+OPTIONAL {?uri foaf:givenName ?givenName} \
+OPTIONAL {?uri foaf:familyName ?familyName} \
+OPTIONAL {?uri foaf:gender ?gender} \
+OPTIONAL {?uri person:patronymicName ?patronymic } \
+OPTIONAL {?uri schema:hasOccupation ?uriOccupation . \
+?uriOccupation rdf:type schema:Occupation; \
+rdfs:label ?occupation } \
+OPTIONAL {?uri schema:honorificPrefix ?qualification} \
+OPTIONAL {?uri schema:relatedTo ?uriRel1 . \
+?uriRel1 rdfs:label ?relative1} \
+OPTIONAL {?uri crm:P100i_died_in ?Death . \
+?Death crm:P4_has_time-span ?Death_TS; \
+crm:P7_took_place_at ?Place_D .\
+?Death_TS rdfs:label ?Death_Date . \
+?Place_D rdfs:label ?Death_Place } \
+OPTIONAL {?uri crm:P98i_was_born ?Birth . \
+?Birth crm:P4_has_time-span ?Birth_TS; \
+crm:P7_took_place_at ?Place_B . \
+?Birth_TS rdfs:label ?Birth_Date . \
+?Place_B rdfs:label ?Birth_Place } \
+OPTIONAL {?uri crm:P107i_is_current_or_former_member_of ?uriGroup . \
+?uriGroup rdfs:label ?group } \
+} \
+GROUP BY ?graph ?label ?identifier ?name ?givenName ?familyName ?gender ?Birth_Date ?Birth_Place ?Death_Date ?Death_Place ?patronymic ?occupation ?qualification ?group "
+
+queryLetters = prefixes + " SELECT DISTINCT ?type ?document_uri ?document_name \
+WHERE {?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
+?ev_send crm:P01_has_domain ?pc ; \
+rdfs:label ?type ; \
+rdfs:subClassOf ?event . \
+?document_uri crm:P25i_moved_by ?event ; \
+rdfs:label ?document_name . \
+}"
+
+queryNetwork = prefixes + " SELECT DISTINCT ?uri ?label ?uri2 ?label2 \
+WHERE { \
+{?event rdf:type crm:EL1_Exchange_Letters . \
+?event_to rdfs:subClassOf ?event; \
+rdf:type crm:EL2_Send_Letter ; \
+crm:P01_has_domain ?pc_to . \
+?pc_to crm:P02_has_range ?uri . \
+?uri rdfs:label ?label . \
+?event_from rdfs:subClassOf ?event; \
+rdf:type crm:EL3_Receive_Letter; \
+crm:P01_has_domain ?pc_from . \
+?pc_from crm:P02_has_range ?uri2 . \
+?uri2 rdfs:label ?label2 . \
+FILTER (?uri = <" + thisUrlParams.link + ">) \
+} UNION { \
+?event rdf:type crm:EL1_Exchange_Letters . \
+?event_to rdfs:subClassOf ?event; \
+rdf:type crm:EL3_Receive_Letter ; \
+crm:P01_has_domain ?pc_from . \
+?pc_from crm:P02_has_range ?uri . \
+?uri rdfs:label ?label . \
+?event_from rdfs:subClassOf ?event; \
+rdf:type crm:EL2_Send_Letter; \
+crm:P01_has_domain ?pc_to . \
+?pc_to crm:P02_has_range ?uri2 . \
+?uri2 rdfs:label ?label2 . \
+FILTER (?uri = <" + thisUrlParams.link + ">) \
+} \
+} LIMIT 30"
+
+queryURL = prepareQueryURL(query);
+
+queryNet = prepareQueryURL(queryNetwork);
+
+query = prepareQueryURL(queryInfo);
+
+queryEx = prepareQueryURL(queryLetters);
+
+response = $.ajax({
+
+    url: query,
+    dataType: "json",
+    success: function (data){
+      handle_data(data);
+    },
+    error: function (e) {}
+});
+
+response = $.ajax({
+
+    url: queryURL,
+    dataType: "json",
+    success: function (data){
+    	handle_map(data);
+    },
+    error: function (e) {}
+});
+
+responseNet = $.ajax({
+
+    url: queryNet,
+    dataType: "json",
+    success: function (data){
+      handle_network(data);
+    },
+    error: function (e) {}
+});
+
+responseLet = $.ajax({
+
+    url: queryEx,
+    dataType: "json",
+    success: function (data){
+      handle_Letters(data);
+    },
+    error: function (e) {}
+});
+
+
+
+function handle_data(json) {
+
+  console.log(json['results']['bindings']);
+
+  var graph = "";
+  var label = "";
+
+  if ("givenName" in json.results.bindings) {
+          givenName = value['givenName']['value'];
+          alert(givenName);
+        }
+
+
+  $.each(
+      json['results']['bindings'],
+      function (index, value) {
+        var graph = value['graph']['value'];
+        var label = value['label']['value'];
+        var name = value['name']['value'];
+        var givenName = "";
+        var familyName = "";
+        var gender = "";
+        var patronymic = "";
+        var occupation = "";
+        var relative = "";
+        var identifier = "";
+        var birth_date = "";
+        var birth_place = "";
+        var death_date = "";
+        var death_place = "";
+        var qualification = "";
+        var group = "";
+
+        if (value.hasOwnProperty('givenName')) {
+          $("#givenName").css("display", "flex");
+          givenName = value['givenName']['value'];
+        }
+        if (value.hasOwnProperty('familyName')) {
+          $("#familyName").css("display", "flex");
+          familyName = value['familyName']['value'];
+        }
+        if (value.hasOwnProperty('gender')) {
+          $("#gender").css("display", "flex");
+          gender = value['gender']['value'];
+        }
+        if (value.hasOwnProperty('patronymic')) {
+          $("#patronymic").css("display", "flex");
+          patronymic = value['patronymic']['value'];
+        }
+        if (value.hasOwnProperty('occupation')) {
+          $("#occupation").css("display", "flex");
+          occupation = value['occupation']['value'];
+        }
+        if (value.hasOwnProperty('relatives')) {
+          if (value['relatives']['value'] != "") {
+            $("#relatives").css("display", "flex");
+            relative = value['relatives']['value'];
+          }
+        }
+        if (value.hasOwnProperty('qualification')) {
+          $("#honorific").css("display", "flex");
+          qualification = value['qualification']['value'];
+        }
+        if (value.hasOwnProperty('Birth_Date')) {
+          $("#BirthDate").css("display", "flex");
+          birth_date = value['Birth_Date']['value'];
+        }
+        if (value.hasOwnProperty('Birth_Place')) {
+          $("#BirthPlace").css("display", "flex");
+          birth_place = value['Birth_Place']['value'];
+        }
+        if (value.hasOwnProperty('Death_Date')) {
+          $("#DeathDate").css("display", "flex");
+          death_date = value['Death_Date']['value'];
+        }
+        if (value.hasOwnProperty('Death_Place')) {
+          $("#DeathPlace").css("display", "flex");
+          death_place = value['Death_Place']['value'];
+        }
+        if (value.hasOwnProperty('group')) {
+          $("#groups").css("display", "flex");
+          group = value['group']['value'];
+        }
+
+
+        document.getElementById("grafo").innerHTML = graph;
+        document.getElementById("nome_persona").innerHTML = label;
+        document.getElementById("nome").innerHTML = name;
+        document.getElementById("genere").innerHTML = gender;
+        document.getElementById("nome_proprio").innerHTML = givenName;
+        document.getElementById("nome_famiglia").innerHTML = familyName;
+        document.getElementById("patronimico").innerHTML = patronymic;
+        document.getElementById("avi").innerHTML = relative;
+        document.getElementById("qualifica").innerHTML = qualification;
+        document.getElementById("occupazione").innerHTML = occupation;
+        document.getElementById("data_nascita").innerHTML = birth_date;
+        document.getElementById("data_morte").innerHTML = death_date;
+        document.getElementById("luogo_nascita").innerHTML = birth_place;
+        document.getElementById("luogo_morte").innerHTML = death_place;
+        document.getElementById("gruppi_appartenenza").innerHTML = group;
+
+
+        document.getElementById("nome1").innerHTML = label;
+        document.getElementById("nome2").innerHTML = label;
+        document.getElementById("nome_au").innerHTML = label;
+        document.getElementById("nome_ap").innerHTML = label;
+        document.getElementById("nome_al").innerHTML = label;
+        
+      });
+  
+}
+
+
+function handle_Letters(json) {
+
+  console.log(json);
+
+  const send = {};
+  const receive = {};
+
+  var i=0;
+  var j=0;
+
+  $.each(
+      json['results']['bindings'],
+      function (index, value) {
+        type = value['type']['value'];
+        uri = value['document_uri']['value'];
+        title = value['document_name']['value'];
+        if (type == "Invio") {
+          send[uri] = title;
+          i++;
+        } else {
+          receive[uri] = title;
+          j++;
+        }   
+      });
+
+  var Send_Letters = "";
+  var Receive_Letters = "";
+
+  for (var key in send) {
+    Send_Letters += "<div class='row'><div class='col-10'>" + send[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
+  }
+
+  for (var key in receive) {
+    Receive_Letters += "<div class='row'><div class='col-10'>" + receive[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
+  }
+
+  document.getElementById("l_send").innerHTML = i;
+  document.getElementById("l_receive").innerHTML = j;
+  document.getElementById("letters_send").innerHTML = Send_Letters;
+  document.getElementById("letters_receive").innerHTML = Receive_Letters;
+
+  if (i==0) {
+    var messaggio = "<p>Nessun risultato trovato</p>";
+    document.getElementById("letters_send").innerHTML = messaggio;
+  }
+
+  if (j==0) {
+    var messaggio = "<p>Nessun risultato trovato</p>";
+    document.getElementById("letters_receive").innerHTML = messaggio;
+  }
+
+}
+
+
+function handle_map(json) {
+  console.log(json);
+
+  const locations = [];
+  const place_names = [];
+
+  var lat = 0;
+  var long = 0;
+  var i=0;
+  var myPlaces = "";
+
+  $.each(
+      json['results']['bindings'],
+      function (index, value) {
+        const loc = []
+        var uri = value['place']['value'];
+        var label = value['label']['value'];
+        var coord = value['coordinates']['value'];
+        const coordinates = coord.split(", ");
+        loc.push(label);
+        myPlaces += "<div class='row'><div class='clickPlace col-10' data-point='"+ coordinates + "'>" + label + "</div><div class='luogo col' id='" + 
+    uri + "'><i class='far fa-map' style='cursor:pointer'></i></div></div>";
+        loc.push(coordinates[0]);
+        lat += parseInt(coordinates[0]);
+        loc.push(coordinates[1]);
+        long += parseInt(coordinates[1].replace(/^(\.)/,"0.").replace("-.", "-0."));
+        locations.push(loc);
+        i++;
+        
+      });
+
+  var latitude = lat/i;
+  var longitude = long/i;
+
+  document.getElementById("list_places_person").innerHTML = myPlaces;
+
+
+  var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+        cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade, Points &copy 2012 LINZ',
+        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 17, attribution: cloudmadeAttribution}),
+        latlng = new L.LatLng(latitude, longitude);
+
+    
+  var map = new L.Map('map', {center: latlng, zoom: 5, layers: [cloudmade]});
+  mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
+
+  var markers = new L.MarkerClusterGroup();
+  var markerList = [];
+
+  var geo = new L.tileLayer(
+    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; ' + mapLink + ' Contributors',
+      maxZoom: 18,
+    }).addTo(map);
+
+  function populate() {
+    for (var i = 0; i < locations.length; i++) {
+      var a = locations[i];
+      var title = a[0];
+      var marker = new L.Marker(new L.LatLng(a[1], a[2]), { title: title });
+      marker.bindPopup(title);
+      markers.addLayer(marker);
+      markerList.push(marker);
+    }
+  }
+
+  populate();
+
+  map.addLayer(markers);
+
+  $('.clickPlace').on('click', function(){
+    // parse lat and lng from the divs data attribute
+    var latlng = $(this).data().point.split(',');
+    var lat = latlng[0];
+    var lng = latlng[1];
+    var zoom = 10;
+
+    // set the view
+    map.setView([lat, lng], zoom);
+});
+}
+
+
+//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);
+}
+*/
+
+function handle_network(json) {
+  console.log(json);
+
+  const  myArray = {};
+  const  myLinks = [];
+  var listNodes = "";
+  var listLinks = "";
+  var ArrayNames = "";
+
+  var max = 0;
+
+  $.each(
+      json['results']['bindings'],
+      function (index, value) {
+        const topo = [];
+
+        var id = value['uri']['value'];
+        var name = value['label']['value'];
+        var id2 = value['uri2']['value'];
+        var name2 = value['label2']['value'];
+        ArrayNames += "<div class='row'><div class='col-9'>" + 
+        name2 + "</div><div class='col'><a target='_blank' href='" + 
+        id2 + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div><div class='persona col' id='" + 
+        id2 + "'><i class='fa fa-user' style='cursor:pointer'></i></div></div></div>";
+        myArray[id] = name;
+        myArray[id2] = name2;
+        myLinks.push([id, id2]);
+        
+      });
+
+  document.getElementById("list_person_network").innerHTML = ArrayNames;
+
+  for (var key in myArray) {
+      listNodes += '{ "id": \"' + key + '\", "name": \"' + myArray[key] + '\"},';
+  }
+
+  for (var i in myLinks) {
+    var source = myLinks[i][0]
+    var target = myLinks[i][1]
+    listLinks += '{ "source": \"' + source + '\", "target": \"' + target + '\"},';
+  }
+
+  console.log(myLinks);
+
+  let listN = ('[' + listNodes + ']').replace(',]', ']');
+  let listL = ('[' + listLinks + ']').replace(',]', ']');
+
+
+  const nodes = JSON.parse(listN);
+  const links = JSON.parse(listL);
+
+  console.log(nodes);
+  console.log(links);
+
+
+  var svg = d3.select("svg"),
+      width = +svg.attr("width"),
+      height = +svg.attr("height");
+
+  var simulation = d3.forceSimulation()
+      .force("link", d3.forceLink().id(function(d) { return d.id; }))
+      //.force("charge", d3.forceManyBody().strength(-200))
+      .force('charge', d3.forceManyBody()
+        .strength(-500)
+        .theta(0.8)
+        .distanceMax(300)
+      )
+  //    .force('collide', d3.forceCollide()
+  //       .radius(d => 40)
+  //       .iterations(2)
+  //     )
+      .force("center", d3.forceCenter(width / 4, height / 3));
+
+  
+  links.forEach(function(d){
+//     d.source = d.source_id;    
+//     d.target = d.target_id;
+  });           
+
+  var link = svg.append("g")
+                .style("stroke", "#aaa")
+                .selectAll("line")
+                .data(links)
+                .enter().append("line");
+
+  var node = svg.append("g")
+            .attr("class", "nodes")
+  .selectAll("circle")
+            .data(nodes)
+  .enter().append("circle")
+          .attr("r", 2)
+          .attr("id", function (d) { return d.id; })
+          .call(d3.drag()
+              .on("start", dragstarted)
+              .on("drag", dragged)
+              .on("end", dragended));
+  
+  var label = svg.append("g")
+      .attr("class", "labels")
+      .selectAll("text")
+      .data(nodes)
+      .enter().append("text")
+        .attr("class", "label")
+        .call(d3.drag()
+              .on("start", dragstarted)
+              .on("drag", dragged)
+              .on("end", dragended))
+        .text(function(d) { return d.name; });
+
+  simulation
+      .nodes(nodes)
+      .on("tick", ticked);
+
+  simulation.force("link")
+      .links(links);
+
+  function ticked() {
+    link
+        .attr("x1", function(d) { return d.source.x; })
+        .attr("y1", function(d) { return d.source.y; })
+        .attr("x2", function(d) { return d.target.x; })
+        .attr("y2", function(d) { return d.target.y; });
+
+    node
+         .attr("r", 5)
+         .style("fill", "#efefef")
+         .style("stroke", "#424242")
+         .style("stroke-width", "1px")
+         .attr("cx", function (d) { return d.x+5; })
+         .attr("cy", function(d) { return d.y-3; });
+    
+    label
+        .attr("x", function(d) { return d.x+12; })
+            .attr("y", function (d) { return d.y+1; })
+            .style("font-size", "10px").style("fill", "#333");
+
+  }
+
+  function dragstarted(d) {
+    if (!d3.event.active) simulation.alphaTarget(0.3).restart()
+    d.fx = d.x
+    d.fy = d.y
+  //  simulation.fix(d);
+  }
+
+  function dragged(d) {
+    d.fx = d3.event.x
+    d.fy = d3.event.y
+  //  simulation.fix(d, d3.event.x, d3.event.y);
+  }
+
+  function dragended(d) {
+    d.fx = d3.event.x
+    d.fy = d3.event.y
+    if (!d3.event.active) simulation.alphaTarget(0);
+    //simulation.unfix(d);
+  }
+}
+
+$(document).on("click", ".luogo", function (ev) {
+
+    var link = this.id;
+    //alert(nome_autore);
+    //$('#myModal').text("");
+    window.open("Luogo.html?link="+this.id);
+    
+
+  });
+
+$(document).on("click", ".persona", function (ev) {
+
+    var link = this.id;
+    //alert(nome_autore);
+    //$('#myModal').text("");
+    window.open("Persona.html?link="+this.id);
+    
+
+  });