xxxxxxxxxx
<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