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

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

Browse Source
This commit is contained in:
alicestrt 2021-01-08 14:16:02 +01:00
commit b975a876ef
1 changed files with 182 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

344
static/js/d3_map.js vendored
View File

@ -1,224 +1,244 @@
var width = 700, var width = 700,
height = 350 height = 350
var svg = d3.select(".map_area").append("svg") var svg = d3.select(".map_area").append("svg")
.attr("width", width) .attr("width", width)
.attr("height", height) .attr("height", height)
.attr("viewBox", `${-width/1.7} ${-height/1.6} ${width*2.3} ${height*2.2}`); .attr("viewBox", `${-width/1.7} ${-height/1.6} ${width*2.3} ${height*2.2}`);
var force = d3.layout.force() var force = d3.layout.force()
.gravity(0.009) .gravity(0.009)
.distance(500) .distance(500)
.charge(-30) .charge(-30)
.size([width, height]); .size([width, height]);
d3.json("/static/js/group1.json", function(error, json) { d3.json("/static/js/group1.json", function(error, json) {
if (error) throw error; if (error) throw error;
force force
.nodes(json.nodes) .nodes(json.nodes)
.links(json.links) .links(json.links)
.start(); .start();
var link = svg.selectAll(".link") var link = svg.selectAll(".link")
.data(json.links) .data(json.links)
.enter().append("line") .enter().append("line")
.attr("class", "link"); .attr("class", "link");
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")
.attr("xlink:href", "/static/images/circleB.png") .attr("xlink:href", "/static/images/circleB.png")
.attr("x", -8) .attr("x", -8)
.attr("y", -8) .attr("y", -8)
.attr("width", 16) .attr("width", 16)
.attr("height", 16); .attr("height", 16);
node.append("text") node.append("text")
// .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){ })
// popup video .on("click", function(i) {
divVideo.transition().duration(100); // popup video
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>"); if (i.url) {
divBio.transition().duration(100); divVideo.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>"); 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>");
// draggable }
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>");
// 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;
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.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 + ")";
});
});
// 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;
} else { } else {
//Put them back to opacity=1 //Put them back to opacity=1
node.style("opacity", 1); node.style("opacity", 1);
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();