D3 Examples - Topojson Paleogeography (reversed latitudes)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns= "https://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Language" content="en" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <style>
    #map {
      height:400px;
    }
    .plates {
      fill: #fff;
      stroke:#000;
      stroke-width:1px;
    }
    </style>
  </head>
  <body>
    <p>Topojson</p>
    <div id="topoSvgMap"></div>
​
    <p>Geojson</p>
    <div id="svgMap"></div>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="https://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
​
    <script type="text/javascript">
      var height = 500,
          width = 960;
​
      var projection = d3.geo.hammer()
        .scale(165)
        .translate([width / 2, height / 2])
        .precision(.3);
       
      var path = d3.geo.path()
        .projection(projection);
​
      // Build the geojson map
      var svg = d3.select("#svgMap")
        .append("svg")
        .attr("height", height)
        .attr("width", width);
​
      svg.append("defs").append("path")
        .datum({type: "Sphere"})
        .attr("id", "sphere")
        .attr("d", path);
​
      svg.append("use")
        .attr("class", "stroke")
        .attr("xlink:href", "#sphere");
​
      svg.append("use")
        .attr("class", "fill")
        .attr("xlink:href", "#sphere");
​
      d3.json("plates203.geojson", function(er, result) {
        svg.insert("path")
          .datum(result)
          .attr("class", "plates")
          .attr("d", path);
      });
​
      // Build the topojson map
      var topoSvg = d3.select("#topoSvgMap")
        .append("svg")
        .attr("height", height)
        .attr("width", width);
​
      topoSvg.append("defs").append("path")
        .datum({type: "Sphere"})
        .attr("id", "sphere")
        .attr("d", path);
​
      topoSvg.append("use")
        .attr("class", "stroke")
        .attr("xlink:href", "#sphere");
​
      topoSvg.append("use")
        .attr("class", "fill")
        .attr("xlink:href", "#sphere");
​
      d3.json("plates203.topojson", function(er, data) {
        topoSvg.insert("path")
          .datum(topojson.feature(data, data.objects.plates203))
          .attr("class", "plates")
          .attr("d", path);
      });
​
    </script>
  </body>
​
</html>
    