SPodjasek/jsbin.evuhay.html

## jsbin.evuhay.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
  body {font: 10px sans-serif;shape-rendering: crispEdges;}
  .week {}
  .day {fill: #fff;stroke: #ccc;}
  .weekend {fill: #eaeaea;}
  .month {fill: none;stroke: #000;stroke-width: 2px;}
  .selection {fill: #faa;stroke: #f66;opacity:0.5;}

.RdYlGn .q0-11{fill:rgb(165,0,38)}
.RdYlGn .q1-11{fill:rgb(215,48,39)}
.RdYlGn .q2-11{fill:rgb(244,109,67)}
.RdYlGn .q3-11{fill:rgb(253,174,97)}
.RdYlGn .q4-11{fill:rgb(254,224,139)}
.RdYlGn .q5-11{fill:rgb(255,255,191)}
.RdYlGn .q6-11{fill:rgb(217,239,139)}
.RdYlGn .q7-11{fill:rgb(166,217,106)}
.RdYlGn .q8-11{fill:rgb(102,189,99)}
.RdYlGn .q9-11{fill:rgb(26,152,80)}
.RdYlGn .q10-11{fill:rgb(0,104,55)}
</style><title>JS Bin</title>
</head>
<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <h1>Test</h1>
  <script>
var years = [2012,2013],
    cellSize = 17; // cell size

var headerSize = cellSize,
    indentSize = cellSize,
    width = cellSize * 6 * 7,
    height = cellSize * 14;

var dayNum = d3.time.format("%w"),
    dayOfMonth = d3.time.format("%d"),
    month = d3.time.format("%m"),
    day = function(date) { return dayNum(date) == 0 ? 6 : dayNum(date)-1 },
    week = d3.time.format("%W"),
    percent = d3.format(".1%"),
    format = d3.time.format("%Y-%m-%d");

var color = d3.scale.quantize()
    .domain([-.05, .05])
    .range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));

var svg = d3.select("body").selectAll("svg")
    .data(years)
  .enter().append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "RdYlGn")
    .datum(function(d) {return d})
  .append("g")
    .attr("transform", "translate(" + (indentSize) + ","+(headerSize)+")");

svg.append("text")
  .attr("transform", "translate("+(width/2) +",-"+(headerSize/3)+")")
    .style("text-anchor", "middle")
    .style("font-weight", "bold")
    .style("font-size", "14px")
    .text(function(d) { return d; });

var rect = svg.selectAll(".days")
    .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter().append("rect")
    .attr("class", function(d) { return day(d) >= 5 ? "day weekend" : "day" })
    .attr("width", cellSize)
    .attr("height", cellSize)
    .attr("x", function(d) { return day(new Date(d.getFullYear(), d.getMonth(), 1)) * cellSize + dayOfMonth(d) * cellSize; })
    .attr("y", function(d) { return d.getMonth() * (cellSize+0); })
    .datum(format);

var months = svg.selectAll(".months")
    .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter().append("text")
    .attr("x", function(d) { return day(new Date(d.getFullYear(), d.getMonth(), 1)) * cellSize + cellSize/2 })
    .attr("y", function(d) { return d.getMonth() * (cellSize+0) + (cellSize/2); })
    .style("text-anchor", "end")
    .style("dominant-baseline", "central")
    .text(function(d) { return month(d)});
/*
Draw some activity
*/
    var selSize = cellSize * 0.6,
      selPad = (cellSize - selSize)/2;

    var pa = [
      //["2011-11-28","2011-12-25","C01\/2012"],
      //["2011-12-26","2012-01-29","C02\/2012"],
      ["2012-01-30","2012-02-26","C03\/2012"],
      ["2012-02-27","2012-03-25","C04\/2012"],
      ["2012-03-26","2012-04-29","C05\/2012"],
      ["2012-04-30","2012-05-27","C06\/2012"],
      ["2012-05-28","2012-06-24","C07\/2012"],
      ["2012-06-25","2012-07-29","C08\/2012"],
      ["2012-07-30","2012-08-26","C09\/2012"],
      ["2012-08-27","2012-09-30","C10\/2012"],
      ["2012-10-01","2012-10-28","C11\/2012"],
      ["2012-10-29","2012-11-25","C12\/2012"],
      ["2012-11-26","2012-12-30","C01\/2013"],
      ["2012-12-31","2013-01-27","C02\/2013"],
      ["2013-01-28","2013-02-24","C03\/2013"],
      ["2013-02-25","2013-03-31","C04\/2013"],
      ["2013-04-01","2013-04-28","C05\/2013"],
      ["2013-04-29","2013-05-26","C06\/2013"],
      ["2013-05-27","2013-06-30","C07\/2013"],
      ["2013-07-01","2013-07-28","C08\/2013"],
      ["2013-07-29","2013-08-25","C09\/2013"],
      ["2013-08-26","2013-09-29","C10\/2013"],
      ["2013-09-30","2013-10-27","C11\/2013"],
      ["2013-10-28","2013-11-24","C12\/2013"]
    ]

    var periods = [
      //[new Date(2012, 0, 1), new Date(2012, 2, 1)],
      //[new Date(2012, 4, 12), new Date(2012, 6, 2)],
      //[new Date(2012, 11, 12), new Date(2013, 2, 27)],
      //[new Date(2013, 2, 12), new Date(2013, 2, 27)],
      ],
        years = [],
        months = [],
        colors = d3.scale.category20(),
        oneDay = 24*60*60*1000;

    for(var i = pa.length; i--;) {
      var start = new Date(pa[i][0]);
      var end = new Date(pa[i][1]);
      //console.log(pa[i][0] + " - " + pa[i][1]);
      //console.log(start.toISOString() + " - " + end.toISOString());
      periods.push([start, end, colors(i)]);
    }

      for(var pi = periods.length; pi--;) {
        var from = periods[pi][0],
            to = periods[pi][1],
            point = new Date(from.getFullYear(), from.getMonth(), 1);

        for(;point.getTime() <= to.getTime(); point = new Date(point.getFullYear(), point.getMonth()+1, 1)) {
          var first = point < from ? from : point,
            last = new Date(point.getFullYear(), point.getMonth()+1, 0);
          //console.log(point);

          if(last > to) last = to;

          var days = Math.round(Math.abs((first.getTime() - last.getTime())/(oneDay)))+1,
            data = {
              //from: first,
              //last: last,
              color: periods[pi][2],
              year: first.getFullYear(),
              month: first.getMonth(),
              day: first.getDate(),
              days: days
            };

          //console.log(format(first) + " -> " + format(last)+": " + days);

          if(years.indexOf(data.year) == -1) years.push(data.year);
          months.push(data);
        }
      //console.log(months);
      }
    console.log(months);

    /*
     * Process all periods
     */
    for(var yi = years.length; yi--; ) {
      var year = years[yi];
      console.log("Processing: " + year);

      var selection = d3.select("body").selectAll("svg")
        .filter(function(d,i) {
            return year == d;
        })
        .select("g")
        .selectAll(".selection");
      //console.log(selection);


      selection.data(months.filter( function(d) { return d.year == year ? d : null}))
        .enter().append("rect")
        .attr("class", "selection")
        .attr("style", function(d) { return d.color != undefined ? "fill:" + d.color + ";stroke:" + d.color : "" })
        .attr("width", function(d) { return d.days * cellSize - selPad*2; })
        .attr("height", selSize)
        .attr("x", function(d) { return day(new Date(d.year, d.month, 1)) * cellSize + d.day * cellSize + selPad; })
        .attr("y", function(d) { return d.month * cellSize + selPad; });
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<style>
	body {font: 10px sans-serif;shape-rendering: crispEdges;}
	.week {}
	.day {fill: #fff;stroke: #ccc;}
	.weekend {fill: #eaeaea;}
	.month {fill: none;stroke: #000;stroke-width: 2px;}
	.selection {fill: #faa;stroke: #f66;opacity:0.5;}

	.RdYlGn .q0-11{fill:rgb(165,0,38)}
	.RdYlGn .q1-11{fill:rgb(215,48,39)}
	.RdYlGn .q2-11{fill:rgb(244,109,67)}
	.RdYlGn .q3-11{fill:rgb(253,174,97)}
	.RdYlGn .q4-11{fill:rgb(254,224,139)}
	.RdYlGn .q5-11{fill:rgb(255,255,191)}
	.RdYlGn .q6-11{fill:rgb(217,239,139)}
	.RdYlGn .q7-11{fill:rgb(166,217,106)}
	.RdYlGn .q8-11{fill:rgb(102,189,99)}
	.RdYlGn .q9-11{fill:rgb(26,152,80)}
	.RdYlGn .q10-11{fill:rgb(0,104,55)}
	</style><title>JS Bin</title>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<h1>Test</h1>
	<script>
	var years = [2012,2013],
	cellSize = 17; // cell size

	var headerSize = cellSize,
	indentSize = cellSize,
	width = cellSize * 6 * 7,
	height = cellSize * 14;

	var dayNum = d3.time.format("%w"),
	dayOfMonth = d3.time.format("%d"),
	month = d3.time.format("%m"),
	day = function(date) { return dayNum(date) == 0 ? 6 : dayNum(date)-1 },
	week = d3.time.format("%W"),
	percent = d3.format(".1%"),
	format = d3.time.format("%Y-%m-%d");

	var color = d3.scale.quantize()
	.domain([-.05, .05])
	.range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));

	var svg = d3.select("body").selectAll("svg")
	.data(years)
	.enter().append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("class", "RdYlGn")
	.datum(function(d) {return d})
	.append("g")
	.attr("transform", "translate(" + (indentSize) + ","+(headerSize)+")");

	svg.append("text")
	.attr("transform", "translate("+(width/2) +",-"+(headerSize/3)+")")
	.style("text-anchor", "middle")
	.style("font-weight", "bold")
	.style("font-size", "14px")
	.text(function(d) { return d; });

	var rect = svg.selectAll(".days")
	.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
	.enter().append("rect")
	.attr("class", function(d) { return day(d) >= 5 ? "day weekend" : "day" })
	.attr("width", cellSize)
	.attr("height", cellSize)
	.attr("x", function(d) { return day(new Date(d.getFullYear(), d.getMonth(), 1)) * cellSize + dayOfMonth(d) * cellSize; })
	.attr("y", function(d) { return d.getMonth() * (cellSize+0); })
	.datum(format);

	var months = svg.selectAll(".months")
	.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
	.enter().append("text")
	.attr("x", function(d) { return day(new Date(d.getFullYear(), d.getMonth(), 1)) * cellSize + cellSize/2 })
	.attr("y", function(d) { return d.getMonth() * (cellSize+0) + (cellSize/2); })
	.style("text-anchor", "end")
	.style("dominant-baseline", "central")
	.text(function(d) { return month(d)});
	/*
	Draw some activity
	*/
	var selSize = cellSize * 0.6,
	selPad = (cellSize - selSize)/2;

	var pa = [
	//["2011-11-28","2011-12-25","C01\/2012"],
	//["2011-12-26","2012-01-29","C02\/2012"],
	["2012-01-30","2012-02-26","C03\/2012"],
	["2012-02-27","2012-03-25","C04\/2012"],
	["2012-03-26","2012-04-29","C05\/2012"],
	["2012-04-30","2012-05-27","C06\/2012"],
	["2012-05-28","2012-06-24","C07\/2012"],
	["2012-06-25","2012-07-29","C08\/2012"],
	["2012-07-30","2012-08-26","C09\/2012"],
	["2012-08-27","2012-09-30","C10\/2012"],
	["2012-10-01","2012-10-28","C11\/2012"],
	["2012-10-29","2012-11-25","C12\/2012"],
	["2012-11-26","2012-12-30","C01\/2013"],
	["2012-12-31","2013-01-27","C02\/2013"],
	["2013-01-28","2013-02-24","C03\/2013"],
	["2013-02-25","2013-03-31","C04\/2013"],
	["2013-04-01","2013-04-28","C05\/2013"],
	["2013-04-29","2013-05-26","C06\/2013"],
	["2013-05-27","2013-06-30","C07\/2013"],
	["2013-07-01","2013-07-28","C08\/2013"],
	["2013-07-29","2013-08-25","C09\/2013"],
	["2013-08-26","2013-09-29","C10\/2013"],
	["2013-09-30","2013-10-27","C11\/2013"],
	["2013-10-28","2013-11-24","C12\/2013"]
	]

	var periods = [
	//[new Date(2012, 0, 1), new Date(2012, 2, 1)],
	//[new Date(2012, 4, 12), new Date(2012, 6, 2)],
	//[new Date(2012, 11, 12), new Date(2013, 2, 27)],
	//[new Date(2013, 2, 12), new Date(2013, 2, 27)],
	],
	years = [],
	months = [],
	colors = d3.scale.category20(),
	oneDay = 246060*1000;

	for(var i = pa.length; i--;) {
	var start = new Date(pa[i][0]);
	var end = new Date(pa[i][1]);
	//console.log(pa[i][0] + " - " + pa[i][1]);
	//console.log(start.toISOString() + " - " + end.toISOString());
	periods.push([start, end, colors(i)]);
	}

	for(var pi = periods.length; pi--;) {
	var from = periods[pi][0],
	to = periods[pi][1],
	point = new Date(from.getFullYear(), from.getMonth(), 1);

	for(;point.getTime() <= to.getTime(); point = new Date(point.getFullYear(), point.getMonth()+1, 1)) {
	var first = point < from ? from : point,
	last = new Date(point.getFullYear(), point.getMonth()+1, 0);
	//console.log(point);

	if(last > to) last = to;

	var days = Math.round(Math.abs((first.getTime() - last.getTime())/(oneDay)))+1,
	data = {
	//from: first,
	//last: last,
	color: periods[pi][2],
	year: first.getFullYear(),
	month: first.getMonth(),
	day: first.getDate(),
	days: days
	};

	//console.log(format(first) + " -> " + format(last)+": " + days);

	if(years.indexOf(data.year) == -1) years.push(data.year);
	months.push(data);
	}
	//console.log(months);
	}
	console.log(months);

	/*
	* Process all periods
	*/
	for(var yi = years.length; yi--; ) {
	var year = years[yi];
	console.log("Processing: " + year);

	var selection = d3.select("body").selectAll("svg")
	.filter(function(d,i) {
	return year == d;
	})
	.select("g")
	.selectAll(".selection");
	//console.log(selection);


	selection.data(months.filter( function(d) { return d.year == year ? d : null}))
	.enter().append("rect")
	.attr("class", "selection")
	.attr("style", function(d) { return d.color != undefined ? "fill:" + d.color + ";stroke:" + d.color : "" })
	.attr("width", function(d) { return d.days * cellSize - selPad*2; })
	.attr("height", selSize)
	.attr("x", function(d) { return day(new Date(d.year, d.month, 1)) * cellSize + d.day * cellSize + selPad; })
	.attr("y", function(d) { return d.month * cellSize + selPad; });
	}
	</script>
	</body>
	</html>