block by jczaplew 7204304

Topojson Paleogeography (reversed latitudes)

Full Screen

In contrast to the other example (http://bl.ocks.org/jczaplew/7204160), this example uses the same data, but with all latitudes in the GeoJSON file flipped before converting to TopoJSON. This results in the GeoJSON rendering incorrectly, but the TopoJSON rendering correctly.

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>