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="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 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 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 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> |
