heatmapCovid19.html

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- Load color palettes -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>


<script>

// set the dimensions and margins of the graph
var margin = {top: 90, right: 100, bottom: 10, left: 100},
  width = 2900 - margin.left - margin.right,
  height = 600 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.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 + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/ishibaro/dataviz/master/HeatMapcovid19/csv_heatmap_covid19/caseslistCovidMonthlyUpdate28Diciembre2020.csv", 

function(data) {

  // Labels of row and columns -> unique identifier of the column called 'group' and 'variable'
  // This allows to produce a heatmap a matrix of squares.
  var myGroups = d3.map(data, function(d){return d.country;}).keys()
  var myVars = d3.map(data, function(d){return d.date;}).keys()

  // Build X scales and axis:
  var x = d3.scaleBand()
    .range([ 0, width ])
    .domain(myGroups)
    .padding(0.02);
  svg.append("g")
    .style("font-size", 8.1)
	.style("font-style", "italic")
	.style("font-weight", "bold")
	.style("font-family", "Saira")
	.attr("text-decoration","underline")
    .attr("transform", "translate(0," + height - margin.top +")")
    .call(d3.axisTop(x).tickSize(1.8))
	.selectAll("text")
    .attr("y", -5.2)
    .attr("x", 0.25)
    .attr("dy", ".35em")
	.attr("transform", "rotate(-40)")
    .style("text-anchor", "start")
	.style("fill", "black")
    .select(".domain").remove()

  // Build Y scales and axis:
  var y = d3.scaleBand()
    .range([ 0, height])
    .domain(myVars)
    .padding(0.01);
  svg.append("g")
    .style("font-size", 0)
    .call(d3.axisLeft(y).tickSize(0))
    .select(".domain").remove()

  // Build color scale
  var myColor = d3.scaleSequential()
    .interpolator(d3.interpolateYlOrRd)
    .domain([1,100])

  // create a tooltip
  	
	var tooltip = d3.select("#my_dataviz")
		.append("div")
		.style("position", "absolute")
		.style("visibility", "hidden")
		.style("background-color", "azure")
		.style("border", "solid")
		.style("font-weight", "condensed")
		.style("border-width", "1px")
		.style("border-radius", "3px")
		.style("padding", "2px")
		.style("width", "115px")
		.style("font-weight", "bold")
		.style("font-size", 1)
		.style("font-family", "Saira Condensed");

  
  // add the squares
  svg.selectAll()
    .data(data, function(d) {return d.country+':'+d.date;})
    .enter()
    .append("rect")
      .attr("x", function(d) { return x(d.country) })
      .attr("y", function(d) { return y(d.date) })
      .attr("rx", 1)
      .attr("ry", 2)
      .attr("width", x.bandwidth() )
      .attr("height", y.bandwidth() )
      .style("fill", function(d) { return myColor(d.value)} )
      .style("stroke-width", 0.5)
      .style("stroke", "none")
      .style("opacity", 0.55) 
   .on("mouseover", function(d){return tooltip.style("visibility", "visible").style("stroke-width", 1);})
   .on("mousemove", function(d){return tooltip.html(d.country + "<br>Cases: "+ d.value + "<br>Date: " + d.date).style("top", (event.pageY+22)+"px").style("left",(event.pageX)+"px");})
   .on("mouseout", function(d){return tooltip.style("visibility", "hidden");});
})

// Add title to graph
svg.append("text")
        .attr("x", 0)
        .attr("y", -75)
        .attr("text-anchor", "left")
        .style("font-size", "22px")
		.style("font-size", 17)
		.style("font-weight", "bold")
		.style("font-style", "italic")
		.style("font-family", "Aldrich")
        .text("Track Covid-19 heatmap");

// Add subtitle to graph
svg.append("text")
        .attr("x", 0)
        .attr("y", -540)
        .attr("text-anchor", "left")
        .style("font-size", "14px")
        .style("fill", "grey")
        .style("max-width", 400)
        .text("Covid-19, global development analysis using a heatmap.");


</script>

<script>
// auxiliary scale to use dates rather than strings


var margin = {top: 90, right: 100, bottom: 10, left: 100},
  width = 2900 - margin.left - margin.right,
  height = 600 - margin.top - margin.bottom;



//Read the data - this way our dates are always updated and there is no need to update the domain
d3.csv("https://raw.githubusercontent.com/ishibaro/dataviz/master/HeatMapcovid19/csv_heatmap_covid19/caseslistCovidMonthlyUpdate28Diciembre2020.csv",

  // You can use autotype. In this case I decided to assign types manually:
  // This function will parse the dates as time and we will use it to build the Y axis
  function(d){
    return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
  },

  // Now I can use this dataset:
  function(data) {

    
    // Add Y axis

    var y = d3.scaleTime()
     .domain(d3.extent(data, function(d) { return d.date; }))
      .range([ 0, height ]);
    svg.append("g")
       .call(d3.axisLeft(y));

    // Add the line
    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function(d) { return x(d.date) })
        .y(function(d) { return y(d.value) })
        )

})

</script>