gray gooey

forked from PatriciaMRobinson's block: gray gooey

<!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 = 1000,
    height = 500,
    radius = 500;

var theta = Math.PI/1.5,
    spacing = 8;

// color from https://colrd.com/palette/24070/
var colors = ["#000000", "#3d3d3d", "#6d6d6d", "#545454", "#c6c6c6",
   "#969696", "#cecece", "#015988", "#0184ca", "#ade2fe"];
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 15 -5');

d3.timer(function(t) {
  theta = theta - 0.0007;
  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