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.
| { | |
| "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 | |
| } |
| <!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> |
