D3 Examples - Minimal d3js line smoothing, topojson version

Minimal d3js line smoothing, topojson version

Minimal line smoothing topojson version, 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.

Notes:

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.

The data quantisation, simplification and zoom (aka scale) should be suitable.

Artefacts may appears if the antimeridian is crossed. An other world map, also crossing this antimeridian, did not display this artifact.

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="./topojson.v1.min.js" charset="utf-8" type="text/javascript"></script>
​
<body>
<div id="map"><svg></svg></div>
    
<script>
    var newgeoson = function(geojson){
        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)})) }
            }
        } return newJson;
    }
    
    console.log("hoyy!")
​
    /* SVG init ****************************************************** */
    width  = 500;
    height = 500;
    projection = d3.geo.mercator()
        .scale(400)
        .translate([width/2, height/2])
    /* Points reprojections ****************************************** */
​
    /* SVG draw ****************************************************** */
    d3.json("./data.json", function(data){
        console.log(data)
        var geojson = topojson.feature(data, data.objects["two-squares"]);
        var newJson = newgeoson(geojson);
        console.log(JSON.stringify(newJson))
        
        d3.select("body").append("svg").attr("id","minimal")
          .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", "#B10000");
    })
​
    d3.json("./world-110m.json", function(data){
        console.log(data)
        var geojson = topojson.feature(data, data.objects.countries);
        var newJson = newgeoson(geojson);
        console.log(JSON.stringify(newJson))
        
        d3.select("body").append("svg").attr("id","world")
          .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");
    })
​
​
</script>
<footer>
</footer>
</body>
</html>
    