index.html

## readme.md

      
          Raw
        
        
              readme.md
            
          
    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="http://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("http://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="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
</footer>
</body>
</html>

## thumbnail.png

      
          Raw
        
        
              thumbnail.png