Gooey Phyllotaxis Dance

Combines Gooey Circle Effect Colors with a Phyllotaxis animation.

If you like this, go check out the work of Nadieh Bremer and Jason Davies.

<!DOCTYPE html>
<meta charset=utf-8>
<title>Gooey Effect</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="chart"></div>
<script>

//////////////////
//// Initiate ////
//////////////////

var width = 960,
    height = 500,
    radius = 45;

var theta = Math.PI/3,
    spacing = 20;

// color from https://colrd.com/palette/24070/
var colors = ["#26294a", "#01545a", "#017351", "#03c383", "#aad962",
   "#fbbf45", "#ef6a32", "#ed0345", "#a12a5e", "#710162"];
var colorScale = d3.scale.ordinal().range(colors);

var svg = d3.select(".chart").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .style("filter", "url(#gooey)") //Set the filter on the container svg
  .attr("transform", "translate(" + (width/2) + "," +(height/2) + ")");

//SVG filter for the gooey effect
//Code taken from https://tympanus.net/codrops/2015/03/10/creative-gooey-effects/
var defs = svg.append('defs');
var filter = defs.append('filter').attr('id','gooey');
filter.append('feGaussianBlur')
  .attr('in','SourceGraphic')
  .attr('stdDeviation','8')
  .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');

d3.timer(function(t) {
  theta = theta - 0.0005;
  svg.selectAll(".flyCircle")
    .attr("transform", function(d,i) {
       var radius = spacing * Math.sqrt(i),
           angle = i * theta;
       return "translate(" + (radius * Math.cos(angle)) + "," + (radius * Math.sin(angle)) + ")"
    })     
});

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js