Tributary inlet

_.md

[ Launch: Tributary inlet ] 6349133 by joannecheng

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"style.css":{"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,"thumbnail":"http://i.imgur.com/SSWu2VM.png"}

inlet.js

var svg = d3.select('svg');
var g = svg.append('g')
	.attr('width', 500)
	.attr('height', 500)

var points = d3.range(1, 5).map(function(i) {
  return [i * 500 / 5, 50 + Math.random() * (500 - 100)];
});

var points = d3.range(1,5).map(function(i) {
	return [i*50, 50 + Math.random()*100];
});

var line = d3.svg.line();

svg.append('path')
	.attr('class', 'line')
	.datum(points)
	.call(redraw)

function redraw() {
  	line.interpolate('basis');
    svg.select("path").attr("d", line);
}

style.css

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

body {
  font: 13px sans-serif;
  position: relative;
  width: 960px;
  height: 500px;
}