d3 iso calender heatmap
calender heatmap starting with monday
HTML
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
CSS
.day{
stroke:black;
fill:white
}
.month{
fill:none;
stroke:blue;
}
JavaScript
var year = 2016;
var width = 960,
height = 136,
cellSize = 17;
var percent = d3.format(".1%"),
format = d3.time.format("%Y-%m-%d");
var weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var svg = d3.select("body").selectAll("svg")
.data(d3.range(year, year + 2))
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "RdYlGn")
.append("g")
.attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
var rect = svg.selectAll(".day")
.data(function(d) {
return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));
})
.enter().append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function(d) {
return d3.time.mondayOfYear(d) * cellSize;
})
.attr("y", function(d) {
return ((d.getDay() + 6) % 7) * cellSize;
})
.datum(format);
rect.append("title")
.text(function(d) {
return d;
});
svg.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);
function monthPath(t0) {
var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
d0 = ((t0.getDay() + 6) % 7),
w0 = d3.time.mondayOfYear(t0),
d1 = ((t1.getDay() + 6) % 7),
w1 = d3.time.mondayOfYear(t1);
var data = [t0.getMonth()];
svg.append('g')
.data(data)
.attr('class', 'titles-month')
.style('fill', '#5bc0de')
.attr('transform', function(d, i) {
return 'translate(' + ((w0) * cellSize + (w1) * cellSize) / 2 + ',-5)';
})
.on("mouseover", function() {
})
.on("mouseout", function() {
})
.append('text')
.style('text-anchor', 'start')
.text(month[t0.getMonth()]);
var path...