Skip to content

Instantly share code, notes, and snippets.

@veltman

veltman/.block

Created May 10, 2017 02:42
Show Gist options
  • Save veltman/a1a962f1e56f2f7eb7f82020a9cffbad to your computer and use it in GitHub Desktop.
Save veltman/a1a962f1e56f2f7eb7f82020a9cffbad to your computer and use it in GitHub Desktop.
Download ZIP
Wiggly map
Raw
.block
height: 600
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment