app-mpt/app/www/heatmap-table.js

// Based on:
// http://bl.ocks.org/ganezasan/dfe585847d65d0742ca7d0d1913d50e1

var width = window.innerWidth * 0.6,
    height = window.innerHeight * 0.4,
    stripes_width = window.innerWidth,
    stripes_height = window.innerHeight * 0.3;

var gridSize = Math.floor(width / 93); // multiples of 31: number of days

const drawHeatMaps = function(data, location) {

    d3.select("#heatmap_container").selectAll("svg").remove();

    var slice = [];

    for(var i = 0; i < 6; i++) {
	var temp = data[i].filter(function(d) {
	    return d.uf == location;
	});
	slice.push(temp);
    }

    const colorScale = d3.scaleSequential()
	  .domain([0, d3.max(slice, function(d) {
	      return d3.max(d, function(d) {
		  return d.value;
	      });
	  })])
	  .interpolator(d3.interpolateBlues);

    for(var k = 0; k <= 5; k++) {
	heatmapChart(slice[k], location, k, colorScale);
    }

    heatmapStripes(slice, location, colorScale);

};

const heatmapChart = function(data, location, year, colorScale) {

    var hm_tooltip = d3.select("body")
	.append("div")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
	.style("color", "white")
	.style("padding", "8px")
	.style("background-color", "rgba(0, 0, 0, 0.75)")
	.style("border-radius", "6px")
	.style("font", "12px sans-serif");

    var heatmapTable = d3.select("#heatmap_20"+(year+12)+"_area").append("svg")
        .attr("width",  width / 6)
        .attr("height", height)
        .append("g");

    const cards = heatmapTable.selectAll(".htables")
	  .data(data);

    cards.enter().append("rect")
	.attr("x", (d) => (d.month - 1) * gridSize)
	.attr("y", (d) => (d.day - 1) * gridSize)
	.attr("class", "month bordered")
	.attr("width", gridSize)
	.attr("height", gridSize)
	.style("stroke", "gray")
	.style("stroke-width", "0.5px")
	.merge(cards)
	.style("fill", (d) => colorScale(d.value))
	.on("mouseover", function(d) {
	    d3.select(this)
		.style("stroke", "orange")
		.style("stroke-width", "1px");
	    hm_tooltip.html("Dia: " + d.day + "<br/> "+ "Mês: " + d.month + "<br/> " + "Acidentes: " + d.value);
	    return hm_tooltip.style("visibility", "visible").style("opacity", 1);
	}).on("mouseout", function(d) {
	    d3.select(this)
		.style("stroke", "gray")
		.style("stroke-width", "0.5px");
	    hm_tooltip.html("Dia: " + d.day + "<br/> "+ "Mês: " + d.month + "<br/> " + "Acidentes: " + d.value);
	    return hm_tooltip.style("visibility", "hidden").style("opacity", 1);
	}).on("mousemove", function() {
	    d3.select(this)
		.style("stroke", "orange")
		.style("stroke-width", "1px");
	    return hm_tooltip.style("top",(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
	});

    cards.exit().remove();

};

const heatmapStripes = function(data, location, colorScale) {

    console.log(data);

    var boxSizeX = stripes_width / 390,
	boxSizeY = stripes_height / 9;

    var hm_tooltip = d3.select("body")
	.append("div")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
	.style("color", "white")
	.style("padding", "8px")
	.style("background-color", "rgba(0, 0, 0, 0.75)")
	.style("border-radius", "6px")
	.style("font", "12px sans-serif");

    var heatmapStripes = d3.select("#heatmap_stripes_area").append("svg")
        .attr("width",  window.innerWidth)
        .attr("height", height)
        .append("g");

    for (var k = 0; k < 6; k++) {
	var cards = heatmapStripes.selectAll(".hstripes")
	      .data(data[k]);

	cards.enter().append("rect")
	    .attr("x", (d, i) => i * boxSizeX)
	    .attr("y", k * boxSizeY)
	    .attr("class", "month bordered")
	    .attr("width", boxSizeX)
	    .attr("height", boxSizeY)
	    .style("stroke", "gray")
	    .style("stroke-width", "0.2px")
	    .merge(cards)
	    .style("fill", (d) => colorScale(d.value))
	    .on("mouseover", function(d) {
		d3.select(this)
		    .style("stroke", "orange")
		    .style("stroke-width", "1px");
		hm_tooltip.html("Dia: " + d.day + "<br/> "+ "Mês: " + d.month + "<br/> " + "Acidentes: " + d.value);
		return hm_tooltip.style("visibility", "visible").style("opacity", 1);
	    }).on("mouseout", function(d) {
		d3.select(this)
		    .style("stroke", "gray")
		    .style("stroke-width", "0.2px");
		hm_tooltip.html("Dia: " + d.day + "<br/> "+ "Mês: " + d.month + "<br/> " + "Acidentes: " + d.value);
		return hm_tooltip.style("visibility", "hidden").style("opacity", 1);
	    }).on("mousemove", function() {
		d3.select(this)
		    .style("stroke", "orange")
		    .style("stroke-width", "1px");
		return hm_tooltip.style("top",(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
	    });

	cards.exit().remove();

    }

};