Skip to content

Instantly share code, notes, and snippets.

@ArvinH
Last active December 12, 2017 14:30
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ArvinH/56909246bd584743fa5ee7ad148ad1ac to your computer and use it in GitHub Desktop.
Google_Calendar_D3
date colorIdNum
2017-01-30 1
2017-01-31 1
2017-02-01 1
2017-02-02 1
2017-02-04 1
2017-02-05 1
2017-02-06 1
2017-02-07 1
2017-02-09 1
2017-02-10 2
2017-02-13 1
2017-02-14 1
2017-02-16 1
2017-02-17 1
2017-02-19 1
2017-02-20 1
2017-02-25 1
2017-03-01 1
2017-03-02 1
2017-03-05 1
2017-03-07 1
2017-03-08 1
2017-03-09 1
2017-03-12 1
2017-03-13 1
2017-03-15 1
2017-03-17 1
2017-03-18 1
2017-03-19 1
2017-03-20 1
2017-03-28 1
2017-03-29 1
2017-03-30 1
2017-04-02 1
2017-04-04 1
2017-04-07 1
2017-04-05 1
2017-04-08 1
2017-04-11 1
2017-04-13 1
2017-04-14 1
2017-04-15 1
2017-04-17 1
2017-04-19 1
2017-04-22 1
2017-04-23 1
2017-04-25 1
2017-04-26 1
2017-04-27 1
2017-04-29 1
2017-05-02 1
2017-05-03 1
2017-05-06 1
2017-05-07 1
2017-05-08 1
2017-05-10 1
2017-05-11 1
2017-05-12 1
2017-05-13 1
2017-05-14 1
2017-05-15 1
2017-05-16 1
2017-05-17 1
2017-05-18 1
2017-05-22 1
2017-05-23 1
2017-05-24 1
2017-05-31 1
2017-06-01 1
2017-06-03 1
2017-06-04 1
2017-06-05 1
2017-06-07 1
2017-06-10 1
2017-06-11 1
2017-06-12 1
2017-06-14 1
2017-06-16 1
2017-06-17 1
2017-06-19 1
2017-06-20 1
2017-06-22 1
2017-06-24 1
2017-06-25 1
2017-06-26 1
2017-06-27 1
2017-06-28 1
2017-06-30 1
2017-07-01 1
2017-07-02 1
2017-07-03 1
2017-07-05 1
2017-07-06 1
2017-07-08 1
2017-07-09 1
2017-07-10 1
2017-07-11 1
2017-07-13 1
2017-07-14 1
2017-07-17 1
2017-07-18 1
2017-07-19 1
2017-07-21 1
2017-07-25 1
2017-07-27 1
2017-08-01 1
2017-08-02 1
2017-08-03 1
2017-08-06 1
2017-08-07 1
2017-08-08 1
2017-08-09 1
2017-08-11 1
2017-08-12 1
2017-08-13 1
2017-08-14 1
2017-08-15 1
2017-08-20 1
2017-08-21 1
2017-08-22 1
2017-08-24 1
2017-08-27 1
2017-08-28 1
2017-08-29 1
2017-08-30 1
2017-09-01 1
2017-09-03 1
2017-09-04 1
2017-09-05 1
2017-09-06 1
2017-09-08 1
2017-09-10 1
2017-09-11 1
2017-09-12 1
2017-09-13 1
2017-09-15 1
2017-09-16 1
2017-09-17 1
2017-09-19 1
2017-09-20 1
2017-09-22 1
2017-09-25 1
2017-09-26 1
2017-09-27 1
2017-09-29 1
2017-10-01 1
2017-10-02 1
2017-10-03 1
2017-10-04 1
2017-10-06 1
2017-10-09 1
2017-10-10 1
2017-10-11 1
2017-10-14 1
2017-10-15 1
2017-10-16 1
2017-10-18 1
2017-10-19 1
2017-10-20 1
2017-10-22 1
2017-10-24 1
2017-10-25 1
2017-10-26 1
2017-10-27 1
2017-10-29 1
2017-10-30 1
2017-10-31 1
2017-11-02 1
2017-11-04 1
2017-11-06 1
2017-11-07 1
2017-11-08 1
2017-11-10 1
2017-11-12 1
2017-11-14 1
2017-11-15 1
2017-11-16 1
2017-11-19 1
2017-11-20 1
2017-11-21 1
2017-11-23 1
2017-11-24 1
2017-11-27 1
2017-11-28 1
2017-11-30 1
2017-12-01 1
2017-12-04 1
2017-12-05 1
2017-12-07 1
2017-12-08 1
2017-12-09 1
date colorIdNum
2017-03-04 1
2017-03-14 1
2017-04-01 1
2017-04-05 1
2017-04-16 1
2017-04-18 1
2017-04-20 1
2017-04-25 2
2017-04-29 1
2017-05-05 1
2017-05-21 1
2017-05-27 1
2017-05-31 1
2017-06-01 1
2017-06-10 1
2017-06-17 1
2017-06-24 1
2017-07-22 1
2017-08-12 1
2017-08-19 1
2017-08-26 1
2017-09-20 1
2017-09-21 1
2017-09-23 1
2017-10-08 1
2017-10-21 1
2017-10-24 1
2017-10-28 1
2017-11-07 1
2017-11-11 2
2017-11-13 1
2017-11-15 1
2017-11-18 3
2017-11-17 1
2017-11-19 1
2017-11-21 1
2017-11-23 1
2017-11-24 1
2017-11-25 1
2017-11-27 1
2017-11-26 1
2017-11-28 1
2017-11-29 1
2017-11-30 1
2017-12-10 1
2017-12-11 1
date colorIdNum
2017-10-10 1
2017-10-11 1
2017-10-12 1
2017-10-13 1
2017-10-14 1
2017-10-15 1
2017-10-16 1
2017-10-17 1
2017-10-18 1
2017-10-19 1
2017-10-24 1
2017-10-25 1
2017-10-26 1
2017-10-27 1
2017-10-30 1
2017-10-31 1
2017-11-01 1
2017-11-08 1
2017-11-10 1
2017-11-14 1
2017-11-30 1
2017-12-07 1
2017-12-11 1
date colorIdNum
2017-01-28 2
2017-01-29 3
2017-01-30 2
2017-01-31 2
2017-02-03 1
2017-02-04 1
2017-02-12 1
2017-02-24 2
2017-02-25 1
2017-02-26 3
2017-02-27 1
2017-03-03 1
2017-03-05 1
2017-03-16 1
2017-03-17 1
2017-03-18 2
2017-03-22 1
2017-03-28 1
2017-04-02 2
2017-04-03 1
2017-04-09 1
2017-04-21 1
2017-04-22 1
2017-04-23 1
2017-04-24 1
2017-04-28 1
2017-05-01 1
2017-05-05 1
2017-05-06 1
2017-05-07 1
2017-05-09 1
2017-05-11 1
2017-05-13 2
2017-05-20 4
2017-05-22 1
2017-05-24 1
2017-05-27 1
2017-06-06 1
2017-06-08 1
2017-06-09 1
2017-06-17 1
2017-06-24 1
2017-06-29 2
2017-07-02 1
2017-07-04 1
2017-07-08 1
2017-07-15 1
2017-07-20 1
2017-07-21 1
2017-07-23 1
2017-07-26 1
2017-07-28 1
2017-07-29 2
2017-07-31 1
2017-08-04 1
2017-08-10 1
2017-08-11 1
2017-08-16 1
2017-08-17 1
2017-08-19 2
2017-08-26 2
2017-09-08 1
2017-09-09 1
2017-09-15 1
2017-10-08 1
2017-10-07 1
2017-10-09 1
2017-10-10 1
2017-10-22 1
2017-11-05 2
2017-11-18 3
2017-11-19 1
2017-11-22 1
2017-12-01 1
2017-12-02 1
2017-12-03 2
2017-12-05 1
2017-12-06 1
2017-12-09 1
date colorIdNum
2017-06-13 1
2017-06-23 1
date colorIdNum
2010-11-20 3
2010-11-21 2
2010-11-26 1
2010-11-29 1
2010-11-30 1
2010-12-05 1
2010-12-07 1
2012-06-15 1
2014-01-20 2
2014-02-01 1
2015-10-14 1
2015-10-15 1
2016-06-04 1
2016-07-15 1
2016-08-20 1
2016-12-03 1
2017-01-28 1
2017-01-29 1
2017-01-30 2
2017-01-31 1
2017-02-01 1
2017-02-02 3
2017-02-03 1
2017-02-04 3
2017-02-05 1
2017-02-06 1
2017-02-07 1
2017-02-08 3
2017-02-09 1
2017-02-10 3
2017-02-11 3
2017-02-13 2
2017-02-14 4
2017-02-15 1
2017-02-16 2
2017-02-17 1
2017-02-18 3
2017-02-19 3
2017-02-20 4
2017-02-21 3
2017-02-22 4
2017-02-23 3
2017-02-24 2
2017-02-25 1
2017-02-26 1
2017-03-01 2
2017-03-02 3
2017-03-03 2
2017-03-04 1
2017-03-06 3
2017-03-07 8
2017-03-08 3
2017-03-09 3
2017-03-10 3
2017-03-11 2
2017-03-12 3
2017-03-13 3
2017-03-14 4
2017-03-15 4
2017-03-16 3
2017-03-17 1
2017-03-18 2
2017-03-19 2
2017-03-20 2
2017-03-21 1
2017-03-28 2
2017-03-29 4
2017-03-30 2
2017-03-31 2
2017-04-01 2
2017-04-02 1
2017-04-03 2
2017-04-04 2
2017-04-05 3
2017-04-06 4
2017-04-07 4
2017-04-08 2
2017-04-09 1
2017-04-10 3
2017-04-11 3
2017-04-12 4
2017-04-13 3
2017-04-14 2
2017-04-15 3
2017-04-16 2
2017-04-17 2
2017-04-18 2
2017-04-19 2
2017-04-20 3
2017-04-21 5
2017-04-22 3
2017-04-23 2
2017-04-24 2
2017-04-25 1
2017-04-26 4
2017-04-27 5
2017-04-28 1
2017-04-29 1
2017-04-30 1
2017-05-01 5
2017-05-02 7
2017-05-03 4
2017-05-04 2
2017-05-06 1
2017-05-07 1
2017-05-08 4
2017-05-09 3
2017-05-10 2
2017-05-11 3
2017-05-12 4
2017-05-14 2
2017-05-15 3
2017-05-16 2
2017-05-17 5
2017-05-18 4
2017-05-19 5
2017-05-21 1
2017-05-22 4
2017-05-23 3
2017-05-24 4
2017-05-25 3
2017-05-26 3
2017-05-31 3
2017-06-01 4
2017-06-02 3
2017-06-03 2
2017-06-04 2
2017-06-05 4
2017-06-06 4
2017-06-07 5
2017-06-08 3
2017-06-10 1
2017-06-11 2
2017-06-12 4
2017-06-13 3
2017-06-14 1
2017-06-15 5
2017-06-16 2
2017-06-18 3
2017-06-19 3
2017-06-20 3
2017-06-21 3
2017-06-22 2
2017-06-23 3
2017-06-24 1
2017-06-25 2
2017-06-26 5
2017-06-27 4
2017-06-28 4
2017-06-29 3
2017-06-30 3
2017-07-01 3
2017-07-02 2
2017-07-03 3
2017-07-04 1
2017-07-05 3
2017-07-06 3
2017-07-07 5
2017-07-08 3
2017-07-09 4
2017-07-10 4
2017-07-11 5
2017-07-12 3
2017-07-13 6
2017-07-14 3
2017-07-15 6
2017-07-16 1
2017-07-17 3
2017-07-18 4
2017-07-19 3
2017-07-20 3
2017-07-21 4
2017-07-22 1
2017-07-23 3
2017-07-24 4
2017-07-25 3
2017-07-26 3
2017-07-27 3
2017-07-28 2
2017-07-29 3
2017-07-30 2
2017-07-31 3
2017-08-01 2
2017-08-02 1
2017-08-03 3
2017-08-04 1
2017-08-05 2
2017-08-06 2
2017-08-07 2
2017-08-08 3
2017-08-09 4
2017-08-10 1
2017-08-12 2
2017-08-13 1
2017-08-14 3
2017-08-15 3
2017-08-17 1
2017-08-18 4
2017-08-20 2
2017-08-21 7
2017-08-22 4
2017-08-23 5
2017-08-24 2
2017-08-25 4
2017-08-26 1
2017-08-27 1
2017-08-28 2
2017-08-29 1
2017-08-30 3
2017-08-31 4
2017-09-01 1
2017-09-02 3
2017-09-03 1
2017-09-04 4
2017-09-05 5
2017-09-06 4
2017-09-07 2
2017-09-08 1
2017-09-09 1
2017-09-10 1
2017-09-11 2
2017-09-12 2
2017-09-13 4
2017-09-14 2
2017-09-15 2
2017-09-16 1
2017-09-17 2
2017-09-18 3
2017-09-19 1
2017-09-20 3
2017-09-22 2
2017-09-23 1
2017-09-24 4
2017-09-25 4
2017-09-26 3
2017-09-27 3
2017-09-28 3
2017-09-29 4
2017-09-30 5
2017-10-01 5
2017-10-02 6
2017-10-03 4
2017-10-04 4
2017-10-05 4
2017-10-06 5
2017-10-07 2
2017-10-08 1
2017-10-09 3
2017-10-10 2
2017-10-11 1
2017-10-12 2
2017-10-13 4
2017-10-14 4
2017-10-15 3
2017-10-16 4
2017-10-17 3
2017-10-18 3
2017-10-19 2
2017-10-20 2
2017-10-23 6
2017-10-24 3
2017-10-25 7
2017-10-26 2
2017-10-27 5
2017-10-28 3
2017-10-29 3
2017-10-30 2
2017-10-31 5
2017-11-01 6
2017-11-02 5
2017-11-03 4
2017-11-04 2
2017-11-05 2
2017-11-06 2
2017-11-07 2
2017-11-08 3
2017-11-10 3
2017-11-12 3
2017-11-11 4
2017-11-13 2
2017-11-14 3
2017-11-15 2
2017-11-16 5
2017-11-17 2
2017-11-20 4
2017-11-21 2
2017-11-22 3
2017-11-23 3
2017-11-24 2
2017-11-27 3
2017-11-28 4
2017-11-29 3
2017-11-30 1
2017-12-01 1
2017-12-02 1
2017-12-03 1
2017-12-04 3
2017-12-05 2
2017-12-06 3
2017-12-07 3
2017-12-08 5
2017-12-11 1
2017-11-09 4
<!DOCTYPE html>
<body>
<select id="dataSrcSelector" onchange="changeDataSrc()">
<option value="default">工作/技術學習</option>
<option value="3">英文口說課</option>
<option value="5">娛樂</option>
<option value="11">準備演講、blog、分享</option>
<option value="10">運動</option>
<option value="9">看病</option>
</select>
<div id="calendar-chart"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
function changeDataSrc() {
var x = document.getElementById("dataSrcSelector").value;
UpdateCalendar(`calendarData-${x}.csv`);
}
function UpdateCalendar(dataSrc) {
var width = 960,
height = 136,
cellSize = 17;
var formatPercent = d3.format("d");
var color = d3.scaleQuantize()
.domain([0, 10])
.range(["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]);
d3.csv(dataSrc, function (error, csv) {
if (error) throw error;
var data = d3.nest()
.key(function (d) { return d.date; })
.rollup(function (d) { return +d[0].colorIdNum; })
.object(csv);
d3.selectAll('rect').filter(function (d) {
return d in data;
})
.transition()
.duration(500)
.attr("fill", function (d) { return color(data[d]); });
d3.selectAll('rect').filter(function (d) {
return !(d in data);
})
.transition()
.duration(500)
.attr("fill", function () { return '#fff'; });
});
}
function DrawCalendar(dataSrc) {
var width = 960,
height = 136,
cellSize = 17;
var formatPercent = d3.format("d");
var color = d3.scaleQuantize()
.domain([0, 10])
.range(["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]);
var svg = d3.select("#calendar-chart")
.selectAll("svg")
.data(d3.range(2017, 2018))
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
svg.append("text")
.attr("transform", "translate(-6," + cellSize * 3.5 + ") rotate(-90)")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "middle")
.text(function (d) { return d; });
var rect = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#ccc")
.selectAll("rect")
.data(function (d) { return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("rect")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function (d) { return d3.timeWeek.count(d3.timeYear(d), d) * cellSize; })
.attr("y", function (d) { return d.getDay() * cellSize; })
.datum(d3.timeFormat("%Y-%m-%d"));
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#000")
.selectAll("path")
.data(function (d) { return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("path")
.attr("d", pathMonth);
svg.append("g")
.selectAll("text")
.data(function (d) { return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter()
.append("text")
.attr("x", function (d, i) {
return (d3.timeWeek.count(d3.timeYear(d), d) + 2) * cellSize;
})
.attr("y", 4 * cellSize)
.attr("dy", ".35em")
.attr("fill", "#000")
.attr("font-size", "35")
.text(function (d) { return (d.getMonth() + 1); });
d3.csv(dataSrc, function (error, csv) {
if (error) throw error;
var data = d3.nest()
.key(function (d) { return d.date; })
.rollup(function (d) { return +d[0].colorIdNum; })
.object(csv);
rect.filter(function (d) {
return d in data;
})
.attr("fill", function (d) { return color(data[d]); })
.append("title")
.text(function (d) { return d + ": " + formatPercent(data[d]); });
});
function pathMonth(t0) {
var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
d0 = t0.getDay(), w0 = d3.timeWeek.count(d3.timeYear(t0), t0),
d1 = t1.getDay(), w1 = d3.timeWeek.count(d3.timeYear(t1), t1);
return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
+ "H" + w0 * cellSize + "V" + 7 * cellSize
+ "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
+ "H" + (w1 + 1) * cellSize + "V" + 0
+ "H" + (w0 + 1) * cellSize + "Z";
}
}
DrawCalendar('calendarData-default.csv');
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment