Binded data by following Scott Murray's chapter on binding data
Used vLookup and an external table with country and regions to match country by regions. Sorted the table by region. Styled the table to match the UNICEF brandtoolkit colors.
Sorted the data by region:
myData.sort(function(a, b){
return d3.ascending(a.region, b.region);
});
I calculated the difference in the code:
myData.forEach(function(d, i){
d.difference = d.year2013 - d.year1990;
//Pushed the data into an empty Array.
myArray.push([d.name, d.region, d.year1990, d.year1995, d.year2000, d.year2005, d.year2010, d.year2013, d.difference]);
};
Then, we create a table with header and rows. We add the data and attach it to the rows:
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.