|
|
@ -1,224 +1,244 @@ |
|
|
|
var width = 700, |
|
|
|
height = 350 |
|
|
|
height = 350 |
|
|
|
|
|
|
|
var svg = d3.select(".map_area").append("svg") |
|
|
|
.attr("width", width) |
|
|
|
.attr("height", height) |
|
|
|
.attr("viewBox", `${-width/1.7} ${-height/1.6} ${width*2.3} ${height*2.2}`); |
|
|
|
.attr("width", width) |
|
|
|
.attr("height", height) |
|
|
|
.attr("viewBox", `${-width/1.7} ${-height/1.6} ${width*2.3} ${height*2.2}`); |
|
|
|
|
|
|
|
var force = d3.layout.force() |
|
|
|
.gravity(0.009) |
|
|
|
.distance(500) |
|
|
|
.charge(-30) |
|
|
|
.size([width, height]); |
|
|
|
.gravity(0.009) |
|
|
|
.distance(500) |
|
|
|
.charge(-30) |
|
|
|
.size([width, height]); |
|
|
|
|
|
|
|
|
|
|
|
d3.json("/static/js/group1.json", function(error, json) { |
|
|
|
if (error) throw error; |
|
|
|
|
|
|
|
force |
|
|
|
.nodes(json.nodes) |
|
|
|
.links(json.links) |
|
|
|
.start(); |
|
|
|
.nodes(json.nodes) |
|
|
|
.links(json.links) |
|
|
|
.start(); |
|
|
|
|
|
|
|
var link = svg.selectAll(".link") |
|
|
|
.data(json.links) |
|
|
|
.data(json.links) |
|
|
|
.enter().append("line") |
|
|
|
.attr("class", "link"); |
|
|
|
.attr("class", "link"); |
|
|
|
|
|
|
|
|
|
|
|
var node = svg.selectAll(".node") |
|
|
|
.data(json.nodes) |
|
|
|
.enter().append("g") |
|
|
|
.attr("class", function(d){return "node group" + d.group}) |
|
|
|
.attr("id", function(d){return d.id}); |
|
|
|
|
|
|
|
node.append("image") |
|
|
|
// .attr("xlink:href", "/static/images/squig2.png")
|
|
|
|
.attr("xlink:href", "/static/images/circleB.png") |
|
|
|
.attr("x", -8) |
|
|
|
.attr("y", -8) |
|
|
|
.attr("width", 16) |
|
|
|
.attr("height", 16); |
|
|
|
|
|
|
|
node.append("text") |
|
|
|
// .attr("xlink:href", "#")
|
|
|
|
.attr("dx", 12) |
|
|
|
.attr("dy", ".35em") |
|
|
|
.text(function(d) { return d.name }); |
|
|
|
|
|
|
|
|
|
|
|
var divVideo = d3.select("body").append("div").style("opacity", 1); |
|
|
|
var divBio = d3.select("body").append("div").style("opacity", 1); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
node.on({ |
|
|
|
"mouseover": function(d) { |
|
|
|
d3.select(this).style("cursor", "pointer"); |
|
|
|
}}) |
|
|
|
.on("click", function(i){ |
|
|
|
// popup video
|
|
|
|
divVideo.transition().duration(100); |
|
|
|
divVideo.html("<div id='showvideo'><span onclick=this.parentElement.style.display='none';pauseAllVideos("+i.id+"); class='topleft'> × </span><iframe id='video"+i.id+"' width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>"); |
|
|
|
divBio.transition().duration(100); |
|
|
|
divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> × </span><div id='bio"+i.id+"'>"+i.bio+"</div>"); |
|
|
|
// draggable
|
|
|
|
|
|
|
|
|
|
|
|
// div.on(".drag", null);
|
|
|
|
// span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>×</span>");
|
|
|
|
// rest pop up
|
|
|
|
popup(i.id,i.time); |
|
|
|
}) |
|
|
|
.on("dblclick",connectedNodes) |
|
|
|
.call(force.drag); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
force.on("tick", function() { |
|
|
|
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; }); |
|
|
|
.data(json.nodes) |
|
|
|
.enter().append("g") |
|
|
|
.attr("class", function(d) { |
|
|
|
return "node group" + d.group |
|
|
|
}) |
|
|
|
.attr("id", function(d) { |
|
|
|
return d.id |
|
|
|
}); |
|
|
|
|
|
|
|
node.append("image") |
|
|
|
// .attr("xlink:href", "/static/images/squig2.png")
|
|
|
|
.attr("xlink:href", "/static/images/circleB.png") |
|
|
|
.attr("x", -8) |
|
|
|
.attr("y", -8) |
|
|
|
.attr("width", 16) |
|
|
|
.attr("height", 16); |
|
|
|
|
|
|
|
node.append("text") |
|
|
|
// .attr("xlink:href", "#")
|
|
|
|
.attr("dx", 12) |
|
|
|
.attr("dy", ".35em") |
|
|
|
.text(function(d) { |
|
|
|
return d.name |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
var divVideo = d3.select("body").append("div").style("opacity", 1); |
|
|
|
var divBio = d3.select("body").append("div").style("opacity", 1); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
node.on({ |
|
|
|
"mouseover": function(d) { |
|
|
|
d3.select(this).style("cursor", "pointer"); |
|
|
|
} |
|
|
|
}) |
|
|
|
.on("click", function(i) { |
|
|
|
// popup video
|
|
|
|
if (i.url) { |
|
|
|
divVideo.transition().duration(100); |
|
|
|
divVideo.html("<div id='showvideo'><span onclick=this.parentElement.style.display='none';pauseAllVideos(" + i.id + "); class='topleft'> × </span><iframe id='video" + i.id + "' width='300' height='150' src='" + i.url + "' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>"); |
|
|
|
} |
|
|
|
divBio.transition().duration(100); |
|
|
|
divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> × </span><div id='bio" + i.id + "'>" + i.bio + "</div>"); |
|
|
|
// draggable
|
|
|
|
|
|
|
|
|
|
|
|
// div.on(".drag", null);
|
|
|
|
// span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>×</span>");
|
|
|
|
// rest pop up
|
|
|
|
popup(i.id, i.time); |
|
|
|
}) |
|
|
|
.on("dblclick", connectedNodes) |
|
|
|
.call(force.drag); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
force.on("tick", function() { |
|
|
|
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); |
|
|
|
node.attr("transform", function(d) { |
|
|
|
return "translate(" + d.x + "," + d.y + ")"; |
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// under construction
|
|
|
|
// under construction
|
|
|
|
// d3.select("body").on("click",function(i){
|
|
|
|
// stop(i.id);
|
|
|
|
// });
|
|
|
|
|
|
|
|
// highlight NodeLists//Toggle stores whether the highlighting is on
|
|
|
|
var toggle = 0; |
|
|
|
//Create an array logging what is connected to what
|
|
|
|
var linkedByIndex = {}; |
|
|
|
for (i = 0; i < json.nodes.length; i++) { |
|
|
|
// highlight NodeLists//Toggle stores whether the highlighting is on
|
|
|
|
var toggle = 0; |
|
|
|
//Create an array logging what is connected to what
|
|
|
|
var linkedByIndex = {}; |
|
|
|
for (i = 0; i < json.nodes.length; i++) { |
|
|
|
linkedByIndex[i + "," + i] = 1; |
|
|
|
}; |
|
|
|
json.links.forEach(function (d) { |
|
|
|
}; |
|
|
|
json.links.forEach(function(d) { |
|
|
|
linkedByIndex[d.source.index + "," + d.target.index] = 1; |
|
|
|
}); |
|
|
|
//This function looks up whether a pair are neighbours
|
|
|
|
function neighboring(a, b) { |
|
|
|
}); |
|
|
|
//This function looks up whether a pair are neighbours
|
|
|
|
function neighboring(a, b) { |
|
|
|
return linkedByIndex[a.index + "," + b.index]; |
|
|
|
} |
|
|
|
function connectedNodes() { |
|
|
|
} |
|
|
|
|
|
|
|
function connectedNodes() { |
|
|
|
if (toggle == 0) { |
|
|
|
//Reduce the opacity of all but the neighbouring nodes
|
|
|
|
d = d3.select(this).node().__data__; |
|
|
|
node.style("opacity", function (o) { |
|
|
|
return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1; |
|
|
|
}); |
|
|
|
link.style("opacity", function (o) { |
|
|
|
return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1; |
|
|
|
}); |
|
|
|
//Reduce the op
|
|
|
|
toggle = 1; |
|
|
|
//Reduce the opacity of all but the neighbouring nodes
|
|
|
|
d = d3.select(this).node().__data__; |
|
|
|
node.style("opacity", function(o) { |
|
|
|
return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1; |
|
|
|
}); |
|
|
|
link.style("opacity", function(o) { |
|
|
|
return d.index == o.source.index | d.index == o.target.index ? 1 : 0.1; |
|
|
|
}); |
|
|
|
//Reduce the op
|
|
|
|
toggle = 1; |
|
|
|
} else { |
|
|
|
//Put them back to opacity=1
|
|
|
|
node.style("opacity", 1); |
|
|
|
link.style("opacity", 1); |
|
|
|
toggle = 0; |
|
|
|
//Put them back to opacity=1
|
|
|
|
node.style("opacity", 1); |
|
|
|
link.style("opacity", 1); |
|
|
|
toggle = 0; |
|
|
|
} |
|
|
|
} |
|
|
|
//end highlight nodes
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// no overlapping
|
|
|
|
|
|
|
|
//var padding = 10, // separation between circles
|
|
|
|
// radius=8;
|
|
|
|
//function collide(alpha) {
|
|
|
|
// var quadtree = d3.geom.quadtree(<.nodes);
|
|
|
|
// return function(d) {
|
|
|
|
// var rb = 2*radius + padding,
|
|
|
|
// nx1 = d.x - rb,
|
|
|
|
// nx2 = d.x + rb,
|
|
|
|
// ny1 = d.y - rb,
|
|
|
|
// ny2 = d.y + rb;
|
|
|
|
// quadtree.visit(function(quad, x1, y1, x2, y2) {
|
|
|
|
// if (quad.point && (quad.point !== d)) {
|
|
|
|
// var x = d.x - quad.point.x,
|
|
|
|
// y = d.y - quad.point.y,
|
|
|
|
// l = Math.sqrt(x * x + y * y);
|
|
|
|
// if (l < rb) {
|
|
|
|
// l = (l - rb) / l * alpha;
|
|
|
|
// d.x -= x *= l;
|
|
|
|
// d.y -= y *= l;
|
|
|
|
// quad.point.x += x;
|
|
|
|
// quad.point.y += y;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
|
|
|
|
// });
|
|
|
|
// };
|
|
|
|
//}
|
|
|
|
|
|
|
|
// scripts for mouse events
|
|
|
|
// var stopVideo = function (name) {
|
|
|
|
// function stopVideo(name) {
|
|
|
|
// var iframe = document.querySelector( 'iframe');
|
|
|
|
// var video = document.getElementById( "#video"+name );
|
|
|
|
// if ( iframe !== null ) {
|
|
|
|
// var iframeSrc = iframe.src;
|
|
|
|
// iframe.src = iframeSrc;
|
|
|
|
// }
|
|
|
|
// if ( video !== null ) {
|
|
|
|
// video.pause();
|
|
|
|
// }
|
|
|
|
// };
|
|
|
|
} |
|
|
|
//end highlight nodes
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// no overlapping
|
|
|
|
|
|
|
|
//var padding = 10, // separation between circles
|
|
|
|
// radius=8;
|
|
|
|
//function collide(alpha) {
|
|
|
|
// var quadtree = d3.geom.quadtree(<.nodes);
|
|
|
|
// return function(d) {
|
|
|
|
// var rb = 2*radius + padding,
|
|
|
|
// nx1 = d.x - rb,
|
|
|
|
// nx2 = d.x + rb,
|
|
|
|
// ny1 = d.y - rb,
|
|
|
|
// ny2 = d.y + rb;
|
|
|
|
// quadtree.visit(function(quad, x1, y1, x2, y2) {
|
|
|
|
// if (quad.point && (quad.point !== d)) {
|
|
|
|
// var x = d.x - quad.point.x,
|
|
|
|
// y = d.y - quad.point.y,
|
|
|
|
// l = Math.sqrt(x * x + y * y);
|
|
|
|
// if (l < rb) {
|
|
|
|
// l = (l - rb) / l * alpha;
|
|
|
|
// d.x -= x *= l;
|
|
|
|
// d.y -= y *= l;
|
|
|
|
// quad.point.x += x;
|
|
|
|
// quad.point.y += y;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
|
|
|
|
// });
|
|
|
|
// };
|
|
|
|
//}
|
|
|
|
|
|
|
|
// scripts for mouse events
|
|
|
|
// var stopVideo = function (name) {
|
|
|
|
// function stopVideo(name) {
|
|
|
|
// var iframe = document.querySelector( 'iframe');
|
|
|
|
// var video = document.getElementById( "#video"+name );
|
|
|
|
// if ( iframe !== null ) {
|
|
|
|
// var iframeSrc = iframe.src;
|
|
|
|
// iframe.src = iframeSrc;
|
|
|
|
// }
|
|
|
|
// if ( video !== null ) {
|
|
|
|
// video.pause();
|
|
|
|
// }
|
|
|
|
// };
|
|
|
|
|
|
|
|
// $(function (){
|
|
|
|
// $('.topleft').click(function(){
|
|
|
|
// $('iframe').attr('src', $('iframe').attr('src'));
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
// function pauseAllVideos(name)
|
|
|
|
// {
|
|
|
|
// $("#video"+name).each(function(){
|
|
|
|
// this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
|
|
|
|
function pauseAllVideos(name) { |
|
|
|
$("video" + name).each(function() { |
|
|
|
$(this).stopVideo(); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
// $(function (){
|
|
|
|
// $('.topleft').click(function(){
|
|
|
|
// $('iframe').attr('src', $('iframe').attr('src'));
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
|
|
|
|
function popup(name, time) { |
|
|
|
$("#show" + name).fadeIn() |
|
|
|
console.log("around") |
|
|
|
$("#thesis").fadeIn() |
|
|
|
$("#thesisX").fadeIn() |
|
|
|
$("#bio" + name).fadeIn() |
|
|
|
var dada = document.getElementById("text" + name); |
|
|
|
dada.className += " active"; |
|
|
|
dada.scrollIntoView(); |
|
|
|
// var audio1 = document.getElementById("audioBG");
|
|
|
|
// audio1.currentTime = time;
|
|
|
|
// audio1.play();
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// $(function (){
|
|
|
|
// $('.topleft').click(function(){
|
|
|
|
// $('iframe').attr('src', $('iframe').attr('src'));
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
// function pauseAllVideos(name)
|
|
|
|
// {
|
|
|
|
// $("#video"+name).each(function(){
|
|
|
|
// this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
|
|
|
|
function pauseAllVideos(name) { |
|
|
|
$("video"+name).each(function(){ |
|
|
|
$(this).stopVideo(); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
// $(function (){
|
|
|
|
// $('.topleft').click(function(){
|
|
|
|
// $('iframe').attr('src', $('iframe').attr('src'));
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
|
|
|
|
function popup(name,time) { |
|
|
|
$("#show"+name).fadeIn() |
|
|
|
console.log("around") |
|
|
|
$("#thesis").fadeIn() |
|
|
|
$("#thesisX").fadeIn() |
|
|
|
$("#bio"+name).fadeIn() |
|
|
|
var dada = document.getElementById("text"+name); |
|
|
|
dada.className += " active"; |
|
|
|
dada.scrollIntoView(); |
|
|
|
// var audio1 = document.getElementById("audioBG");
|
|
|
|
// audio1.currentTime = time;
|
|
|
|
// audio1.play();
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//stop events when clicking somewhere else
|
|
|
|
//stop events when clicking somewhere else
|
|
|
|
// $(document).click(function (e) {
|
|
|
|
// if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
|
|
|
|
// $("#showdadaloglu").fadeOut();
|
|
|
|