hongo35/network.html

## network.html
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8' />
<title>D3.js</title>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type='text/javascript'>
window.onload = function(){
        var size = {"width": 1100, "height": 700};
        var color = d3.scale.category20();

        var force = d3.layout.force()
                .charge(-120)
                .linkDistance(10)
                .size([size['width'],size['height']]);

        var svg = d3.select("body").append("svg")
                .attr("width", size['width'])
                .attr("height", size['height']);

        d3.json("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")
                        .style("stroke-width",2)
                        .style("stroke","#999")
                        .style("stroke-opacity",.6);

                var node = svg.selectAll(".node")
                        .data(graph.nodes)
                        .enter().append("circle")
                        .attr("class","node")
                        .attr("r",5)
                        .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>
	<!DOCTYPE html>
	<html lang='ja'>
	<head>
	<meta charset='utf-8' />
	<title>D3.js</title>
	</head>
	<body>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script type='text/javascript'>
	window.onload = function(){
	var size = {"width": 1100, "height": 700};
	var color = d3.scale.category20();

	var force = d3.layout.force()
	.charge(-120)
	.linkDistance(10)
	.size([size['width'],size['height']]);

	var svg = d3.select("body").append("svg")
	.attr("width", size['width'])
	.attr("height", size['height']);

	d3.json("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")
	.style("stroke-width",2)
	.style("stroke","#999")
	.style("stroke-opacity",.6);

	var node = svg.selectAll(".node")
	.data(graph.nodes)
	.enter().append("circle")
	.attr("class","node")
	.attr("r",5)
	.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>