Force-Directed Graph

README.md

This simple force-directed graph shows a small network of 12 people as nodes. Edges are weigted.

Data created using NetworkX, and exported using node_link_data with default attrs.

Visualization based on Mike Bostock's Force-Directed Graph, with added labels and mouse-over resizing of nodes. Label-circle grouping idea by Pablo Navarro seen on Stack Overflow, and mouse-over resizing of nodes seen in a Fiddle by Aditya.

data.json

{
  "directed": false,
  "graph": [
    
  ],
  "nodes": [
    {
      "id": "Person 1"
    },
    {
      "id": "Person 2"
    },
    {
      "id": "Person 3"
    },
    {
      "id": "Person 4"
    },
    {
      "id": "Person 5"
    },
    {
      "id": "Person 6"
    },
    {
      "id": "Person 7"
    },
    {
      "id": "Person 8"
    },
    {
      "id": "Person 9"
    },
    {
      "id": "Person 10"
    },
    {
      "id": "Person 11"
    },
    {
      "id": "Person 12"
    }
  ],
  "links": [
    {
      "source": 0,
      "target": 11,
      "weight": 16
    },
    {
      "source": 0,
      "target": 2,
      "weight": 3
    },
    {
      "source": 0,
      "target": 3,
      "weight": 9
    },
    {
      "source": 0,
      "target": 4,
      "weight": 361
    },
    {
      "source": 0,
      "target": 5,
      "weight": 2
    },
    {
      "source": 0,
      "target": 6,
      "weight": 198
    },
    {
      "source": 0,
      "target": 7,
      "weight": 110
    },
    {
      "source": 0,
      "target": 8,
      "weight": 57
    },
    {
      "source": 0,
      "target": 9,
      "weight": 27
    },
    {
      "source": 0,
      "target": 10,
      "weight": 4
    },
    {
      "source": 0,
      "target": 1,
      "weight": 22
    },
    {
      "source": 1,
      "target": 1,
      "weight": 1
    },
    {
      "source": 1,
      "target": 2,
      "weight": 28
    },
    {
      "source": 1,
      "target": 3,
      "weight": 85
    },
    {
      "source": 1,
      "target": 4,
      "weight": 49
    },
    {
      "source": 1,
      "target": 5,
      "weight": 29
    },
    {
      "source": 1,
      "target": 6,
      "weight": 131
    },
    {
      "source": 1,
      "target": 7,
      "weight": 80
    },
    {
      "source": 1,
      "target": 8,
      "weight": 159
    },
    {
      "source": 1,
      "target": 9,
      "weight": 28
    },
    {
      "source": 1,
      "target": 10,
      "weight": 6
    },
    {
      "source": 1,
      "target": 11,
      "weight": 143
    },
    {
      "source": 2,
      "target": 5,
      "weight": 18
    },
    {
      "source": 2,
      "target": 11,
      "weight": 11
    },
    {
      "source": 2,
      "target": 2,
      "weight": 1
    },
    {
      "source": 2,
      "target": 3,
      "weight": 2
    },
    {
      "source": 2,
      "target": 4,
      "weight": 20
    },
    {
      "source": 2,
      "target": 6,
      "weight": 84
    },
    {
      "source": 2,
      "target": 7,
      "weight": 17
    },
    {
      "source": 2,
      "target": 8,
      "weight": 29
    },
    {
      "source": 2,
      "target": 9,
      "weight": 4
    },
    {
      "source": 2,
      "target": 10,
      "weight": 5
    },
    {
      "source": 3,
      "target": 5,
      "weight": 4
    },
    {
      "source": 3,
      "target": 11,
      "weight": 57
    },
    {
      "source": 3,
      "target": 4,
      "weight": 12
    },
    {
      "source": 3,
      "target": 6,
      "weight": 22
    },
    {
      "source": 3,
      "target": 7,
      "weight": 27
    },
    {
      "source": 3,
      "target": 8,
      "weight": 34
    },
    {
      "source": 3,
      "target": 9,
      "weight": 15
    },
    {
      "source": 3,
      "target": 10,
      "weight": 7
    },
    {
      "source": 4,
      "target": 4,
      "weight": 6
    },
    {
      "source": 4,
      "target": 5,
      "weight": 16
    },
    {
      "source": 4,
      "target": 6,
      "weight": 481
    },
    {
      "source": 4,
      "target": 7,
      "weight": 205
    },
    {
      "source": 4,
      "target": 8,
      "weight": 139
    },
    {
      "source": 4,
      "target": 9,
      "weight": 92
    },
    {
      "source": 4,
      "target": 10,
      "weight": 3
    },
    {
      "source": 4,
      "target": 11,
      "weight": 57
    },
    {
      "source": 5,
      "target": 5,
      "weight": 1
    },
    {
      "source": 5,
      "target": 11,
      "weight": 10
    },
    {
      "source": 5,
      "target": 6,
      "weight": 77
    },
    {
      "source": 5,
      "target": 7,
      "weight": 30
    },
    {
      "source": 5,
      "target": 8,
      "weight": 17
    },
    {
      "source": 5,
      "target": 9,
      "weight": 3
    },
    {
      "source": 5,
      "target": 10,
      "weight": 1
    },
    {
      "source": 6,
      "target": 11,
      "weight": 63
    },
    {
      "source": 6,
      "target": 7,
      "weight": 258
    },
    {
      "source": 6,
      "target": 8,
      "weight": 175
    },
    {
      "source": 6,
      "target": 9,
      "weight": 96
    },
    {
      "source": 6,
      "target": 10,
      "weight": 3
    },
    {
      "source": 7,
      "target": 8,
      "weight": 203
    },
    {
      "source": 7,
      "target": 9,
      "weight": 46
    },
    {
      "source": 7,
      "target": 10,
      "weight": 3
    },
    {
      "source": 7,
      "target": 11,
      "weight": 103
    },
    {
      "source": 8,
      "target": 11,
      "weight": 115
    },
    {
      "source": 8,
      "target": 9,
      "weight": 46
    },
    {
      "source": 8,
      "target": 10,
      "weight": 5
    },
    {
      "source": 9,
      "target": 10,
      "weight": 2
    },
    {
      "source": 9,
      "target": 11,
      "weight": 85
    },
    {
      "source": 10,
      "target": 11,
      "weight": 2
    },
    {
      "source": 11,
      "target": 11,
      "weight": 1
    }
  ],
  "multigraph": false
}

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
<style>

.node {
  stroke: none;
  stroke-width: 1px;
  fill: #00aeef;
}

.link {
  stroke: #5d6263;
  stroke-opacity: .5;
}

.label {
  fill: #00447c;
  font-family: Oswald;
  cursor: default;
  stroke: #ffffff;
  stroke-width: 0.7;
  font-weight: 700;
  text-anchor: middle;
  alignment-baseline: middle;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 600,
height = 600;

// var color = d3.scale.category20();

var force = d3.layout.force()
.charge(-120)
.linkDistance(350)
.size([width, height]);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

d3.json("data.json", function(error, graph) {
  force
  .nodes(graph.nodes)
  .links(graph.links)
  .start();

  var link = svg.selectAll(".link")
  .data(graph.links)
  .enter().append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) { return Math.sqrt(d.weight); });

  // Create the groups under svg
  var gnodes = svg.selectAll('g.gnode')
  .data(graph.nodes)
  .enter()
  .append('g')
  .classed('gnode', true)
  .on("mouseover", mouseover)
  .on("mouseout", mouseout)
  .call(force.drag);

  var node = gnodes.append("circle")
  .attr("class", "node")
  .attr("r", 15)
  //.style("fill", function(d) { return color(d.group); })
  ;

  // Append the labels to each group
  var labels = gnodes.append("text")
  .text(function(d) { return d.id; })
  .attr("class", "label");

  // node.append("title")
  // .text(function(d) { return d.id; });

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

    // Translate the groups
    gnodes.attr("transform", function(d) {
      return 'translate(' + [d.x, d.y] + ')';
    });

    gnodes.attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
  });


});

function mouseover() {
  d3.select(this).select("circle").transition()
  .duration(350)
  .attr("r", 20);
}

function mouseout() {
  d3.select(this).select("circle").transition()
  .duration(350)
  .attr("r" , 15);
}

</script>

thumbnail.png