Created
July 19, 2013 15:42
-
-
Save sekjal/6040132 to your computer and use it in GitHub Desktop.
The purpose of this script is to provide an easy way to create a force directed graph in D3.js without having to know ahead of time the index of the nodes in the Nodes array. Instead of providing a list of Links with the array index of source and target, each node should have a unique name (ID), and each link should reference that. Links to unsu…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node { | |
| stroke: #fff; | |
| stroke-width: 0px; | |
| } | |
| .link { | |
| stroke: #ccc; | |
| stroke-opacity: .6; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| var width = 1200, | |
| height = 800; | |
| var color = d3.scale.category20(); | |
| var force = d3.layout.force() | |
| .charge(-120) | |
| .gravity(1) | |
| .friction(.5) | |
| .linkDistance(30) | |
| .size([width, height]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var nodes, reversenodes = {}, remaining=2; | |
| // Nodes should have ID value | |
| d3.json("nodes.json", function(error,input){ | |
| for(var i=0;i<input.length;i++){ | |
| var node_id = input[i].ID; | |
| reversenodes[node_id] = i; | |
| } | |
| nodes = input; | |
| if (error) { return console.warn(error); } | |
| if (!--remaining) drawChart(); | |
| }); | |
| // To Do: more flexible scale handling | |
| var radius = d3.scale.log().domain([1,1000]).range([2,40]); | |
| // Links should have source and target values with Node ID params | |
| d3.json("links.json", function(error,input){ | |
| var links = new Array(); | |
| for(var i=0;i<input.length;i++){ | |
| if( isNaN(reversenodes[input[i].source]) || isNaN(reversenodes[input[i].target])) { | |
| //console.warn("NaN!"); | |
| } else { | |
| links.push({"source":reversenodes[input[i].source], "target":reversenodes[input[i].target]}); | |
| } | |
| } | |
| //console.warn(links); | |
| if (error) return console.warn(error); | |
| if (!--remaining) drawChart(links); | |
| }); | |
| //console.warn(links); | |
| function drawChart(e) { | |
| force | |
| .nodes(nodes) | |
| .links(e) | |
| .start(); | |
| var link = svg.selectAll(".link") | |
| .data(e) | |
| .enter().append("line") | |
| .attr("class", "link") | |
| .style("stroke-width", 1); | |
| var node = svg.selectAll(".node") | |
| .data(nodes) | |
| .enter().append("circle") | |
| .attr("class", "node") | |
| .attr("cx",function() {return width/2;}) | |
| .attr("cy",function() {return height/2;}) | |
| .attr("r", function(d,i) {return radius(d.linksin);}) | |
| .style("fill", function(d) { return color(d); }); | |
| node.append("title") | |
| .text(function(d) { return d.Title; }); | |
| 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("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }); | |
| }); | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment