Skip to content

Instantly share code, notes, and snippets.

@SPodjasek

SPodjasek/jsbin.evuhay.html

Created December 26, 2013 20:53
Show Gist options
  • Save SPodjasek/8138579 to your computer and use it in GitHub Desktop.
Save SPodjasek/8138579 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment