diff --git a/static/js/d3_map.js b/static/js/d3_map.js index b5e7a26..c6c9bac 100644 --- a/static/js/d3_map.js +++ b/static/js/d3_map.js @@ -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("
  × 
"); - divBio.transition().duration(100); - divBio.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; }); + .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("
  × 
"); + } + divBio.transition().duration(100); + divBio.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();