D3 Examples - Mystara---Mollweide projection

Mystara---Mollweide projection

This is a Mollweide projection 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 :

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="map.css">
<title>Mystara - Mollweide projection with d3.js-v4</title>
</head>
<body>
   <div id="map"></div>
   <div>
    <input id="showChkBx" type="checkbox">Cover with Outer World map (from Hollow World Set)</input>
   </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>
   d3.select("#map").append("svg");
   d3.select("#showChkBx").on("change",update);
   update();
            
   
​
function update(){
    var width = 800, height = 400;
    
    var projection = d3.geoMollweide()
        .scale(height/ Math.PI)
        .translate([width/2, height/2])
        
    var path = d3.geoPath().projection(projection);  
    
    d3.select("svg").remove();
    
    var svg = d3.select("#map").append("svg")   
        .attr("width", width)
        .attr("height", height) 
        .attr("style", "border:1px dashed #ccc");
        
       svg.append("path")
        .datum({type: "Sphere"})
        .attr("class", "background")
        .attr("d", path);
        
       svg.append("path")    
        .datum(d3.geoGraticule())
        .attr("class", "graticule")
        .attr("d", path);
        
       svg.append("path")
        .datum({type: "Sphere"})
        .attr("class", "outline")
        .attr("d", path);
​
       d3.json("Mystara_2017.topojson", function(error, mystara) {
        if (error) return console.error(error);
           
        svg.append("path", ".graticule")
            .datum(topojson.feature(mystara, mystara.objects.Mystara_2017_unprojected))
            .attr("class", "land")
            .attr("id", "contour")
            .attr("d", path);
           
        svg.append("clipPath")
            .attr("id", "clip")
            .append("use")
            .attr("xlink:href", "#contour");
            
        if(d3.select("#showChkBx").property("checked")){
            svg.append("image")
                .attr("clip-path", "url(#clip)")
                .attr("xlink:href", "OW_mollweide.tif")
                .attr("width", width)
                .attr("height", height);
        };  
    });             
};
​
​
   </script>
    