Another Inlet

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"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 w = 500;
var h = 500;
var margin = 15;

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


var svg = d3.select(".tributary_svg")
    .attr("width",w)
    .attr("height",h);

var data = [
  {"itemid":"25540","clock":"1354050342","value":"0","ns":"354125162"},
  {"itemid":"25540","clock":"1354050549","value":"1","ns":"833123891"},
  {"itemid":"25540","clock":"1354050751","value":"0","ns":"293377496"},
  {"itemid":"25540","clock":"1354050932","value":"1","ns":"286554481"},
  {"itemid":"25540","clock":"1354051257","value":"0","ns":"351335487"},
  {"itemid":"25540","clock":"1354051335","value":"1","ns":"205675900"},
  {"itemid":"25540","clock":"1354051506","value":"0","ns":"567430141"},
  {"itemid":"25540","clock":"1354051567","value":"1","ns":"166687749"},
  {"itemid":"25540","clock":"1354051611","value":"0","ns":"712844317"},
  {"itemid":"25540","clock":"1354051695","value":"1","ns":"587720770"}
];

var time_extent = d3.extent(data,function(d){return d.clock;});

y.domain(time_extent);
x.domain(time_extent);
  
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x",function(d,i){
    console.log(d,i);
    return margin + x(d.clock);
  })
  .attr("y",function(d,i){
//    return margin + h - y(d.clock);
	return margin;
  })
  .attr("width",function(d,i){
    var next = data[i+1];
    if (!next){
      next = data[i];
    }
    return (x(next.clock) - x(d.clock));
  })
  .attr("height",function(d,i){
//    return y(d.clock);
    return h;
  })
  .attr("fill",function(d,i){
    if(d.value == "1"){
      return "rgba(0,128,0,1)"
    }else{
      return "red"
    }
  });

svg.selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .text(function(d,i){
    var next = data[i+1];
    if (!next){
      next = data[i];
    }
    return next.clock - d.clock;
  })
  .attr("x",function(d,i){
	var next = data[i+1];
    if (!next){
      next = data[i];
    }
    return margin + x(d.clock) + (x(next.clock) - x(d.clock))/2;

  })
  .attr("y",function(d,i){
	var next = data[i+1];
    if (!next){
      next = data[i];
    }
    return h - ((y(next.clock) - y(d.clock)));
  })
  .attr("fill",function(d,i){
    if(d.value == 1){
      return "white";
    }else{
      return "black";
    }
  })