Week4: Heatmap table

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Infant Mortality since 2000</title>
	<link media="screen" href="style.css" rel="stylesheet" />

</head>
<body>
	<div id="central">
		<div id="text">
		<h1>Infant Mortality since 2000</h1>
		<p><em>Since 2000, the infant mortality among children from 0 to 4 years-old has decreased</em>. Anyhow, a lot of countries, like India and Nigeria, has worrying high levels related to children's deaths.</p>
		<p><em>This table shows the main mortality causes</em>, like meningitis and encephalitis or diarrhoeal diseases, and their evolution during the las 13 years. The tables can be sorted by all the variables.</p>
		<div id="source">
		<p>Source: <a href="https://www.who.int/gho/en/">Global Health Observatory (GHO)</a>.</p>
		</div>
		</div>
		<div id="table"></div>
	</div>

</body>

<script type="text/javascript" src="stupidtable.js"></script>

var myTotal = [];

// this is a new variable, to make it easier to do a color scale.
	// alternately, you could extract these values with a map function.
	myData.forEach(function(d, i){

var format = d3.format(",");

d.Meningitis_encephalitis = +d.Meningitis_encephalitis;
		d.Respiratory_infections = +d.Respiratory_infections;
		d.Sepsi = +d.Sepsi;
		d.Pertussis = +d.Pertussis;
		d.Malaria = +d.Malaria;
		d.Measles = +d.Measles;
		d.Congenital_anomalies = +d.Congenital_anomalies;
		d.HIV_AIDS = +d.HIV_AIDS;
		d.Diarrhoeal_diseases = +d.Diarrhoeal_diseases;
		d.Asphyxia = +d.Asphyxia;
		d.Total = +d.Total;
		/*d.Total = d.Meningitis_encephalitis + d.Respiratory_infections + d.Sepsi + d.Pertussis + d.Malaria + d.Measles + d.Congenital_anomalies + d.HIV_AIDS + d.Diarrhoeal_diseases + d.Asphyxia;*/

// Add an array to the empty array with the values of each:
		myArray.push([d.Country, d.Year, d.Meningitis_encephalitis, d.Respiratory_infections, d.Sepsi, d.Pertussis, d.Malaria, d.Measles, d.Congenital_anomalies, d.HIV_AIDS, d.Diarrhoeal_diseases, d.Asphyxia, d.Total]);
		// this is just a convenience, another way would be to use a function to get the values in the d3 scale.
		myTotal.push(d.Total);
		});

myArray.sort(function(a, b) {
        return b[12] - a[12];
    })

var table = d3.select("#table").append("table");
	var header = table.append("thead").append("tr");
	// Made some objects to construct the header in code:
	// The sort_type is for the Jquery sorting function.
	var headerObjs = [
		{ label: "Country", sort_type: "string" },
		{ label: "Year", sort_type: "string" },
		{ label: "Meningitis and encephalitis", sort_type: "int" },
		{ label: "Respiratory infections", sort_type: "int" },
		{ label: "Sepsi", sort_type: "int" },
		{ label: "Pertussis", sort_type: "int" },
		{ label: "Malaria", sort_type: "int" },
		{ label: "Measles", sort_type: "int" },
		{ label: "Congenital anomalies", sort_type: "int" },
		{ label: "HIV and AIDS", sort_type: "int" },
		{ label: "Diarrhoeal diseases", sort_type: "int" },
		{ label: "Asphyxia and trauma", sort_type: "int" },
		{ label: "Total", sort_type: "int" }

];
	header
	.selectAll("th")
	.data(headerObjs)
	.enter()
	.append("th")
	.attr("data-sort", function (d) { return d.sort_type; })
	.text(function(d) { return d.label; });
	var tablebody = table.append("tbody");
	rows = tablebody
	.selectAll("tr")
	.data(myArray)
	.enter()
	.append("tr");
	// We built the rows using the nested array - now each row has its own array.
	// let's talk about the scale - start at 0 or at lowest number?
	console.log('Extent is ', d3.extent(myTotal));
	var colorScale = d3.scale.linear()
	.domain(d3.extent(myTotal))
	.range(["#E6F5FF", "#0099FF"]);
	cells = rows.selectAll("td")
	// each row has data associated; we get it and enter it for the cells.
	.data(function(d) {
		return d;
	})
	.enter()
	.append("td")
	.style("background-color", function(d,i) {
		// for the last element in the row, we color the background:
		if (i === 12) {
			return colorScale(d);
		}
	})
	.text(function(d) {
			return d;
	});

/*.text(function(d) {
		if (d !== +d) {
		return d;
		}

else {
		return d3.format(",")(d);
		}
	});*/

// jquery sorting applied to it - could be done with d3 and events.
	$("table").stupidtable();
});
</script>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://code.jquery.com/jquery-1.9.1.min.js