JSFiddle - React, Tailwind, and code Playground

by Daniel Ayala

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<pre id="PrimerCuatrimestre2017">
day	hour	value
1	1	66
1	2	108
1	3	56
1	4	42
1	5	76
1	6	139
1	7	127
1	8	120
1	9	136
1	10	196
1	11	199
1	12	215
1	13	214
1	14	194
1	15	166
1	16	192
1	17	179
1	18	199
1	19	249
1	20	203
1	21	165
1	22	118
1	23	60
1	24	257
2	1	47
2	2	33
2	3	40
2	4	31
2	5	62
2	6	113
2	7	118
2	8	158
2	9	162
2	10	219
2	11	210
2	12	195
2	13	195
2	14	198
2	15	246
2	16	196
2	17	214
2	18	241
2	19	257
2	20	205
2	21	178
2	22	118
2	23	50
2	24	260
3	1	35
3	2	31
3	3	33
3	4	39
3	5	57
3	6	98
3	7	118
3	8	145
3	9	144
3	10	204
3	11	205
3	12	222
3	13	257
3	14	231
3	15	238
3	16	195
3	17	216
3	18	265
3	19	269
3	20	253
3	21	207
3	22	148
3	23	57
3	24	187
4	1	57
4	2	78
4	3	78
4	4	50
4	5	58
4	6	101
4	7	136
4	8	133
4	9	199
4	10	206
4	11	212
4	12	221
4	13	192
4	14	223
4	15	204
4	16	209
4	17	222
4	18	251
4	19	277
4	20	206
4	21	181
4	22	129
4	23	79
4	24	218
5	1	53
5	2	40
5	3	71
5	4	47
5	5	65
5	6	99
5	7	152
5	8	139
5	9	142
5	10	211
5	11	235
5	12	212
5	13	191
5	14	186
5	15	193
5	16	245
5	17	219
5	18	265
5	19	268
5	20	267
5	21	176
5	22	151
5	23	104
5	24	261
6	1	95
6	2	107
6	3	97
6	4	84
6	5	64
6	6	80
6	7	102
6	8	111
6	9	130
6	10	190
6	11	234
6	12	241
6	13	206
6	14	222
6	15	231
6	16	229
6	17	191
6	18	256
6	19	259
6	20	242
6	21	184
6	22	174
6	23	139
6	24	324
7	1	136
7	2	201
7	3	162
7	4	145
7	5	92
7	6	69
7	7	68
7	8	94
7	9	138
7	10	112
7	11	123
7	12	114
7	13	124
7	14	153
7	15	177
7	16	211
7	17	150
7	18	170
7	19	212
7	20	211
7	21	153
7	22	126
7	23	104
7	24	253
</pre>
<pre id="SegundoCuatrimestre2017">
 ...

CSS

rect.bordered {
        stroke: #E6E6E6;
        stroke-width:2px;   
      }

      text.mono {
        font-size: 9pt;
        font-family: Consolas, courier;
        fill: #aaa;
      }

      text.axis-workweek {
        fill: #000;
      }

      text.axis-worktime {
        fill: #000;
      }

JavaScript

var margin = { top: 50, right: 0, bottom: 100, left: 30 },
          width = 960 - margin.left - margin.right,
          height = 430 - margin.top - margin.bottom,
          gridSize = Math.floor(width / 24),
          legendElementWidth = gridSize*2,
          buckets = 9,
          colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
          days = ["Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"],
          times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p",       "10p", "11p", "12p"];
          datasets = ["#PrimerCuatrimestre2017","#SegundoCuatrimestre2017"];

      var svg = d3.select("#chart").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var dayLabels = svg.selectAll(".dayLabel")
          .data(days)
          .enter().append("text")
            .text(function (d) { return d; })
            .attr("x", 0)
            .attr("y", function (d, i) { return i * gridSize; })
            .style("text-anchor", "end")
            .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
            .attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); });

      var timeLabels = svg.selectAll(".timeLabel")
          .data(times)
          .enter().append("text")
            .text(function(d) { return d; })
            .attr("x", function(d, i) { return i * gridSize; })
            .attr("y", 0)
            .style("text-anchor", "middle")
            .attr("transform", "translate(" + gridSize / 2 + ", -6)")
            .attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel...