Skip to content

Instantly share code, notes, and snippets.

@livingston

livingston/index.html

Forked from mbostock/.block
Last active October 13, 2015 11:28
Show Gist options
  • Save livingston/4188825 to your computer and use it in GitHub Desktop.
Save livingston/4188825 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
readme-world-110m.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.country {
fill: #b8b8b8;
stroke: #fff;
stroke-width: .5px;
stroke-linejoin: round;
}
.graticule {
fill: none;
stroke: #000;
stroke-opacity: .3;
stroke-width: .5px;
}
.graticule-outline {
fill: none;
stroke: #333;
stroke-width: 1.5px;
}
text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-anchor: middle;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
height = 500;
var centroid = d3.geo.path()
.projection(function(d) { return d; })
.centroid;
var projection = d3.geo.orthographic()
.scale(248)
.clipAngle(90);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule()
.extent([[-180, -90], [180 - .1, 90 - .1]]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var line = svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
svg.append("circle")
.attr("class", "graticule-outline")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", projection.scale());
var title = svg.append("text")
.attr("x", width / 2)
.attr("y", height * 3 / 5);
d3.json("readme-world-110m.json", function(error, world) {
var countries = topojson.object(world, world.objects.countries).geometries,
i = -1,
n = countries.length;
var country = svg.selectAll(".country")
.data(countries)
.enter().insert("path", ".graticule")
.attr("class", "country")
.attr("d", path);
step();
function step() {
if (++i >= n) i = 0;
title.text(countries[i].id);
country.transition()
.style("fill", function(d, j) { return j === i ? "red" : "#b8b8b8"; });
d3.transition()
.delay(250)
.duration(1250)
.tween("rotate", function() {
var point = centroid(countries[i]),
rotate = d3.interpolate(projection.rotate(), [-point[0], -point[1]]);
return function(t) {
projection.rotate(rotate(t));
country.attr("d", path);
line.attr("d", path);
};
})
.transition()
.each("end", step);
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment