Created
July 26, 2020 07:21
-
-
Save mdamien/68edf96c052308b3915c757c7355ace8 to your computer and use it in GitHub Desktop.
Twitter Calendar View of user tweets
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| tweets.csv comes from `twint -u dam_io --csv -o tweets.csv` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 136, | |
| cellSize = 17; | |
| var color = d3.scaleQuantize() | |
| .domain([0, 5]) | |
| .range("#1D9A6C #39A96B #56B870 #74C67A #99D492 #BFE1B0 #DEEDCF".split(' ').reverse()); | |
| var svg = d3.select("body") | |
| .selectAll("svg") | |
| .data(d3.range(2014, 2021)) | |
| .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); | |
| d3.csv("tweets.csv", function(error, csv) { | |
| if (error) throw error; | |
| var data = d3.nest() | |
| .key(function(d) { return d.date; }) | |
| .rollup(function(d) { return d.length; }) | |
| .object(csv); | |
| console.log(data); | |
| rect.filter(function(d) { return d in data; }) | |
| .attr("fill", function(d) { return color(data[d]); }) | |
| .append("title") | |
| .text(function(d) { return d + ": " + data[d] + ' tweets'; }); | |
| // generate grey blocks | |
| var data = {}; | |
| var date = moment(new Date()); | |
| while (date < moment('2021-01-01')) { | |
| data[date.format('YYYY-MM-DD')] = 1 | |
| date = date.add('1', 'day') | |
| } | |
| rect.filter(function(d) { return d in data; }) | |
| .attr("fill", function(d) { return '#eee'; }); | |
| }); | |
| 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"; | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment