74 строки
1.4 KiB
HTML
74 строки
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>Great Arc</title>
|
|
<style>
|
|
|
|
#states path {
|
|
fill: #ddd;
|
|
stroke: #fff;
|
|
}
|
|
|
|
#arcs path {
|
|
fill: none;
|
|
stroke: #000;
|
|
stroke-width: .5px;
|
|
stroke-opacity: .2;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
<script src="../../d3.js"></script>
|
|
<script>
|
|
|
|
var width = 960,
|
|
height = 500;
|
|
|
|
var projection = d3.geo.orthographic()
|
|
.rotate([115, -50])
|
|
.scale(500);
|
|
|
|
var path = d3.geo.path()
|
|
.projection(projection);
|
|
|
|
var arc = d3.geo.greatArc();
|
|
|
|
var svg = d3.select("body").append("svg")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
var states = svg.append("g")
|
|
.attr("id", "states");
|
|
|
|
var arcs = svg.append("g")
|
|
.attr("id", "arcs");
|
|
|
|
d3.json("../data/us-states.json", function(error, collection) {
|
|
states.selectAll("path")
|
|
.data(collection.features)
|
|
.enter().append("path")
|
|
.attr("d", path);
|
|
});
|
|
|
|
d3.json("../data/us-state-centroids.json", function(error, collection) {
|
|
var links = [];
|
|
|
|
// Create a link between each state centroid.
|
|
collection.features.forEach(function(a) {
|
|
collection.features.forEach(function(b) {
|
|
if (a !== b) {
|
|
links.push({
|
|
source: a.geometry.coordinates,
|
|
target: b.geometry.coordinates
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
arcs.selectAll("path")
|
|
.data(links)
|
|
.enter().append("path")
|
|
.attr("d", function(d) { return path(arc(d)); });
|
|
});
|
|
|
|
</script>
|