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. 394
      static/js/d3_map.js

394
static/js/d3_map.js
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
})
node.append("image") .attr("id", function(d) {
// .attr("xlink:href", "/static/images/squig2.png") return d.id
.attr("xlink:href", "/static/images/circleB.png") });
.attr("x", -8)
.attr("y", -8) node.append("image")
.attr("width", 16) // .attr("xlink:href", "/static/images/squig2.png")
.attr("height", 16); .attr("xlink:href", "/static/images/circleB.png")
.attr("x", -8)
node.append("text") .attr("y", -8)
// .attr("xlink:href", "#") .attr("width", 16)
.attr("dx", 12) .attr("height", 16);
.attr("dy", ".35em")
.text(function(d) { return d.name }); node.append("text")
// .attr("xlink:href", "#")
.attr("dx", 12)
var divVideo = d3.select("body").append("div").style("opacity", 1); .attr("dy", ".35em")
var divBio = d3.select("body").append("div").style("opacity", 1); .text(function(d) {
return d.name
});
node.on({
"mouseover": function(d) { var divVideo = d3.select("body").append("div").style("opacity", 1);
d3.select(this).style("cursor", "pointer"); var divBio = d3.select("body").append("div").style("opacity", 1);
}})
.on("click", function(i){
// popup video
divVideo.transition().duration(100); node.on({
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>"); "mouseover": function(d) {
divBio.transition().duration(100); d3.select(this).style("cursor", "pointer");
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 })
.on("click", function(i) {
// popup video
// div.on(".drag", null); if (i.url) {
// span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span>"); divVideo.transition().duration(100);
// rest pop up 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>");
popup(i.id,i.time); }
}) divBio.transition().duration(100);
.on("dblclick",connectedNodes) 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>");
.call(force.drag); // draggable
// div.on(".drag", null);
force.on("tick", function() { // span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span>");
link.attr("x1", function(d) { return d.source.x; }) // rest pop up
.attr("y1", function(d) { return d.source.y; }) popup(i.id, i.time);
.attr("x2", function(d) { return d.target.x; }) })
.attr("y2", function(d) { return d.target.y; }); .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){ // 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 (){
// $('.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 (){ //stop events when clicking somewhere else
// $('.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
// $(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