Wiggly map

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

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js

https://d3js.org/topojson.v2.min.js