D3 Examples - Minimal D3js line smoothing

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.

xxxxxxxxxx
 
<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>
    