JSFiddle - React, Tailwind, and code Playground

by azcoov

HTML

<script src="http://d3js.org/d3.v3.js"></script>

CSS

body {
    font: 15px sans-serif;
    shape-rendering: crispEdges;
}
.day {
    fill: #fff;
    stroke: #ccc;
    stroke-width:1px;
}
.month {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
}
.RdYlGn .q6 {
    fill:rgb(189, 99, 99)
    /* red - no */
}
.RdYlGn .q27 {
    fill:rgb(253, 174, 97)
    /* light orange - response but neither yes or no */
}
.RdYlGn .q18 {
    fill:rgb(102, 189, 99)
    /* green - yes */
}
.RdYlGn .q20 {
    fill:rgb(195, 195, 195)
    /* gray - no response */
}

JavaScript

var width = 300, // 960
    height = 1150, // 136
    cellSize = 17; // cell size

var json_dataset = {"results":[{"date":"2013-02-05","response":"Yes"},{"date":"2013-02-06","response":"No"},{"date":"2013-02-07","response":"No"},{"date":"2013-02-08","response":"No"},{"date":"2013-02-09","response":"No"},{"date":"2013-02-10","response":"No"},{"date":"2013-02-11","response":"Yes"},{"date":"2013-02-12","response":"Yes"}]};

var day = d3.time.format("%w"),
    week = d3.time.format("%U"),
    month = d3.time.format("%b"),
    percent = d3.format(".1%"),
    format = d3.time.format("%Y-%m-%d");

var color = d3.scale.ordinal()
    .domain(["No", "Yes"])
    .range(["q6", "q18"]);

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

svg.append("text")
    .attr("x", "40")
    .text(function (d) {
    return d;
});

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 day(d) * cellSize;})
    //.attr("y", function (d) {return week(d) * cellSize;})
    .attr("x", function (d) {return week(d) * cellSize;})
    .attr("y", function (d) {return day(d) * cellSize;})
    .datum(format);

rect.append("title")
    .text(function (d) {
    return d;
});

console.log(d3.json(json_dataset, function update(json) {
rects = svg.selectAll("rect").data(json_dataset.results, function (d) { return d.date; });
    rects.enter().append("rect");
    rects.attr("class", function (d) {
        return "day " + color(d.response);
    });
}));

svg.selectAll(".month")
    .data(function (d) {
    return...