Old school D3 from simpler times

All examples By author By category About

kforeman

Full window Github gist

flubber tests

Built with blockbuilder.org

forked from anonymous's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/flubber"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>

var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

function circlePath(x, y, radius) {
        var l = `${x - radius},${y}`,
            r = `${x + radius},${y}`,
            pre = `A${radius},${radius},0,1,1`;
        return `M${l}${pre},${r}${pre},${l}Z`;
    }
    
    var littleCircles = d3.range(3).map(function(d) { 
      return circlePath((d+1)*20, (d+1)*20, 10)
    })
    
    svg.selectAll(".little-circle")
      .data(littleCircles)
      .enter().append("path")
      .classed("little-circle", true)
      .attr("d", function(d) { return d; })
      .style("fill", "black");

var bigCircle = circlePath(200, 200, 50);
    
    svg.append("path")
    	.classed("big-circle", true)
      .attr("d", bigCircle);
    
    var inward = flubber.combine(littleCircles, bigCircle, 
                                 {single: true}),
        outward = flubber.separate(bigCircle, littleCircles,
                                  {single: true});
    
    var path = svg.append("path")
    	.attr("d", bigCircle)
    	.style("fill", "steelblue");
    
    function morph() {
      path
        .transition().delay(1000).duration(2000)
        .attrTween("d", function() {
          return outward;
        })
        .transition().delay(1000).duration(2000)
        .attrTween("d", function() {
          return inward;
        })
      	.on("end", morph)
    }
    morph();

</script>
</body>

https://d3js.org/d3.v4.min.js

https://unpkg.com/flubber