xxxxxxxxxx
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.node {
fill: rgb(200, 40, 230);
fill-opacity: 0.25;
stroke: rgb(160, 40, 255);
}
.link {
stroke: rgb(40, 40, 40);
}
</style>
</head>
<body>
<div id="container"></div>
<script id="jsbin-javascript">
$(document).ready(function() {
var width = 512;
var height = 480;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-150)
.linkDistance(30)
.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.links)
.start();
var link = svg.selectAll('.link')
.data(graph.links)
.enter().append('line')
.attr('class', 'link');
var node = svg.selectAll('.node')
.data(graph.nodes)
.enter().append('circle')
.attr('class', 'node')
.attr('r', function(d) { return d.size; })
.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-html" type="text/html">
<html>
<head>
<script src="//d3js.org/d3.v3.min.js"><\/script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container"></div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.node {
fill: rgb(200, 40, 230);
fill-opacity: 0.25;
stroke: rgb(160, 40, 255);
}
.link {
stroke: rgb(40, 40, 40);
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function() {
var width = 512;
var height = 480;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-150)
.linkDistance(30)
.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.links)
.start();
var link = svg.selectAll('.link')
.data(graph.links)
.enter().append('line')
.attr('class', 'link');
var node = svg.selectAll('.node')
.data(graph.nodes)
.enter().append('circle')
.attr('class', 'node')
.attr('r', function(d) { return d.size; })
.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
Modified http://code.jquery.com/jquery-2.1.1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://code.jquery.com/jquery-2.1.1.min.js
https://d3js.org/d3.v3.min.js
https://code.jquery.com/jquery-2.1.1.min.js