D3 Examples - Blocks upload calendar

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font: 10px sans-serif;
}
​
.day {
  fill: #fff;
  stroke: #ccc;
  stroke-width: .5px;
}
​
.month {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
}
​
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
​
var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = 960 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;
​
var years = d3.range(2010, 2016).reverse(),
    sizeByYear = height/years.length+1;
    sizeByDay = d3.min([sizeByYear/8,width/54]);
​
var day = function(d) { return (d.getDay() + 6) % 7; },
    week = d3.time.format("%W"),
    date = d3.time.format("%b %d"),
    parseDate = d3.time.format("%Y-%m-%d").parse;
​
var color = d3.scale.linear()
    .range(["#f7fcb9","#006837"]);
​
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
var year = svg.selectAll(".year")
    .data(years)
  .enter().append("g")
    .attr("class", "year")
    .attr("transform", function(d,i) { return "translate(0," + i * sizeByYear + ")"; });
​
year.append("text")
    .attr("class", "yearTitle")
    .attr("transform", "translate(-6," + sizeByDay * 3.5 + ")rotate(-90)")
    .attr("text-anchor", "middle")
    .attr("font-weight", "bold")
    .text(function(d) { return d; });
​
var rect = year.selectAll(".day")
    .data(function(d) { return (d === 2015) ? d3.time.days(new Date(d, 0, 1), new Date(d , 10, 6)) : d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter().append("rect")
    .attr("class", "day")
    .attr("width", sizeByDay)
    .attr("height", sizeByDay)
    .attr("x", function(d) { return week(d) * sizeByDay; })
    .attr("y", function(d) { return day(d) * sizeByDay; });
​
year.selectAll(".month")
    .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter().append("path")
    .attr("class", "month")
    .attr("d", monthPath);
​
rect.append("title")
    .text(function(d) { return date(d); });
​
d3.json("data.json", function(data) {
  
  var nested_data = d3.nest()
    .key(function(d) { return parseDate(d.created_at.split("T")[0]); })
    .rollup(function(leaves) { return leaves.length; })
    .map(data);
​
  color.domain(d3.extent(d3.values(nested_data)));
​
  rect.filter(function(d){ return d in nested_data; })
      .style("fill", function(d){ return color(nested_data[d]); })
    .select("title")
      .text(function(d){ return date(d) + ": " + nested_data[d]; });
​
});
​
function monthPath(t0) {
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
      d0 = +day(t0), w0 = +week(t0),
      d1 = +day(t1), w1 = +week(t1);
  return "M" + (w0 + 1) * sizeByDay + "," + d0 * sizeByDay
      + "H" + w0 * sizeByDay + "V" + 7 * sizeByDay
      + "H" + w1 * sizeByDay + "V" + (d1 + 1) * sizeByDay
      + "H" + (w1 + 1) * sizeByDay + "V" + 0
      + "H" + (w0 + 1) * sizeByDay + "Z";
};
​
d3.select(self.frameElement).style("height", (height + margin.top + margin.bottom) + "px");
​
</script>
    