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 Aşık Ali İzzet
×
+
Bio Aşık Ali İzzet
×
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();