diff --git a/wells/index.html b/wells/index.html
index b3cdc3f..0ed1050 100644
--- a/wells/index.html
+++ b/wells/index.html
@@ -52,7 +52,7 @@
-
Bio
diff --git a/wells/static/js/d3_map.js b/wells/static/js/d3_map.js
index efc834d..776a5e4 100644
--- a/wells/static/js/d3_map.js
+++ b/wells/static/js/d3_map.js
@@ -8,7 +8,7 @@ var svg = d3.select(".map_area").append("svg")
var force = d3.layout.force()
.gravity(0.009)
- .distance(300)
+ .distance(400)
.charge(-30)
.size([width, height]);
@@ -35,13 +35,49 @@ d3.json("/static/js/group1.json", function(error, json) {
.on("click", function(i){
popup(i.id,i.time);
})
+ .on("dblclick",connectedNodes)// Added code
.call(force.drag);
+
+// 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++) {
+ linkedByIndex[i + "," + i] = 1;
+};
+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) {
+ return linkedByIndex[a.index + "," + b.index];
+}
+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;
+ } else {
+ //Put them back to opacity=1
+ node.style("opacity", 1);
+ link.style("opacity", 1);
+ toggle = 0;
+ }
+}
+//end highlight nodes
node.append("image")
@@ -79,7 +115,7 @@ d3.json("/static/js/group1.json", function(error, json) {
//var padding = 10, // separation between circles
// radius=8;
//function collide(alpha) {
-// var quadtree = d3.geom.quadtree(graph.nodes);
+// var quadtree = d3.geom.quadtree(<.nodes);
// return function(d) {
// var rb = 2*radius + padding,
// nx1 = d.x - rb,
@@ -105,6 +141,18 @@ d3.json("/static/js/group1.json", function(error, json) {
//}
// scripts for mouse events
+var stopVideo = function (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 popup(name,time) {
$("#show"+name).fadeIn()
@@ -114,7 +162,7 @@ function popup(name,time) {
dada.className += " active";
dada.scrollIntoView();
var audio1 = document.getElementById("audioBG");
- audio1.currentTime = time;
+ audio1.currentpopupTime = time;
audio1.play();
};
@@ -130,8 +178,9 @@ function popup(name,time) {
if (!$(e.target).parents().andSelf().is('#asikA')) {
$("#showasikA").fadeOut();
$("#audioasikA").trigger('pause');
- var textmuh = document.getElementById("textasikA");
- textmuh.classList.remove("active");
+ // var textasikA = document.getElementById("textasikA");
+ // textasikA.classList.remove("active");
+ stopVideo("#asikA");
};
if (!$(e.target).parents().andSelf().is('#asikV')) {
$("#showasikV").fadeOut();