just another inlet to tributary

_.md

[ Launch Inlet ]

config.json

{"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 x_size = 150,
    y_size = 120,
    x_padding = 10,
    y_padding = 10;

var svg = d3.select("svg");
var calendar = {
  year: 2012,
  month: 10,
  days: [
    {
      date: 25,
      events: [
        "Bevin's parents arrive"
      ]
    }
  ]
};
var day = 24 * 3600 * 1000;
var d = new Date(calendar.year, calendar.month-1, 1);
var days = [];
var row = 0;
var firstDay = d.getDay();
for (; d.getMonth() == (calendar.month - 1); d.setTime(d.getTime() + day)) {
  days.push({
    date: new Date(d.getTime()),
    row: Math.floor((d.getDate() - 1 + firstDay) / 7)
  });
}

var groups = svg.selectAll("g.day")
    .data(days)
  .enter()
    .append("g")
    .classed("day", true)
    .attr("transform", function(d, i) {
      var x = d.date.getDay() * (x_size + x_padding) + 10;
      var y = d.row * (y_size + y_padding) + 10;
      return "translate(" + [x, y] + ")";
    });

groups.append("rect")
    .attr({
      width: x_size,
      height: y_size,
      rx: 1,
    });
groups.append("text")
  .text(function(d, i) {
    return d.date.getDate();
  })
  .attr("y", "1em")
  .attr("x", 2);

style.css

g.day rect {
  stroke: grey;
  stroke-width: 1;
  fill: none;
}

g.day text {
  font-size: 12pt;
  fill: grey;
  stroke: none;
}