This example is from my blog on how to Create a Gooey effect during a transition and shows a gooey circle appearing from a bigger stationary circle
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 - 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> |
