D3 Examples - Gooey Effect

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
    <title>Gooey Effect</title>
​
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <!-- jQuery -->
    <script src="https://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 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 18 -7')
        .attr('result','gooey');
    filter.append('feComposite')
        .attr('in','SourceGraphic')
        .attr('in2','gooey')
        .attr('operator','atop');   
    
  var data = [{x: 0, y: 0, dx: (Math.random() * 10 - 5), dy: (Math.random() * 10 - 5)}]
  console.log(data);
    
    //Append circle at center
    var circles = svg.selectAll("circle").data(data)
    .enter().append("circle")
            .attr("class", "centerCircle")
            .attr("cx", 0)
            .attr("cy", 0)
            .attr("r", 50)
            .style("fill", "#81BC00");
    
  var force = d3.layout.force()
    .nodes(circles)
    .on("tick", function() {
      //console.log("tick")
      circles.attr("cx", function(d) { return d.x + d.dx; })
            .attr("cy", function(d) { return d.y + d.dy; });
    })
    .start()
    
    </script>
  </body>
</html>
    