xxxxxxxxxx
<meta charset="utf-8">
<html>
<head>
<title>1900-2000: Infographic with the Century's Deaths</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://d3js.org/d3.v2.js"></script>
<script src="https://code.jquery.com/jquery-1.7.1.js"></script>
<p id="chart">
<p id="rawdata">
</head>
<body>
<script src="treemap.js"></script>
<script>
function reSortRoot(root,value_key) {
for (var key in root) {
if (key == "key") {
root.name = root.key;
delete root.key;
}
if (key == "values") {
root.children = [];
for (item in root.values) {
root.children.push(reSortRoot(root.values[item],value_key));
}
delete root.values;
}
if (key == value_key) {
root.value = parseFloat(root[value_key]);
delete root[value_key];
}
}
return root;
}
$( document ).ready(function() {
d3.csv("data2.csv", function(csv_data){
// Add, remove or change the key values to change the hierarchy.
var nested_data = d3.nest()
.key(function(d) { return d.cause; })
.key(function(d) { return d.Subcause; })
.key(function(d) { return d.subsubcause; })
.entries(csv_data);
var root = {};
root.key = "Data";
root.values = nested_data;
root = reSortRoot(root,"deaths");
loadData(root);
});
});
</script>
</body>
<footer>
<h1><br><br><br><br><br><br>
20th Century Deaths</h1>
<p>1900-2000: Infographic of a Century's Death Toll: <br>Ever wondered why people die? Well, here is a complete overview of the estimated deaths for the time-period 1900 - 2000. <br>The data comes from David McCandless's public data collection efforts, and can be accessed<a href="https://docs.google.com/spreadsheet/ccc?key=0Aqe2P9sYhZ2ndDFON0Zidmh0ZHc1WGU4NHMzQ1AtMVE#gid=8"> here</a> (2015).</p>
</footer>
</html>
Modified http://d3js.org/d3.v2.js to a secure url
Modified http://code.jquery.com/jquery-1.7.1.js to a secure url
https://d3js.org/d3.v2.js
https://code.jquery.com/jquery-1.7.1.js