");
- // draggable
-
-
- // div.on(".drag", null);
- // span.html("
");
- // 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("
× " + i.bio + "
");
+ // draggable
+
+
+ // div.on(".drag", null);
+ // span.html("
×");
+ // 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();