Force-Directed Graph

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.

<!DOCTYPE html>
<meta charset="utf-8">
<link href='https://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="https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js