|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<body> |
|
<script src="//d3js.org/d3.v4.min.js"></script> |
|
<script src="//d3js.org/topojson.v1.min.js"></script> |
|
<script> |
|
|
|
var width = 960, |
|
height = 500; |
|
|
|
var radius = height / 2 - 20, |
|
scale = radius, |
|
velocity = .015; |
|
|
|
var projection = d3.geoOrthographic() |
|
.translate([width / 2, height / 2]) |
|
.scale(scale) |
|
.clipAngle(90); |
|
|
|
var canvas = d3.select("body").append("canvas") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
var context = canvas.node().getContext("2d"); |
|
|
|
// retina display |
|
var devicePixelRatio = window.devicePixelRatio || 1; |
|
canvas.style('width', canvas.attr('width')+'px'); |
|
canvas.style('height', canvas.attr('height')+'px'); |
|
canvas.attr('width', canvas.attr('width') * devicePixelRatio); |
|
canvas.attr('height', canvas.attr('height') * devicePixelRatio); |
|
context.scale(devicePixelRatio,devicePixelRatio); |
|
|
|
var path = d3.geoPath() |
|
.projection(projection) |
|
.context(context); |
|
|
|
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json", function(error, world) { |
|
if (error) throw error; |
|
|
|
var land = topojson.feature(world, world.objects.land); |
|
|
|
var polygon = /* f3 */ |
|
[ [ 89.42139757619105, 34.98933287542549 ], |
|
[ 89.42139757619105, -34.98933287542549 ], |
|
[ 0.5786024238089479, -34.98933287542549 ], |
|
[ 0.5786024238089479, 34.98933287542549 ], |
|
[ -0.5786024238089479, 34.98933287542549 ], |
|
[ -0.5786024238089479, -34.98933287542549 ], |
|
[ 0, -35.81174578592711 ], |
|
[ 90, -35.81174578592711 ], |
|
[ 180, -35.81174578592711 ], |
|
[ -90, -35.81174578592711 ], |
|
[ -89.42139757619105, -34.98933287542549 ], |
|
[ -89.42139757619105, 34.98933287542549 ], |
|
[ -90.57860242380896, 34.98933287542549 ], |
|
[ -90.57860242380896, -34.98933287542549 ], |
|
[ -179.42139757619105, -34.98933287542549 ], |
|
[ -179.42139757619105, 34.98933287542549 ], |
|
[ 179.42139757619105, 34.98933287542549 ], |
|
[ 179.42139757619105, -34.98933287542549 ], |
|
[ 90.57860242380896, -34.98933287542549 ], |
|
[ 90.57860242380896, 34.98933287542549 ], |
|
[ 89.42139757619105, 34.98933287542549 ] ]; |
|
|
|
d3.timer(function(elapsed) { |
|
context.clearRect(0, 0, width, height); |
|
|
|
projection.rotate([velocity * elapsed, 0]); |
|
context.beginPath(); |
|
path(land); |
|
context.lineWidth = 1; |
|
context.strokeStyle = 'black'; |
|
context.stroke(); |
|
context.fillStyle = '#eee'; |
|
context.fill(); |
|
|
|
context.beginPath(); |
|
path({type: "Polygon", coordinates: [polygon]}); |
|
context.lineWidth = 2.5; |
|
context.strokeStyle = '#3f3'; |
|
context.stroke(); |
|
context.fillStyle = 'rgba(0,0,100,0.1)'; |
|
context.fill(); |
|
|
|
context.beginPath(); |
|
context.arc(width / 2, height / 2, radius, 0, 2 * Math.PI, true); |
|
context.lineWidth = 3; |
|
context.strokeStyle = 'black'; |
|
context.stroke(); |
|
}); |
|
}); |
|
|
|
d3.select(self.frameElement).style("height", height + "px"); |
|
|
|
</script> |