vvvw/static/js/d3_map.js

var width = 700,
  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}`);

var force = d3.layout.force()
  .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();

  var link = svg.selectAll(".link")
    .data(json.links)
    .enter().append("line")
    .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
      // this is for next the this.parent... ;var video=document.getElementById('#video" + i.id + "');video.pause();
      $('#showvideo').hide();
      if (i.url) {
        divVideo.transition().duration(100);
        divVideo.html("<div id='showvideo'><span onclick=this.parentElement.style.display='none' 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>");
      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 + ")";
    });

  });




  // 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




  // $(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
  // $(document).click(function (e) {
  //   if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
  //       $("#showdadaloglu").fadeOut();
  //       $("#audiodadaloglu").trigger('pause');
  //       // var textdada = document.getElementById("textdadaloglu");
  //       // textdada.classList.remove("active");
  //     };
  //   if (!$(e.target).parents().andSelf().is('#asikA')) {
  //     $("#showasikA").fadeOut();
  //       $("#audioasikA").trigger('pause');
  //       // var textasikA = document.getElementById("textasikA");
  //       // textasikA.classList.remove("active");
  //       stopVideo("#asikA");
  //   };
  //
  // });

  // $(document).click(function (e) {
  //   if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
  //       $("#showdadaloglu").fadeOut();
  //       $("#audiodadaloglu").trigger('pause');
  //       // var textdada = document.getElementById("textdadaloglu");
  //       // textdada.classList.remove("active");
  //     };
  //   if (!$(e.target).parents().andSelf().is('#asikA')) {
  //     $("#showasikA").fadeOut();
  //       $("#audioasikA").trigger('pause');
  //       // var textasikA = document.getElementById("textasikA");
  //       // textasikA.classList.remove("active");
  //       stopVideo("#asikA");
  //   };
  //
  // });



});

// function stop(name) {
//   $(document).click(function (e) {
//     if (!$(e.target).parents().andSelf().is('#'+ name)) {
//         $("#show"+name).fadeOut();
//         $("#audio"+name).trigger('pause');
//         var textdada = document.getElementById("text"+name);
//         textdada.classList.remove("active");
//       };
//   });
// };

//
//