<!DOCTYPE html>
<meta charset="utf-8">
<style>
.active {
stroke: #000;
stroke-width: 2px;
}
</style>
<svg width="960" height="500">
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 32;
var circles = d3.range(20).map(function() {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
var defs = svg.append('defs');
var filter = defs.append('filter').attr('id','gooeyCodeFilter');
filter.append('feGaussianBlur')
.attr('in','SourceGraphic')
.attr('stdDeviation','12')
.attr('color-interpolation-filters','sRGB')
.attr('result','blur');
filter.append('feColorMatrix')
.attr('in','blur')
.attr('mode','matrix')
.attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9')
.attr('result','gooey');
var color = d3.scaleOrdinal()
.range(["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]);
var node = svg.append('g')
.attr('class', 'nodes')
.style('filter', 'url(#gooeyCodeFilter)')
.selectAll("circle")
.data(circles)
.enter()
.append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", radius)
.style("fill", function(d, i) { return color(i); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
.transition()
.duration(2500)
.delay(function(d) { return d.x * 20; })
.on("start", reposition);
function dragstarted(d) {
d3.select(this).transition();
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
d3.select(this)
.attr("cx", d.x = d3.mouse(this)[0])
.attr("cy", d.y = d3.mouse(this)[1]);
}
function dragended(d) {
d3.select(this)
.classed("active", false)
.transition()
.duration(2500)
.on("start", reposition);
}
function reposition() {
var circle = d3.select(this);
(function repeat() {
circle = circle.transition()
.duration(2000)
.attr("cx", function(d) { return Math.round(Math.random() * (width - radius * 2) + radius); })
.attr("cy", function(d) { return Math.round(Math.random() * (height - radius * 2) + radius); })
.transition()
.on("end", repeat);
})();
}
</script>