|
@@ -0,0 +1,723 @@
|
|
|
+
|
|
|
+thisUrlParams = {};
|
|
|
+window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
|
|
|
+ thisUrlParams[key] = value;
|
|
|
+});
|
|
|
+console.log('URL get params: ', thisUrlParams);
|
|
|
+
|
|
|
+
|
|
|
+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({
|
|
|
+
|
|
|
+ url: queryURL,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data){},
|
|
|
+ error: function (e) {}
|
|
|
+ });
|
|
|
+
|
|
|
+ return response;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+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({
|
|
|
+
|
|
|
+ url: queryURL,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data){
|
|
|
+ handle_data(data);
|
|
|
+ },
|
|
|
+ error: function (e) {}
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+response_ref = $.ajax({
|
|
|
+
|
|
|
+ url: queryRef,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data){
|
|
|
+ handle_ref(data);
|
|
|
+ },
|
|
|
+ error: function (e) {}
|
|
|
+});
|
|
|
+
|
|
|
+response_top = $.ajax({
|
|
|
+
|
|
|
+ url: queryTopo,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data){
|
|
|
+ handle_toponym(data);
|
|
|
+ },
|
|
|
+ error: function (e) {}
|
|
|
+});
|
|
|
+
|
|
|
+response_receive = $.ajax({
|
|
|
+
|
|
|
+ url: queryRec,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data){
|
|
|
+ handle_receive(data);
|
|
|
+ },
|
|
|
+ error: function (e) {}
|
|
|
+});
|
|
|
+
|
|
|
+response_send = $.ajax({
|
|
|
+
|
|
|
+ url: querySend,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data){
|
|
|
+ handle_send(data);
|
|
|
+ },
|
|
|
+ error: function (e) {}
|
|
|
+});
|
|
|
+
|
|
|
+response_cit = $.ajax({
|
|
|
+
|
|
|
+ url: queryCit,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data){
|
|
|
+ handle_cit(data);
|
|
|
+ },
|
|
|
+ error: function (e) {}
|
|
|
+});
|
|
|
+
|
|
|
+response_per = $.ajax({
|
|
|
+
|
|
|
+ url: queryPer,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data){
|
|
|
+ handle_persons(data);
|
|
|
+ },
|
|
|
+ error: function (e) {}
|
|
|
+});
|
|
|
+
|
|
|
+responseCountA = $.ajax({
|
|
|
+
|
|
|
+ url: queryCon1,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data){
|
|
|
+ handle_count(data);
|
|
|
+ },
|
|
|
+ error: function (e) {}
|
|
|
+});
|
|
|
+
|
|
|
+responseCountP = $.ajax({
|
|
|
+
|
|
|
+ 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="http://openstreetmap.org">OpenStreetMap</a>';
|
|
|
+
|
|
|
+ L.tileLayer(
|
|
|
+ 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
+ attribution: '© ' + 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ var margin = {top: 20, right: 30, bottom: 40, left: 90},
|
|
|
+ width = 460 - margin.left - margin.right,
|
|
|
+ height = 400 - margin.top - margin.bottom;
|
|
|
+
|
|
|
+
|
|
|
+ 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 + ")");
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ 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");
|
|
|
+
|
|
|
+
|
|
|
+ var y = d3.scaleBand()
|
|
|
+ .range([ 0, height ])
|
|
|
+ .domain(toponimi)
|
|
|
+ .padding(.1);
|
|
|
+ svg.append("g")
|
|
|
+ .call(d3.axisLeft(y))
|
|
|
+
|
|
|
+
|
|
|
+ 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")
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ var margin = {top: 20, right: 30, bottom: 40, left: 90},
|
|
|
+ width = 460 - margin.left - margin.right,
|
|
|
+ height = 400 - margin.top - margin.bottom;
|
|
|
+
|
|
|
+
|
|
|
+ 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 + ")");
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ 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");
|
|
|
+
|
|
|
+
|
|
|
+ var y = d3.scaleBand()
|
|
|
+ .range([ 0, height ])
|
|
|
+ .domain(toponimi)
|
|
|
+ .padding(.1);
|
|
|
+
|
|
|
+ svg.append("g")
|
|
|
+ .call(d3.axisLeft(y))
|
|
|
+
|
|
|
+
|
|
|
+ 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";
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+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: '© ' + 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;
|
|
|
+
|
|
|
+
|
|
|
+ window.open("Persona.html?link="+this.id);
|
|
|
+
|
|
|
+
|
|
|
+ });
|