Gooey effect - Rectangle

This example is from my blog on how to Create a Gooey effect during a transition and shows how you can also use rectangles with the Gooey effect

The other two examples

You can find even more gooey examples in my follow-up blog More fun data visualizations with the gooey effect

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
	<title>Gooey effect - Rectangle</title>
	
	<script src="https://d3js.org/d3.v3.min.js"></script>
		
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	
</head>
<body>

var data = [
		{xLoc: -50, seed:1},
		{xLoc: 0, seed:2},
		{xLoc: 50, seed:3}	
	];
	
	var margin = {top: 30, right: 30, bottom: 30, left: 30},
		width = Math.min(400, $(".chart").width() - margin.left - margin.right),
		rectWidth = 200,
		rectHeight = 30;

var w = window,
		d = document,
		e = d.documentElement,
		g = d.getElementsByTagName('body')[0],
		height = (w.innerHeight || e.clientHeight || g.clientHeight) - margin.top - margin.bottom - 20;
		
	//Create scale
	var scale = d3.scale.linear()
		.domain([-1, 1])
		.range([Math.min(height/2, 150), -1 * Math.min(height/2, 150)]);
	
	//Create SVG
	var svg = d3.select(".chart").append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
	  .append("g")
		.style("filter", "url(#gooey)") //Set the filter on the container svg
		.attr("transform", "translate(" + (margin.left + width/2) + "," +(height/2 + margin.top) + ")");

//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','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 19 -9')
		.attr('result','gooey');
	filter.append('feComposite')
		.attr('in','SourceGraphic')
		.attr('in2','goo')
		.attr('operator','atop');
	
	//Append circle at center
	svg.append("rect")
			.attr("class", "centerRect")
			.attr("width", rectWidth)
			.attr("height", rectHeight)
			.attr("x", -rectWidth/2)
			.attr("y", -rectHeight/2)
			.style("fill", "#81BC00");

//Create a circle that will move out of the center circle
	svg.selectAll(".flyCircle")
		.data(data).enter()
		.append("circle")
			.attr("class", "flyCircle")
			.attr("cx", function(d,i) {return d.xLoc ;})
			.attr("cy", 0)
			.attr("r", 15)
			.style("fill", "#81BC00")
			.transition().duration(1000).delay(function(d,i) { return i*300; })
			  .attr("cy", function(d) { return random(d.seed++); })
			  .each(update);

//Continuously keep the circle flying out
	function update() {
		var circle = d3.select(this);			
		(function repeat() {
			circle = circle
				.transition().duration(1000)
					.attr("cy", 0)
				.transition().duration(1000)
					.attr("cy", function(d) { return random(d.seed++); })
				.each("end", repeat);			
		})();
	}//update

//Random number generator depending on input
	function random(d) {
		var x = Math.sin(d) * 10000;
		var rand = x - Math.floor(x);
		return (Math.floor(Math.random()*2) == 1 ? 1 : -1) * (scale(rand) + 20); 
	}
	</script>
  </body>
</html>

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

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js to a secure url

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

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js