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
Split 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,
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'> &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.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);
// span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</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'> &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.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);
// span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</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();

Write Preview
Loading…
Cancel
Save