Going from San Francisco to Paris I was asked “Why Reykjavík?”
forked from mbostock's block: This Is a Globe
forked from Fil's block: This Is a Globe in d3.v4
license: gpl-3.0 |
Going from San Francisco to Paris I was asked “Why Reykjavík?”
forked from mbostock's block: This Is a Globe
forked from Fil's block: This Is a Globe in d3.v4
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<body> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/topojson.v2.min.js"></script> | |
<script> | |
var width = 960, | |
height = 600; | |
var radius = height / 2 - 5, | |
scale = radius, | |
velocity = .02; | |
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"); | |
var path = d3.geoPath() | |
.projection(projection) | |
.context(context); | |
var zoom = d3 | |
.zoom() | |
.on("zoom start end", zoomed) | |
.scaleExtent([0.7, 5]) | |
.translateExtent([[0,0], [width, height]]); | |
canvas.call(zoom); | |
var init_scale = projection.scale(), | |
init_translate = projection.translate(); | |
function zoomed() { | |
var t = d3.event.transform; | |
projection.scale(init_scale * t.k) | |
.translate(t.apply(init_translate)); | |
} | |
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 plane = { | |
"type": "Feature", | |
"properties": {}, | |
"geometry": { | |
"type": "LineString", | |
"coordinates": [ | |
[ | |
-121.28906250000001, | |
35.17380831799959 | |
], | |
[ | |
-18.984375, | |
64.32087157990324 | |
], | |
[ | |
1.7578125, | |
47.754097979680026 | |
] | |
] | |
} | |
} | |
d3.timer(function(elapsed) { | |
context.clearRect(0, 0, width, height); | |
projection.rotate([velocity * elapsed, -40]); | |
context.beginPath(); | |
path(land); | |
context.fill(); | |
context.beginPath(); | |
path(plane); | |
context.strokeStyle = 'green'; | |
context.stroke(); | |
context.strokeStyle = 'black'; | |
context.beginPath(); | |
path({type:"Sphere"}); | |
context.lineWidth = 2.5; | |
context.stroke(); | |
}); | |
}); | |
d3.select(self.frameElement).style("height", height + "px"); | |
</script> |