block by emeeks 6bc43691f631a4097d05

Topojson issue

Full Screen

Some kind of problem with generating the topojson from this geojson causes it to render incorrectly.

index.html

<html xmlns="//www.w3.org/1999/xhtml">
<head>
  <title>Topojson Issue</title>
  <meta charset="utf-8" />
<script src="//d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="//d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
</head>
<style>
  html,body,div,svg {
    height: 100%;
    width: 100%;
    margin: 0;
  }

  
</style>
<script>
    d3.json("worldstats.topojson", createTopo);

  function createTopo(data) {
    var countries = topojson.feature(data, data.objects.worldstats)
    width = 500;
    height = 500;
    projection = d3.geo.mercator()
    .scale(120)
    .translate([width / 2, height / 2])
    .center([20,0])
    geoPath = d3.geo.path().projection(projection);
    
    d3.select("svg").selectAll("path.countries").data(countries.features)
    .enter()
    .append("path")
    .attr("d", geoPath)
    .attr("class", "countries")
    .style("fill", "rgba(122,122,0,.05)")
    .style("stroke-width", 1)
    .style("stroke", "black")
    .style("opacity", .5)
  }
</script>
<div id="map">
  <svg></svg>
</div>
</body>
</html>