vvvw/static/js/d3_map.js

var width = 500,
    height = 380

var svg = d3.select(".map_area").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", `${-width/2.5} ${-height/2.5} ${width*2.5} ${height*2.5}`);

var force = d3.layout.force()
    .gravity(0.01)
    .distance(300)
    .charge(-50)
    .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", "node ")
      .attr("class", function(d){return "node group" + d.group})
      // .node()classList.add(function(d){return d.group});
      .attr("id", function(d){return d.id})



      // .style("fill",function (d) { return 'red'; })
      // .on("click", function(d){
      //         scrolldiv(d);
      //         play(d);
      //         popup(d);
      //     })
      .call(force.drag);

  node.append("image")
      .attr("xlink:href", "/static/images/squig2.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 });

  node.on({
    "mouseover": function(d) {
      d3.select(this).style("cursor", "pointer");
    }});

  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.each(collide(0.5)); //Added

  });

// no overlapping

//var padding = 10, // separation between circles
//    radius=8;
//function collide(alpha) {
//  var quadtree = d3.geom.quadtree(graph.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

function popup(name,time) {
    $("#"+name).click(function(){
      $("#show"+name).fadeIn()
      console.log("around")
      var dada = document.getElementById("text"+name);
      dada.className += " active";
      dada.scrollIntoView();
      var audio1 = document.getElementById("audioBG");
      audio1.currentTime = time;
      audio1.play();
    });
};

popup('dadaloglu',12);
popup('asikA',45);

    // $("#dadaloglu").click(function(){
    //   $("#showdadaloglu").fadeIn()
    //   console.log("around")
    //   var dada = document.getElementById("textdadaloglu");
    //   dada.className += " active";
    //   dada.scrollIntoView();
    //   var audio1 = document.getElementById("audioBG");
    //   audio1.currentTime = 12;
    //   audio1.play();
    // });
    //
    //
    //
    // $("#asikA").click(function(){$("#showasikA").fadeIn()
    // console.log("around")
    // var muh = document.getElementById("textasikA");
    // muh.className += " active";
    // muh.scrollIntoView();
    // var audio2 = document.getElementById("audioBG");
    // audio2.currentTime = 120;
    // audio2.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 textmuh = document.getElementById("textasikA");
        textmuh.classList.remove("active");
    };

  });


});