Mystara --- Orthographic projection

This is an orthographic representation of the Mystara World. Mystara is a campaign setting for the Dungeons & Dragons fantasy role playing game. It was the default setting for the "Basic" version of the game throughout the 1980s and 1990s.

Inspiration from:

Tait Thorfinn for issue and data,

and for code :

Mike Bostock.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" type="text/css" href="map.css">
<title>Mystara - Orthographic projection with d3.js-v4</title>
</head>

<body>

var width = 900,
    height = 400,
	scale = height/ Math.PI,
	translate = [width / 2, height / 2];

////////////// Orthographic projection //////////////////////
var speed = 1e-2,
    start = Date.now();

var sphere = {type: "Sphere"};
	
var projection = d3.geoOrthographic()
    .scale((height+100)/ Math.PI)
    .translate(translate)
    .clipAngle(90)
    .precision(.1);

var graticule = d3.geoGraticule();
	
var svg= d3.select("#map").append("canvas")
	.attr("width", width)
	.attr("height", height);

var context = svg.node().getContext("2d");

var path = d3.geoPath()
	.projection(projection)
	.context(context);
	
d3.json("Mystara_2017.topojson", function(error, mystara) {
  if (error) throw error;

var land = topojson.feature(mystara, mystara.objects.Mystara_2017_unprojected),
      grid = graticule(),
	  icosahedron = {type: "MultiPolygon",
					 coordinates: d3.geoPolyhedron.icosahedron.map(function(face) {
					   face = face.map(d3.geoRotation([168, 0]));
					   face.push(face[0]);
					   return [face];
					 })
				    };

d3.timer(function() {
    projection.rotate([speed * (Date.now() - start), -15]);

context.clearRect(0, 0, width, height);

context.beginPath();
    path(sphere);
    context.lineWidth = 1;
	context.setLineDash([1,0]);
    context.strokeStyle = "#000";
    context.stroke();

context.beginPath();
    path(sphere);
    context.fillStyle = "#ccf";
    context.fill();

context.beginPath();
    path(land);
    context.fillStyle = "#9f9";
    context.fill();

context.beginPath();
    path(land);
	context.lineWidth = .5;
	context.setLineDash([1,0]);
	context.strokeStyle = "#000";
	context.stroke();

context.beginPath();
    path(grid);
    context.lineWidth = .25;
	context.setLineDash([1,0]);
    context.strokeStyle = "rgba(0, 0, 0, 0.5)";
    context.stroke();
	
	context.beginPath();
    path(icosahedron);
	context.lineWidth = .5;
	context.setLineDash([8, 12]);
	context.strokeStyle ="#FF0000";
	context.stroke();

});
});

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js

https://d3js.org/d3-geo-projection.v2.min.js