CODEWITHSUNDEEP
javascriptpythonajaxd3.jsforce-layout
k3njiy
k3njiy

Reputation: 151

How do I make a d3.js force directed graph interactive using ajax and python?

I am trying to make a force directed graph in d3.js interactive. I created the html that displays it and also wrote the python scripts that generate the content. But I can't get it to work together.

I can call the python script from the browser and it returns valid json but how do i get it into d3?

Somehow it always calls the url with the result appended (*GET http://localhost/vici/[object%20Object] 404 (Not Found)*) but the alert displays the result of the python script.

This is my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <script type="text/javascript" src="d3.v2.js?2.1.3"></script>
    <script src="jquery-1.8.3.js"></script>
    <style type="text/css">
        circle {
          stroke-width: 1.5px;
        }

        line {
          stroke: #999;
        }

        text {
          font: 10px sans-serif;
          pointer-events: none;
        }
    </style>
  </head>
  <body>
      <script type="text/javascript">

          $(document).ready(function() {

              $.ajax({
                  type: "GET",
                  url: "/vici/kellner.py/display",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  data: {name: 302,level: 2}
              })

              .success(function(pyjson) {
              alert(pyjson);
              var data = pyjson;
                var w = 960,
                    h = 600,
                    r = 6;

                var svg = d3.select("#d3vis").append("svg:svg")
                    .attr("width", w)
                    .attr("height", h);

                d3.json(pyjson, function(json) {
                  var force = d3.layout.force()
                    .nodes(json.nodes)
                    .links(json.links)
                    .gravity(.02)
                    .distance(50)
                    .charge(-400)
                    .size([w, h])
                    .start();

                  var link = svg.selectAll("line.link")
                    .data(json.links)
                    .attr("class", "link")
                    .enter().append("svg:line");

                  var node = svg.selectAll(".node")
                    .data(json.nodes)
                    .enter().append("g")
                    .attr("class", "node")
                    .call(force.drag);

                  node.append("image")
                    .attr("xlink:href", function(d) { return d.avatar })
                    .attr("x", -8)
                    .attr("y", -8)
                    .attr("width", function(d) { return d.avatarWidth })
                    .attr("height", function(d) { return d.avatarHeight });

                  node.append("text")
                    .attr("dx", 12)
                    .attr("dy", ".70em")
                    .text(function(d) { return d.avatarName });

                  node.append("svg:title")
                    .text(function(d) { return d.author; }, function(d) { return d.institute; } );

                  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 + ")"; });
                  });

                });

              }); 
          });
    </script>

    <div id="d3vis"></div>
  </body>
</html>

But not just that: How can I get d3 to reload after clicking a node? Every node has a name ("author":"Some Name") and my python script can search for that name and return a new result.

I have search for this and found some things (e.g. Updating links on a force directed graph from dynamic json data) what seems would be really nice and what I would want to do, but I do not understand it so I can't modify it to my needs. (Where does the data come from or where can i call my python script to provide the data?)

I just need to get the json into d3 and change the graph when clicking on a node.

I am new to Java Script so any help would be greatly appreciated.

EDIT: Here still some test data:

{
"nodes": [
    {"institute": "None", "avatarWidth": "16", "avatar": "img/user.png", "avatarHeight": "16", "author": "Some Name"}, 
    {"institute": "None", "avatarWidth": "16", "avatar": "img/user.png", "avatarHeight": "16", "author": "Some Name"}, 
    {"institute": "None", "avatarWidth": "16", "avatar": "img/user.png", "avatarHeight": "16", "author": "Some Name"}, 
    {"author": "Main Name", "institute": "None", "avatarName": "Main Name", "avatar": "img/main.png", "avatarHeight": "24", "avatarWidth": "24"}, 
    {"institute": "None", "avatarWidth": "16", "avatar": "img/user.png", "avatarHeight": "16", "author": "Some Name"}
    ], 
"links": [
    {"color": "red", "source": 0, "target": 2, "weight": 1}, 
    {"color": "orange", "source": 1, "target": 2, "weight": 1}, 
    {"color": "yellow", "source": 2, "target": 3, "weight": 1}, 
    {"color": "yellow", "source": 2, "target": 4, "weight": 1}
    ]
}

Upvotes: 3

Views: 3290

Answers (1)

k3njiy
k3njiy

Reputation: 151

Okay, so apparently the d3.json(pyjson, function(json) { Line was the "bad" one. Is this d3 trying to make its own ajax request?

Anyway I removed it and it seems to be working now. Also my idea of clicking a node to reload is not really ideal since you have to be able to pull them around and clicking would stop that.

Here my functioning code for future reference: (And others that have the same problem)

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <script type="text/javascript" src="d3.v2.js?2.1.3"></script>
    <script src="jquery-1.8.3.js"></script>
    <style type="text/css">
        circle {
          stroke-width: 1.5px;
        }

        line {
          stroke: #999;
        }

        text {
          font: 10px sans-serif;
          pointer-events: none;
        }
    </style>
  </head>
  <body>
      <script type="text/javascript">

          $(document).ready(function() {

              $.ajax({
                  type: "GET",
                  url: "/vici/kellner.py/display",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  data: {name: 302,level: 2}
              })

              .done(function(pyjson) {

                var w = 960,
                    h = 600,
                    r = 6;

                var svg = d3.select("#d3vis").append("svg:svg")
                    .attr("width", w)
                    .attr("height", h);

                var force = d3.layout.force()
                  .nodes(pyjson.nodes)
                  .links(pyjson.links)
                  .gravity(.02)
                  .distance(50)
                  .charge(-400)
                  .size([w, h])
                  .start();

                var link = svg.selectAll("line.link")
                  .data(pyjson.links)
                  .attr("class", "link")
                  .enter().append("svg:line");

                var node = svg.selectAll(".node")
                  .data(pyjson.nodes)
                  .enter().append("g")
                  .attr("class", "node")
                  .call(force.drag);

                node.append("image")
                  .attr("xlink:href", function(d) { return d.avatar })
                  .attr("x", -8)
                  .attr("y", -8)
                  .attr("width", function(d) { return d.avatarWidth })
                  .attr("height", function(d) { return d.avatarHeight });

                node.append("text")
                  .attr("dx", 12)
                  .attr("dy", ".70em")
                  .text(function(d) { return d.avatarName });

                node.append("svg:title")
                  .text(function(d) { return d.author; }, function(d) { return d.institute; } );

                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 + ")"; });
                }); //End of force.on("tick", function() {



              }); //End of .done(function(pyjson) {
          }); //End of $(document).ready(function() {
    </script>

    <div id="d3vis"></div>
  </body>
</html>

Upvotes: 1

Related Questions