Trying to reproduce https://seenthis.net/messages/599693
Note that the Korean map uses straight lines on a Mercator projection ^^.
forked from mbostock's block: This Is a Globe
forked from Fil's block: This Is a Globe in d3.v4
forked from Fil's block: Why Reykjavík?
xxxxxxxxxx
<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 src="versor.js"></script>
<script>
var width = 960,
height = 500;
var radius = height / 2 - 5,
scale = radius,
velocity = .02;
var projection = d3.geoOrthographic()
.translate([width / 2, height / 2])
projection.rotate([180,-60,-40]).scale(250);
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 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));
}
canvas.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged));
var render = function() {},
v0, // Mouse position in Cartesian coordinates at start of drag gesture.
r0, // Projection rotation as Euler angles at start.
q0; // Projection rotation as versor at start.
function dragstarted() {
v0 = versor.cartesian(projection.invert(d3.mouse(this)));
r0 = projection.rotate();
q0 = versor(r0);
}
function dragged() {
var v1 = versor.cartesian(projection.rotate(r0).invert(d3.mouse(this))),
q1 = versor.multiply(q0, versor.delta(v0, v1)),
r1 = versor.rotation(q1);
projection.rotate(r1);
render();
}
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
],
[
125,
39
]
]
}
}
render = function() {
context.clearRect(0, 0, width, height);
context.lineWidth = 1;
context.beginPath();
path(land);
context.fill();
var mile = 1.6 * 360 / (2 * Math.PI * 6371)
context.beginPath();
[180 * mile, 600 * mile, 800 * mile, 2200 * mile, 6200 * mile, 7200 * mile].map(d =>
path(d3.geoCircle().center([
125,
39
]).radius(d)()))
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
path(plane);
context.lineWidth = 2;
context.strokeStyle = 'red';
context.stroke();
context.strokeStyle = 'black';
context.beginPath();
path({type:"Sphere"});
context.lineWidth = 2.5;
context.stroke();
};
render();
});
d3.select(self.frameElement).style("height", height + "px");
</script>
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v2.min.js