Skip to content

Instantly share code, notes, and snippets.

@mdamien

mdamien/index.html

Created July 27, 2020 08:06
Download ZIP

Revisions

  1. mdamien created this gist Jul 27, 2020.
    118 changes: 118 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,118 @@
    <!DOCTYPE html>
    <body>
    <p style="font-family: sans-serif;padding-left: 27px;margin: 0;">
    darkest green = 5+ contributions | lightest green = at least one contribution
    </p>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
    <script>

    var width = 960,
    height = 136,
    cellSize = 17;

    var color = d3.scaleQuantize()
    .domain([0, 10])
    .range("#1D9A6C #39A96B #56B870 #74C67A #99D492 #BFE1B0 #DEEDCF".split(' ').reverse());

    var svg = d3.select("body")
    .selectAll("svg")
    .data(d3.range(2005, 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);

    // generate grey blocks
    var data = {};
    var date = moment(new Date());
    date = date.add('1', 'day')
    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 '#bbf'; });



    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";
    }



    var csv = [];

    function loadData(page) {
    d3.json(
    "https://www.reddit.com/user/Shitty_Watercolour/.json" + (page ? ("?after=" + page) : ''),
    function(error, json) {
    if (error) throw error;

    json.data.children.forEach(child => {
    csv.push({
    date: moment.unix(child.data.created_utc).format('YYYY-MM-DD')
    });
    });

    if (json.data.after) {
    loadData(json.data.after);
    updateViz();
    }
    });
    }
    loadData();


    function updateViz() {

    var data = d3.nest()
    .key(function(d) { return d.date; })
    .rollup(function(d) { return d.length; })
    .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 + ": " + data[d] + ' contributions'; });

    }

    </script>