D3 Examples - Wiggly map

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>
    path {
      stroke: #fff;
      stroke-width: 1px;
    }
  </style>
</head>
<body>
<svg width="960" height="600"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
​
var svg = d3.select("svg"),
    colors = ["#6dd4e8","#f362ba","#6af09c","#f2ef5f","#e39460"];
​
d3.json("https://d3js.org/us-10m.v1.json", function(err, us){
​
  var neighbors = topojson.neighbors(us.objects.states.geometries),
      features = topojson.feature(us, us.objects.states).features;
​
  features.forEach(function(d,i){
​
    d.properties.color = colors.filter(function(c){
      return neighbors[i].every(n => features[n].properties.color !== c);
    })[0];
​
    colors.push(colors.shift());
​
  });
​
  var g = svg.selectAll("g")
    .data(features)
    .enter()
    .append("g");
​
  var filters = g.append("filter")
    .attr("id", (d, i) => "f" + i);
​
  var turb = filters.append("feTurbulence")
    .attr("baseFrequency", "0.01")
    .attr("type", "turbulence");
​
  filters.append("feDisplacementMap")
    .attr("scale", 15)
    .attr("in", "SourceGraphic");
​
  g.append("path").attr("fill", d => d.properties.color)
    .attr("d", d3.geoPath())
    .style("filter", (d, i) => "url(#f" + i + ")");
​
  setInterval(function(){
    turb.attr("seed", () => 100 * Math.random());
  }, 60);
​
});
​
</script>
​
    