Slinky Chained Transitions

This animation demonstrates the use of d3.active to create chained transitions in D3 4.0.

forked from mbostock's block: Chained Transitions II

If the circles had goey filters applied, it might look even more serpentine...at least more slinkly

research:

visualcinnamon gooey-effect

css-tricks.com/gooey-effect

<!DOCTYPE html>
<meta charset="utf-8">
<style>

circle {
  fill: #000;
}

body{
    width:100%;
    height: 100%;
}

#serpent {
  width:100%;
  height: 100%;
}

svg {
  width:100%;
  height: 100%;
}

</style>
<body>
  
  <div id="serpent">
    <svg id="viewport" width="1000" height="1000">
    	<filter id="fancy-goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
        <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
      </filter>
    </svg>
  </div>
  
  
<script src="//d3js.org/d3.v4.0.0-alpha.28.min.js"></script>
<script>
  
  /*
  
  	https://bimba.info/en/new/2016/04/17/huge-prehistoric-whales-found-in-egyptian-desert
  */

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 1000 - margin.left - margin.right,
    height = 1000 - margin.top - margin.bottom;

var y = d3.scalePoint()
    .domain(d3.range(20))
    .range([0, height]);

var z = d3.scaleLinear()
    .domain([10, 0])
    .range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"])
    .interpolate(d3.interpolateHcl);

var svg = d3.select("#viewport")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  
var defs = svg.append('defs');

// gooey seems to perform better than fancy-goo  
  
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');

svg
.append("g")
		.style("filter", "url(#gooey)")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
 //  svg:ellipse cx="0" cy="0" rx="0" ry="0"
  
var getAngle = function(shipPoint, targetPoint) {

var cx = shipPoint.x;
  var cy = shipPoint.y;
  var ex = targetPoint.x;
  var ey = targetPoint.y;

//var rotate = d3.svg.transform().rotate(-45);
  
var getTransform = function(ship,target){
	var shipX = d3.select(ship).attr("cx");
    					var shipY = d3.select(ship).attr("cy");
    	
    					var shipPoint = {x:shipX,y:shipY};
    					var targetPoint = {x:target.x,y:target.y};
    				  var angle = getAngle(shipPoint, targetPoint);
    					return "translate(" + target.x + "," + target.y + ") rotate(" + angle + ")"
} 
  
function slide() {
  d3.active(this)
  		.attr("cy", end.x)
      .attr("cx", end.y)
  		//.attr("transform", getTransform(this,end) )
    .transition()
      .attr("cx", start.x)
  		.attr("cy", start.y)
  		//.attr("transform", getTransform(this,start) )
    .transition()
      .on("start", slide)
  		.on("end", onSlideComplete);
}

</script>

https://d3js.org/d3.v4.0.0-alpha.28.min.js