Minimal D3js line smoothing

Minimal line smoothing in answer to Making a SVG path like a smooth line instead of being ragged. The idea of d3.svg.line together with interpolations of y coordinates for lins smoothing is from E.Meeks. This blocks is a minimal stand alone case study to build upon.

Note: while .interpolate("cardinal") is used, we actually have ["linear", "cardinal", "basis", "monotone", "step-before"] methods, as shown in E.Meeks advanced demo. E. Meeks explain his approach here.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Interpolating Geodata</title>
  <meta charset="utf-8" />
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }

#map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  svg {
    height: 100%;
    width: 100%;
    position: absolute;
  }
</style>
	<script src="./d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
	<script src="./d3.geo.projection.v0.min.js" type="text/javascript"></script>
	<script src="./queue.v1.min.js" type="text/javascript"></script>

<body>
<div id="map"><svg></svg></div>
	
<script>
function createMap(geojson) {
	/* SVG init ****************************************************** */
	width  = 500;
	height = 500;
	projection = d3.geo.mercator()
		.scale(80)
		.translate([width/2, height/2])
	
	/* Points reprojections ****************************************** */
	newJson = [];
	for (x in geojson.features) {
		for (y in geojson.features[x].geometry.coordinates) {
			if (geojson.features[x].geometry.coordinates[y].length > 1) {
				newJson.push(geojson.features[x].geometry.coordinates[y].map(function(d) {return projection(d)}))
			}
			else {
				newJson.push(geojson.features[x].geometry.coordinates[y][0].map(function(d) {return projection(d)}))
			}
		}
	}
	/* SVG draw ****************************************************** */
	d3.select("svg").selectAll("path")
		.data(newJson)
	  .enter()
		.append("path")
		.style("stroke-width", 1)
		.style("stroke", "black")
		.style("fill-opacity", .5)
		.attr("d", d3.svg.line()
			  .x(function(d){ return d[0] })
			  .y(function(d){ return d[1] }).interpolate("cardinal"))
		.style("fill", "#7fc97f");
}
d3.json("./world.geojson", function(data){createMap(data)})

</script>
<footer>
</footer>
</body>
</html>