Some kind of problem with generating the topojson from this geojson causes it to render incorrectly.
<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>