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:
and for code :
xxxxxxxxxx•<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><div id="map"></div><script src="https://d3js.org/d3.v4.min.js"></script><script src="https://d3js.org/topojson.v2.min.js"></script><script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> <script src="d3.geo.polyhedron.js"></script><script>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