xxxxxxxxxx
<!-- Modified version of Scott Murray's file from Knight D3 course -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Total Infant Mortality since 2000</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
/*body {
background-color: #ddddff;
}*/
svg {
background-color: rgba(235, 235, 235, 0.3);
}
#text {
margin-bottom: 40px;
}
h1{
font-family: "Open sans", sans-serif;
text-transform: uppercase;
font-weight: 700;
color: #0099FF;
margin-top: 10px;
}
p {
width: 400px;
font-family: "Open sans";
font-size: 16px;
font-weight: 100;
line-height: 1.7;
}
#source p {
font-size: 15px;
}
em {
font-style: normal;
font-weight: 600;
color: black;
}
</style>
</head>
<body>
<h1>Total Infant Mortality</h1>
<div id="text">
<p><em>This barchart shows infant mortality by country since 2000.</p>
<div id="source">
<p>Source: <a href="https://www.who.int/gho/en/">Global Health Observatory (GHO)</a>.</p>
</div>
</div>
<script type="text/javascript">
var height = 35050;
var width = 400;
// Set up the range here - my output sizes
var widthScale = d3.scale.linear()
.range([ 0, width ]);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.csv("deaths_04yearsold.csv", function(error, data) {
if (error) {
console.log(error);
}
data.sort(function(a, b) {
return d3.descending(+a.Total, +b.Total);
});
// set up the domain here, from the data i read in.
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.Total;
}) ]);
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("fill", "#0099FF");
rects.attr("x", 0)
.attr("y", function(d, i) {
return i * 20; // just spacing the bars - notice from the top
})
.attr("width", function(d) {
return widthScale(d.Total);
})
.attr("height", 10)
.append("title") // this is a simple (bad) tooltip
.text(function(d) {
return d.Country + " was: " + d.Total;
});
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js