Tributary inlet

_.md

[ Launch: Tributary inlet ] 5905273 by trinary

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var data = [];

var g = d3.select("svg").append("g")
g.attr("transform","translate("+ [tributary.sw/2, tributary.sh/2] + ")");


function draw() {
  data.push([(Math.random() * 140)- 70, (Math.random() * 140)- 70]);
  g.selectAll(".edge").data(data).enter()
      .append("path")
      .classed("edge",true)
  .transition()
  .duration(200)
  .attr("d", function(d,i) {
    var p0 = data[i-2] || [0,0],
    p1 = data[i-1] || [5,5],
    p2 = data[i];
    return "M"+ p0 + " l " + p1 + " l " + p2 + " Z";
  });
}

draw();
draw();
draw();
draw();
draw();
draw();
draw();

style.css

.edge {
  fill: none;
  stroke: grey;
  stroke-width: 1px;
}