title: d3j snake curved path animation
body: <p>I am interested in trying to create a controlled curved path. Is there a way to plot specific coordinates and styling to mimic something like this design. I imagine it as a kind of 2D Donnie Darko time tunnel or slinkey/snake.</p>
  
  <p><a href="https://i.stack.imgur.com/oTTf5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oTTf5.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>update 1 - journey path 1</p>
  
  <p><a href="http://jsfiddle.net/0ht35rpb/241/" rel="noreferrer">http://jsfiddle.net/0ht35rpb/241/</a></p>
  
  <p>update 2 - journey 2
  ** I've given it a softer look with stroke-linecap: round -- <a href="http://jsfiddle.net/0ht35rpb/243/" rel="noreferrer">http://jsfiddle.net/0ht35rpb/243/</a></p>
  
  <p>update 3 - journey 3
  <a href="http://jsfiddle.net/0ht35rpb/245/" rel="noreferrer">http://jsfiddle.net/0ht35rpb/245/</a>
  ^ I've started to create multiple path lines - be good to organise this so its easier to make/control</p>
  
  <p>-- essentially the journey will need to consist of the key gates to pass and corners -- and maybe have different colors/speeds to take on.</p>
  
  <p>update 4- journey 4 - 18/10/2017</p>
  
  <p>I've upgraded this to v4 - and made a getCoord function - so the journeys can be made and ran from a series of ids
  <a href="http://jsfiddle.net/0ht35rpb/257/" rel="noreferrer">http://jsfiddle.net/0ht35rpb/257/</a></p>
  
  <hr>
  
  <p>I've adapted some path animation code - but I am not sure how to control or modify the path to hit specific coordinates. </p>
  
  <p>//animation curved path.
  <a href="http://jsfiddle.net/0ht35rpb/217/" rel="noreferrer">http://jsfiddle.net/0ht35rpb/217/</a></p>
  
  <p>//static curved path
  <a href="http://jsfiddle.net/0ht35rpb/215/" rel="noreferrer">http://jsfiddle.net/0ht35rpb/215/</a></p>
  
  <p>//dot plots
  <a href="http://jsfiddle.net/0ht35rpb/222/" rel="noreferrer">http://jsfiddle.net/0ht35rpb/222/</a></p>
  
  <p>How would I draw a line from do1 to dot3 -- or animate a curved path following multiple dot points?</p>
  
  <pre><code>var width = 600;
  var height = 400;
  
  var bezierLine = d3.svg.line()
      .x(function(d) { return d[0]; })
      .y(function(d) { return d[1]; })
      .interpolate("basis");
  
  var svg = d3.select("#bezier-demo")
      .append("svg")
      .attr("width", width)
      .attr("height", height);
  
  svg.append('path')
      .attr("d", bezierLine([[0, 40], [25, 70], [50, 100], [100, 50], [150, 20], [200, 130], [300, 120]]))
      .attr("stroke", "red")
      .attr("stroke-width", 1)
      .attr("fill", "none")
      .transition()
          .duration(2000)
          .attrTween("stroke-dasharray", function() {
              var len = this.getTotalLength();
              return function(t) { return (d3.interpolateString("0," + len, len + ",0"))(t) };
          });
  </code></pre>