Built with blockbuilder.org
xxxxxxxxxx
<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');
var steps = 30;
svg.selectAll(".flyCircle")
.data(d3.range(steps).map(function(num) {return (num/steps)*(2*Math.PI); }))
.enter().append("circle")
.attr("class", "flyCircle")
.attr("cx", function(d,i) { return 45*Math.cos(i/Math.PI); })
.attr("cy", function(d,i) { return 45*Math.sin(i/Math.PI); })
.attr("transform", function(d,i) {
var radius = spacing * Math.sqrt(i),
angle = i * theta;
return "translate(" + (radius * Math.cos(angle)) + "," + (radius * Math.sin(angle)) + ")"
})
.attr("r", function(d,i) { return 8 + i/20; })
.style("fill", function(d,i) {return colorScale(i)})
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