Tributary inlet

_.md

[ Launch: Tributary inlet ] 6138315 by enjalot
[ 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},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"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 = 26
var data = [5,2,3,10,2,4,10,4,5,3,1,5,3,6,8,1,4,6,8,9,2,4,1,6,3,5];

var margin = {top: 20, right: 39, bottom: 96, left: 40},
    width = tributary.sw - margin.left - margin.right,
    height = tributary.sh - 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 line = d3.svg.line()
    .x(function (d, i) {
        return x(i);
    })
    .y(function (d, i) {
        return y(d);
    })
    .interpolate("cardinal")




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"));

var path = svg.append("g")
    .attr("clip-path", "url(#clip)")
    .append("path")
    .data([data])
    .attr("class", "line")
    .attr("d", line)
    .attr("fill", "none")
    .attr("stroke", "#000000")


 
function tick() {
  
  console.log(data)

  data.push(7 - Math.random() * 3.92);
  
  path
  .attr("d", line)
  //.transition()
  .attr("transform", null)
  .attr("transform", "translate(" + x(1.5) + ")");
  
  var circles = svg.selectAll("circle")
  .data(data)
  
  circles.enter().append('circle')
  .attr({
    cx: function(d,i) {return x(i)}
  });

  
//circles.exit().remove();
  
circles
//.transition()
.attr("r", 9)
//.attr("cx", function(d,i) {return x(i)})
.attr("cy", y)
.attr("transform", null)
.attr("transform", "translate(" + x(1.5) + ")");
  
  if (data.length > n) 
    data.shift();
}

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