block by emeeks d994dbdc9a7b21ab9692

Geodata to d3.svg.line interpolation

Full Screen

An example of how to project coordinates of geodata features and then use those for d3.svg.line to take advantage of built-in line interpolators.

index.html

<html xmlns="//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>

function inter() {
  d3.json("//bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/world.geojson", function(data) {createMap(data)});
  
  function createMap(countries) {
    width = 500;
    height = 500;
    projection = d3.geo.mercator()
    .scale(80)
    .translate([width / 2, height / 2])

    geoPath = d3.geo.path().projection(projection);
    
    roundedCountries = [];
    for (x in countries.features) {
      for (y in countries.features[x].geometry.coordinates) {
        if (countries.features[x].geometry.coordinates[y].length > 1) {
          roundedCountries.push(countries.features[x].geometry.coordinates[y].map(function(d) {return projection(d)}))
        }
        else {
          roundedCountries.push(countries.features[x].geometry.coordinates[y][0].map(function(d) {return projection(d)}))
        }
      }
    }
    
    d3.select("svg").append("text").attr("id", "inter").attr("x", 40).attr("y", 40)

    d3.select("svg").selectAll("path").data(roundedCountries)
    .enter()
    .append("path")
    .style("stroke-width", 1)
    .style("stroke", "black")
    .style("fill-opacity", .5)

    interpolateMethods = ["linear", "cardinal", "basis", "monotone", "step-before"]
    var l = 0;

    reinterpolate();
    
    function reinterpolate() {
    colorScale = ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0"];
      if (l == 5) {
        l = 0;
      }
    countryDraw = d3.svg.line().x(function(d){ return d[0]}).y(function(d){return d[1]}).interpolate(interpolateMethods[l])

    d3.select("#inter").text(interpolateMethods[l])
    d3.select("svg").selectAll("path")
    .attr("d", countryDraw)
    .style("fill", colorScale[l]);
    
    setTimeout(reinterpolate,2000);
    l++;
    }
    
    
  }
  
}
</script>
<body onload="inter()">
<div id="map"><svg></svg></div>
<footer>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
</footer>
</body>
</html>