Skip to content

Instantly share code, notes, and snippets.

@jwilber

jwilber/.block

Created October 21, 2018 02:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jwilber/abf998e3e793a7e34a5fba5cc64a1045 to your computer and use it in GitHub Desktop.
Save jwilber/abf998e3e793a7e34a5fba5cc64a1045 to your computer and use it in GitHub Desktop.
Download ZIP
flubber rect demo
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/flubber@0.3.0"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script src="https://unpkg.com/flubber@0.3.0"></script><script>
var svg = d3.select("svg"),
path = svg.append("path");
d3.json("lower48.topo.json", function(err, topo) {
var states = topojson
.feature(topo, topo.objects.states)
.features.map(d => d.geometry.coordinates[0]);
d3.shuffle(states);
draw(0);
function draw(i) {
var start = states[0],
next = states[1],
height = 250,
width = 80 + i % 3 * 80,
x = 120 + i % 2 * 600,
y = 125;
var outward = flubber.toRect(start, x, y, width, height, { maxSegmentLength: 10 }),
inward = flubber.fromRect(x, y, width, height, next, { maxSegmentLength: 10 });
states.push(states.shift());
path
.attr("d", "M" + start.join("L") + "Z")
.transition()
.delay(600)
.duration(2000)
.attrTween("d", () => outward)
.transition()
.delay(600)
.attrTween("d", () => inward)
.on("end", () => draw(i + 1));
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment