Tributary inlet

_.md

[ Launch: Tributary inlet ] 5008228 by tmcw

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 svg = d3.select('svg');
var g = svg.append('g').attr('transform', 'translate(100,100)');

var pts = [];

d3.range(0, 16).map(function(y) {
  pts.push(d3.range(0, 20).map(function(x) {
    return { x: x, y: y };
  }));
});

var path = g.selectAll('path')
	.data(pts, function(d, i) { return i; })
	.enter()
	.append('path');

var l = d3.svg.line()
  .x(function(d) { return d.x * 20; })
  .y(function(d) { return d.y * 10; });

function jitter() {
  pts.forEach(function(d) {
    d.forEach(function(p) {
      console.log(p);
      p.y += Math.random();
    });
  });
}

window.setInterval(function() 
jitter();
path.attr('d', l);
}, 1000);

path.exit().remove();
  path.attr('d', l);

style.css

path {
  fill:none;
  stroke-width:1;
  stroke:#000;
}