just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":652,"height":647,"hide":false},"endpoint":"tributary"}

inlet.js

var data = [
  {x: 0, y:0},
  {x: 62, y:66},
  {x: 259, y:115},
  {x: 339, y:10},
  {x: 400, y:30},
  ]
  
var line = d3.svg.line()
  .x(function(d) {
  	return d.x;
  })
  .y(function(d) {
    return d.y;
  });
  
var svg = d3.select("svg");
  
var group = svg.append("g")
  .attr({
  transform: "translate(" + [60, 150] + ")"
  })
  
var path = group.append("path")
  .attr({
  d: line(data),
  fill: "none",
  stroke: "#000"
  })
    
var len = path.node().getTotalLength();
var offset = 0;

path.attr({
  "stroke-dasharray": len + " " + len,
  "stroke-dashoffset": offset
})


var circle = group.append("circle")
  .attr({
    r: 10,
    transform: function() {
      var p = path.node().getPointAtLength(len - offset)
      return "translate(" + [p.x, p.y] + ")";
    }
  })
    

    svg.on("click", function() {
      var dur = 2000;
      path.transition()
        .duration(dur)
        .ease("bounce")
        .attrTween("stroke-dashoffset", function(d,i) {
          return function(t) {
	          return len * (1-t);
          }
        })
      circle.transition()
        .duration(dur)
                .ease("bounce")
        .attrTween("transform", function(d,i) {
          return function(t) {
            var p = path.node().getPointAtLength(len * t)
            return "translate(" + [p.x, p.y] + ")";
          }
        })
    })
    
    
//more info on this
//http://bl.ocks.org/1313857
//http://www.carto.net/svg/samples/animated_bustrack.shtml
    
    

inlet.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="1439" height="774"><g transform="translate(60,150)"><path d="M0,0L62,66L259,115L339,10L400,30" fill="none" stroke="#000" stroke-dasharray="489.7550964355469 489.7550964355469" stroke-dashoffset="0"></path><circle r="10" transform="translate(400,30)"></circle></g></svg>