alicestrt
/
vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Merge branch 'master' of https://git.vvvvvvaria.org/alicestrt/vvvw

master
alicestrt 4 years ago
parent
0ff31ba27d 9902019b11
commit
b975a876ef
1 changed files with 207 additions and 187 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 232
      static/js/d3_map.js

232
static/js/d3_map.js
View File

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

Write Preview
Loading…
Cancel
Save