chitacan · August 29, 2015 14:22
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
 	<title>Gooey Effect</title>

 	<script src="http://d3js.org/d3.v3.min.js"></script>
 	<!-- jQuery -->
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 	<!-- Bootstrap 3 -->
 	<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>

 	<div id="cont" class="container-fluid">
 		<div class="row text-center">				
 			<div class="col-sm-12 column text-center">
 				<div class="chart"></div>
 			</div>
 		</div>
 	</div>
 	
 	<script>
 	
 	////////////////////////////////////////////////////////////// 
 	//////////////////////// Initiate //////////////////////////// 
 	////////////////////////////////////////////////////////////// 

 	var w = window,
 		d = document,
 		e = d.documentElement,
 		g = d.getElementsByTagName('body')[0],
 		x = w.innerWidth || e.clientWidth || g.clientWidth,
 		totalHeight = w.innerHeight || e.clientHeight || g.clientHeight;
 	
 	var margin = {top: 30, right: 30, bottom: 30, left: 30};
 		width = Math.min(500, (totalHeight - 20), $(".chart").width() - margin.left - margin.right);
 		height = width;
 		
 	//Create scale
 	var xScale = d3.scale.linear()
 		.domain([-1.5, 1.5])
 		.range([-width/2, width/2]);
 	
 	//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(" + (width/2 + margin.left) + "," +(height/2 +  margin.top) + ")");

 	//SVG filter for the gooey effect
 	//Code taken from http://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 18 -7')
 		.attr('result','gooey');
 	filter.append('feComposite')
 		.attr('in','SourceGraphic')
 		.attr('in2','gooey')
 		.attr('operator','atop');	
 	
 	//Append circle at center
 	svg.append("circle")
 			.attr("class", "centerCircle")
 			.attr("cx", 0)
 			.attr("cy", 0)
 			.attr("r", 20)
 			.style("fill", "#81BC00");
 	
 	//Create the circles that will move out and in the center circle
 	var steps = 15;	
 	svg.selectAll(".flyCircle")
 		.data(d3.range(steps).map(function(num) {return (num/steps)*(2*Math.PI); }))
 		.enter().append("circle")
 			.attr("class", "flyCircle")
 			.attr("cx", 0)
 			.attr("cy", 0)
 			.attr("r", 15)
 			.style("fill", "#81BC00")
 			.call(update);

 	//Continuously moves the circles outward and inward
 	function update() {
 			var circle = d3.selectAll(".flyCircle");
 			var dur = 1500,
 				del = 500;
 				
 			(function repeat() {
 				circle
 					.transition("outward").duration(dur).delay(function(d,i) { return i*del; })
 						.attr("cy", function(d) { return xScale(Math.sin(d)); })
 						.attr("cx", function(d) { return xScale(Math.cos(d)); })
 					.transition("inward").duration(dur).delay(function(d,i) { return steps*del + i*del; })
 						.attr("cx", 0)
 						.attr("cy", 0)
 					.call(endall, repeat);			
 			})();
 	}//update

 	//Taken from https://groups.google.com/forum/#!msg/d3-js/WC_7Xi6VV50/j1HK0vIWI-EJ
 	//Calls a function only after the total transition ends
 	function endall(transition, callback) { 
 		var n = 0; 
 		transition 
 			.each(function() { ++n; }) 
 			.each("end", function() { if (!--n) callback.apply(this, arguments); }); 
 	}//endall
 	
 	</script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
	<title>Gooey Effect</title>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<!-- jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- Bootstrap 3 -->
	<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>

	<div id="cont" class="container-fluid">
	<div class="row text-center">
	<div class="col-sm-12 column text-center">
	<div class="chart"></div>
	</div>
	</div>
	</div>

	<script>

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

	var w = window,
	d = document,
	e = d.documentElement,
	g = d.getElementsByTagName('body')[0],
	x = w.innerWidth \|\| e.clientWidth \|\| g.clientWidth,
	totalHeight = w.innerHeight \|\| e.clientHeight \|\| g.clientHeight;

	var margin = {top: 30, right: 30, bottom: 30, left: 30};
	width = Math.min(500, (totalHeight - 20), $(".chart").width() - margin.left - margin.right);
	height = width;

	//Create scale
	var xScale = d3.scale.linear()
	.domain([-1.5, 1.5])
	.range([-width/2, width/2]);

	//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(" + (width/2 + margin.left) + "," +(height/2 + margin.top) + ")");

	//SVG filter for the gooey effect
	//Code taken from http://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 18 -7')
	.attr('result','gooey');
	filter.append('feComposite')
	.attr('in','SourceGraphic')
	.attr('in2','gooey')
	.attr('operator','atop');

	//Append circle at center
	svg.append("circle")
	.attr("class", "centerCircle")
	.attr("cx", 0)
	.attr("cy", 0)
	.attr("r", 20)
	.style("fill", "#81BC00");

	//Create the circles that will move out and in the center circle
	var steps = 15;
	svg.selectAll(".flyCircle")
	.data(d3.range(steps).map(function(num) {return (num/steps)(2Math.PI); }))
	.enter().append("circle")
	.attr("class", "flyCircle")
	.attr("cx", 0)
	.attr("cy", 0)
	.attr("r", 15)
	.style("fill", "#81BC00")
	.call(update);

	//Continuously moves the circles outward and inward
	function update() {
	var circle = d3.selectAll(".flyCircle");
	var dur = 1500,
	del = 500;

	(function repeat() {
	circle
	.transition("outward").duration(dur).delay(function(d,i) { return i*del; })
	.attr("cy", function(d) { return xScale(Math.sin(d)); })
	.attr("cx", function(d) { return xScale(Math.cos(d)); })
	.transition("inward").duration(dur).delay(function(d,i) { return stepsdel + idel; })
	.attr("cx", 0)
	.attr("cy", 0)
	.call(endall, repeat);
	})();
	}//update

	//Taken from https://groups.google.com/forum/#!msg/d3-js/WC_7Xi6VV50/j1HK0vIWI-EJ
	//Calls a function only after the total transition ends
	function endall(transition, callback) {
	var n = 0;
	transition
	.each(function() { ++n; })
	.each("end", function() { if (!--n) callback.apply(this, arguments); });
	}//endall

	</script>
	</body>
	</html>