Skip to content

Instantly share code, notes, and snippets.

@HarryStevens

HarryStevens/.block

Last active December 19, 2016 20:41
Show Gist options
  • Save HarryStevens/a328dcdf96f93cdc152b168bd21c34bc to your computer and use it in GitHub Desktop.
Save HarryStevens/a328dcdf96f93cdc152b168bd21c34bc to your computer and use it in GitHub Desktop.
Download ZIP
Gooey Cell Division
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
index.html
<html>
<head>
<style>
body {
margin: 0;
background: #3a403d;
}
.amoeba {
fill: #fff;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script>
var width = window.innerWidth,
height = window.innerHeight;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.style("filter", "url(#gooey)"); //Set the filter on the container svg;
var data = [{group: 1, id: 1, x: width / 2, y: height / 2}];
//SVG filter for the gooey effect
//Code taken from http://bl.ocks.org/nbremer/69808ec7ec07542ed7df
var defs = svg.append("defs");
var filter = defs.append("filter").attr("id", "gooey");
filter.append("feGaussianBlur")
.attr("in", "SourceGraphic")
.attr("stdDeviation", "10")
.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 18 -7")
.attr("result", "gooey");
filter.append("feComposite")
.attr("in", "SourceGraphic")
.attr("in2", "gooey")
.attr("operator", "atop");
function redraw(data){
// transition
var t = d3.transition()
.duration(1500);
//JOIN
var amoeba = svg.selectAll(".amoeba")
.data(data, function(d){ return d.id; });
// EXIT
amoeba.exit().remove();
// UPDATE
amoeba
.transition(t)
.attr("cx",function(d){ return d.x; })
.attr("cy",function(d){ return d.y; });
// ENTER
amoeba.enter().append("circle")
.attr("class", "amoeba")
.attr("r", 50)
.attr("cx",function(d){ return d.x; })
.attr("cy",function(d){ return d.y; });
}
redraw(data);
function run(){
setTimeout(function(){
data.forEach(function(d){
data.push({group: 1, id: data.length + d.id, x: d.x, y: d.y});
});
redraw(data);
}, 750)
setTimeout(function(){
data.forEach(function(d, i){
data[i] = {group: d.group, id: d.id, x: width * (d.id / (data.length + 1)), y: d.y};
});
redraw(data);
}, 1500);
setTimeout(function(){
data.forEach(function(d, i){
data.push({group: d.group, id: data.length + 1, x: d.x, y: d.y});
});
redraw(data);
}, 3000);
setTimeout(function(){
data.forEach(function(d, i){
d.group = i < 2 ? 1 : 2;
data[i] = {group: d.group, id: i + 1, x: d.x, y: height * (d.group / 3)};
});
redraw(data);
}, 3750);
setTimeout(function(){
data.forEach(function(d, i){
data[i] = {group: d.group, id: i + 1, x: d.x, y: height / 2};
});
redraw(data);
}, 6000);
setTimeout(function(){
data.forEach(function(d, i){
data[i] = {group: d.group, id: d.id, x: width / 2, y: d.y}
});
redraw(data.splice(2, 2));
}, 8000);
data = [{group: 1, id: 1, x: width / 2, y: height / 2}];
}
run();
d3.interval(run, 9000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment