davo/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
	<title>Gooey effect - Line</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 margin = {top: 30, right: 30, bottom: 30, left: 30};
		width = Math.min(300, $(".chart").width() - margin.left - margin.right);

	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 xScale = d3.scale.linear()
		.domain([0, 1])
		.range([0, width]);

	//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) + "," +(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('feBlend')
		.attr('in','SourceGraphic')
		.attr('in2','gooey');

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

	//Create a circle that will move out of the center circle
	svg.append("circle")
			.attr("class", "flyCircle")
			.attr("cx", 0)
			.attr("cy", 0)
			.attr("r", 15)
			.style("fill", "#81BC00")
			.each(update);

	//Continuously keep the circle flying out
	function update() {
			var circle = d3.selectAll(".flyCircle");

			(function repeat() {
				circle
					.attr("cx", 0)
					.attr("r", 15)
					.transition().duration(1500)
						.attr("cx", xScale(Math.random()))
					.transition().duration(1000)
						.attr("r", 0)
					.each("end", repeat);
			})();
	}//update

	</script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
	<title>Gooey effect - Line</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 margin = {top: 30, right: 30, bottom: 30, left: 30};
	width = Math.min(300, $(".chart").width() - margin.left - margin.right);

	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 xScale = d3.scale.linear()
	.domain([0, 1])
	.range([0, width]);

	//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) + "," +(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('feBlend')
	.attr('in','SourceGraphic')
	.attr('in2','gooey');

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

	//Create a circle that will move out of the center circle
	svg.append("circle")
	.attr("class", "flyCircle")
	.attr("cx", 0)
	.attr("cy", 0)
	.attr("r", 15)
	.style("fill", "#81BC00")
	.each(update);

	//Continuously keep the circle flying out
	function update() {
	var circle = d3.selectAll(".flyCircle");

	(function repeat() {
	circle
	.attr("cx", 0)
	.attr("r", 15)
	.transition().duration(1500)
	.attr("cx", xScale(Math.random()))
	.transition().duration(1000)
	.attr("r", 0)
	.each("end", repeat);
	})();
	}//update

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