ネットワーク図描画
<html>
<head>
<title>取引ネットワーク図</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style>
svg{width: 640px; height: 640px; border: 1px solid black; background-color: #fff;}
.forceLine{stroke:blue; stroke-width:2;}
</style>
</head>
<body>
<h2>取引ネットワーク図</h2>
<svg id="myNetwork"></svg>
<script src="js/network.js"></script>
</body>
</html>
var dataSet = {nodes : [{name : "Apple"}, {name : "Orange"}, {name : "Banana"}, {name : "Melon"},],
links : [{ source : 0, target : 1}, {source : 1, target : 0}, {source : 2, target : 0},{source : 3, target : 0}]
}
var force = d3.layout.force()
.nodes(dataSet.nodes)
.links(dataSet.links)
.size([320, 320])
.linkDistance(100)
.linkStrength(5)
.gravity(0.0001)
.start()
var link = d3.select("#myNetwork")
.selectAll("line")
.data(dataSet.links)
.enter()
.append("line")
.attr("class", "forceLine" )
var node = d3.select("#myNetwork")
.selectAll("circle")
.data(dataSet.nodes)
.enter()
.append("circle")
.attr("r", 10 )
.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;})
})
地図描画
<html>
<head>
<title>群馬県</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
<style>
svg{width: 640px; height: 640px; border: 1px solid black; background-color: #fff;}
</style>
</head>
<body>
<h2>群馬県</h2>
<svg id="myMap"></svg>
<script src="js/map.js"></script>
</body>
</html>
var svgWidth = 640;
var svgHeight = 640;
var path = d3.geo.path()
.projection(d3.geo.mercator()
.center([138.700, 36.5000])
.scale(24000)
.translate([200,300])
)
d3.json("js/Gumma.json",
function(error, pref) {
d3.select("#myMap")
.selectAll("path")
.data(pref.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", "#cceeee")
})