Simple Spline from Data

_.md

[ Launch: Simple Spline from Data ] 67318ab15a740442f97f by meveritt
[ Launch: Simple Spline from Data ] 52a5d369219276b70e97 by lordenzo

config.json

{"description":"Simple Spline from Data","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}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}

inlet.js

var svg = d3.select('svg')

var data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9];

var width = tributary.sw;
var height = 100;

var x = d3.scale.linear()
	.domain([0, 48])
	.range([-15, width]);

var y = d3.scale.linear()
	.domain([0, 10])
	.range([0, height]);

var line = d3.svg.line()
	.x(function(d,i) { return x(i) })
	.y(function(d,i) { return y(d) })
	.interpolate('basis');


var g = svg.append('g')
	.attr('transform', 'translate(0, 250)');

g.append('path').attr('d', line(data))
.style({
  fill: 'none',
  stroke: 'steelblue',
  'stroke-width': 1
});

function redrawWithAnimation() {
	g.selectAll('path')
    .data([data])
    .attr('transform', 'translate(' + x(1) + ')')
    .attr('d', line)
    .transition()
    .ease('linear')
    .duration(1000)
    .attr('transform', 'translate(' + x(0) + ')')
}


setInterval(function() {
  var v = data.shift();
  data.push(v);
  redrawWithAnimation();
}, 1000);