xxxxxxxxxx
<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="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- load the function file you need before you call it... -->
<script type="text/javascript" src="stupidtable.js"></script>
<script type="text/javascript">
//Load in contents of CSV file, and do things to the data.
d3.csv("deaths_04yearsold.csv", function(error, myData) {
if (error) {
console.log("Had an error loading file.");
}
// We'll be using simpler data as values, not objects.
var myArray = [];
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