Tributary inlet

_.md

[ Launch: Tributary inlet ] 5156030 by hemulin

bar.css

.chart rect {
  fill: steelblue;
  stroke: white;
}

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"bar.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 t = 1297110663, // start time (seconds since epoch)
    v = 70, // start value (subscribers)
    data = d3.range(33).map(next); // starting dataset

function next() {
  return {
    time: ++t,
    value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - 0.5)))
  };
}


var colors = {
	0: "blue",
	1: "green",
	2: "orange",
	3: "grey",
	4: "aliceblue"
}
	

setInterval(function() {
  data.shift();
  data.push(next());
  redraw();
}, 1500);

var w = 20,
    h = 400;

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

var y = d3.scale.linear()
    .domain([0, 100])
    .rangeRound([0, h]);

var chart = d3.select("svg").append("svg")
    .attr("class", "chart")
    .attr("width", w * data.length - 1)
    .attr("height", h);

chart.selectAll("rect")
    .data(data)
  .enter().append("rect")
    .attr("x", function(d, i) { return x(i) - 0.5; })
    .attr("y", function(d) { return h - y(d.value) - 0.5; })
    .attr("width", w)
    .attr("height", function(d) { return y(d.value); });

chart.append("line")
    .attr("x1", 0)
    .attr("x2", w * data.length)
    .attr("y1", h - 0.5)
    .attr("y2", h - 0.5)
    .style("stroke", "#000");

function redraw() {
  var rect = chart.selectAll("rect")
      .data(data, function(d) { return d.time; });

  rect.enter().insert("rect", "line")
      .attr("x", function(d, i) { return x(i + 1) - 0.5; })
      .attr("y", function(d) { return h - y(d.value) - 0.5; })
      .attr("width", w)
      .attr("height", function(d) { return y(d.value); })
  .style("fill", function(d, i) {
		var count = d.value%5;
        console.log("i: "+i, ", count: "+count);
		return colors[count];
       })
    .transition()
      .duration(1000)
      .attr("x", function(d, i) { return x(i) - 0.5; });

  rect.transition()
      .duration(1000)
      .attr("x", function(d, i) { return x(i) - 0.5; });

  rect.exit().transition()
      .duration(1000)
      .attr("x", function(d, i) { return x(i - 1) - 0.5; })
      .remove();

}