index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
.age-group .age {
margin-right: 1em;
}
</style>
</head>
<body>
<h1>Gaza Casualties</h1>
<h2><span id="count">?</span> casualties</h2>
<h3>Age Groups</h3>
<div id="age-groups">
</div>
</body>
<script>
d3.tsv("data/casualties.tsv", function(error, casualties) {
if (error) return console.error("Error!");
d3.select("#count")
.text(casualties.length);
var ageGroups = d3.nest()
.key(function(d) { return ageGroup(d.Age); })
.rollup(function(d) { return d.length; })
.entries(casualties.filter(function(d) {
return d.Age !== "-";
}))
.map(function(entry) {
return {
age: entry.key,
count: entry.values
};
})
.sort(function(a, b) {
return d3.ascending(a.age, b.age);
});
console.log(ageGroups);
var group = d3.select("#age-groups")
.selectAll(".age-group")
.data(ageGroups)
.enter()
.append("div")
.attr("class", "age-group");
group.append("b")
.attr("class", "age")
.text(function(d) { return d.age; });
group.append("span")
.attr("class", "count")
.text(function(d) { return d.count; });
});
function ageGroup(age) {
var lower = 10 * Math.floor(age / 10);
return [lower, lower + 10].join("-");
}
</script>
</html>