Tributary inlet

_.md

[ Launch: Tributary inlet ] 6137218 by killfill

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"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/BqEpVZG.png"}

inlet.js

var n = 10
var data = [5,2,3];

var margin = {top: 20, right: 10, bottom: 20, left: 40},
    width = 533 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

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

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


var svg = d3.select("svg")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg.axis().scale(x).orient("bottom"));

svg.append("g")
    .attr("class", "y axis")
    .call(d3.svg.axis().scale(y).orient("left"));

 
function tick() {
  
  console.log(data)
  if (data.length > 9) 
    data.shift();
  data.push(7);
  
var circles = svg.selectAll("circle")
	.data(data)

circles.enter().append('circle')
	.attr({
	  cx: function(d,i) {return x(i)},
	  cy: y,
	  r: 9
	});
circles.exit().remove();
  
circles.transition()
	.attr("transform", "translate(" + x(-0.5) + ")");
  
  
}

//huh?
var t = new Date().getTime()
tributary.run = function(g, ts) {
  var now = new Date().getTime();
  if (now - t < 1000) return;
  t = now; 
  tick();
}