La bombe de Kim-Jong-un [UNLISTED]

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?

<!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 src="versor.js"></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