just another inlet to tributary

_.md

[ Launch Inlet ]
Gist #3971578 [ Launch Inlet ]
Gist #3971554 [ Launch Inlet ]

config.json

{"endpoint":"","display":"div","public":true,"require":[],"tab":"edit","display_percent":0.46929824561403466,"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 hourwidth = 29;
var hourheight = 14;


var svg = d3.select("svg")
  .append("svg:g")

var chart = d3.select("#display").append("div").style("width", 462+"px")
    
var start = new Date(2012, 0, 1);
var end = new Date(2012, 0, 2);
hourscale = d3.time.hours(start, end);

hour12 = d3.time.format("%I");
hour24 = d3.time.format("%H");
hourlabel = d3.time.format("%I%p");

var hours = chart.selectAll(".hour")
  .data(hourscale)
  .enter()
  .append("div")
  .style({
 	"display": "inline-block",
    "margin-left": "10px",
    "font-size": 11+"px"
  })
  .attr("class", "hour")
  .text(function(d,i){
   	return hourlabel(d) 
  });


hours.append("text")
  .attr({
  	fill: "white",
    y: 10,
    x: 5,
    "font-size": 8
  })
  

style.css

.hour {  
  background-color: #CCC;
    border-radius: 3px;
  padding: 4px 3px;
  margin: 2px 2px;
}