D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
camille-s
Full window
Github gist
JS Bin // source http://jsbin.com/wuraha
<!DOCTYPE html> <html> <head> <script src="https://d3js.org/d3.v3.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <script id="jsbin-javascript"> var width = 512; var height = 480; var color = d3.scale.category20(); var force = d3.layout.force() .charge(-100) .size([width, height]); var svg = d3.select('body').append('svg') .attr('width', width) .attr('height', height); d3.json('https://dl.dropboxusercontent.com/u/53166203/network.json', function(error, graph) { force.nodes(graph.nodes) .links(graph.edges) .start(); var link = svg.selectAll('line') .data(graph.edges) .enter().append('line') .style('stroke', '#bbb') .style('stroke-width', 1); var node = svg.selectAll('circle') .data(graph.nodes) .enter().append('circle') .attr('r', function(d) { return 8; }) .style('fill', 'teal') .call(force.drag); 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> <script id="jsbin-source-javascript" type="text/javascript">var width = 512; var height = 480; var color = d3.scale.category20(); var force = d3.layout.force() .charge(-100) .size([width, height]); var svg = d3.select('body').append('svg') .attr('width', width) .attr('height', height); d3.json('https://dl.dropboxusercontent.com/u/53166203/network.json', function(error, graph) { force.nodes(graph.nodes) .links(graph.edges) .start(); var link = svg.selectAll('line') .data(graph.edges) .enter().append('line') .style('stroke', '#bbb') .style('stroke-width', 1); var node = svg.selectAll('circle') .data(graph.nodes) .enter().append('circle') .attr('r', function(d) { return 8; }) .style('fill', 'teal') .call(force.drag); 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> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js