block by jczaplew 7204160

Topojson Paleogeography (normal order)

Full Screen

GeoJSON plates render correctly, whereas the TopoJSON plates do not. The plate that wraps the north pole is inverted, covering all of the oceans.

index.html

<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns= "//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="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <script src="//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>