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 {
font-family: "Opens Sans", sans-serif;
}
/*svg {
background-color: rgba(235, 235, 235, 0.3);
}*/
#text {
max-width: 900px;
margin: 0 auto;
}
h1{
font-family: "Open Sans", sans-serif;
font-size: 45px;
text-transform: uppercase;
font-weight: 700;
color: #0099FF;
margin-top: 40px;
margin-bottom: 15px;
}
h2 {
margin-top: 10px;
font-weight: 400;
}
p {
width: 800px;
font-family: "Open Sans";
font-size: 18px;
font-weight: 100;
line-height: 1.7;
}
#source p {
font-size: 15px;
}
a, a:visited {
text-decoration: none;
color: #0099FF;
}
a:hover {
color: black;
}
.xaxis path,
.xaxis line {
fill: none;
stroke: rgba(30,30,30,0.5);
stroke-dasharray: 10,10;
shape-rendering: crispEdges;
}
.yaxis path,
.yaxis line {
stroke-width: 0px;
fill: none;
stroke: rgba(30,30,30,0.5);
stroke-dasharray: 10,10;
shape-rendering: crispEdges;
}
.xaxis, .yaxis {
font-size: 13px;
font-weight: 300;
}
.label {
font-size: 15px;
font-weight: 300;
}
rect:hover {
opacity: 0.7;
}
ul {
margin-bottom: 5px;
margin-top: 20px;
position: relative; left: -5%;
}
li {
display: inline-block;
margin-right: 15px;
margin-bottom: 10px;
font-size: 15px;
font-weight: 300;
padding: 5px 10px 5px 10px;
}
#red {
background: rgba(222,36,20,0.6);
}
#blue {
background: rgba(0,128,255,1);
}
</style>
</head>
<body>
<div id="container">
<div id="text">
<h1>Total Infant Mortality in 2013</h1>
<h2>Among children under 5 years-old
<p>Although death among children has decreased around the world within the last decade, some countries, like India, keep an alarming infant mortality.</p>
<div id="source">
<p>Source: <a href="https://www.who.int/gho/en/">Global Health Observatory (GHO)</a>.</p>
</div>
<ul>
<li id="red">Infant Mortality over the mean
</li>
<li id="blue">Infant Mortality under the mean
</li>
</ul>
</div>
<script type="text/javascript">
var fullHeight = 3900;
var fullWidth = 900;
// Set up the range here - my output sizes
var margin = {top: 5, right: 100, bottom: 60, left: 300};
var width = fullWidth - margin.left - margin.right;
var height = fullHeight - margin.top - margin.bottom;
var widthScale = d3.scale.linear()
.range([0, width]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ margin.top, height], 0.3);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left")
.innerTickSize([0]);
var svg = d3.select("body")
.append("svg")
.attr("width", fullWidth)
.attr("height", fullHeight);
d3.csv("deaths_04yearsold.csv", function(error, data) {
if (error) {
console.log(error);
}
my2013 = [];
data.forEach(function (d) {
if (d.Year === "Year 2013") {
my2013.push(d);
}
});
my2013.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(my2013, function(d) {
return +d.Total;
}) ]);
// js map: will make a new array out of all the d.name fields
heightScale.domain(my2013.map(function(d) { return d.Country; }));
var rects = svg.selectAll("rect")
.data(my2013)
.enter()
.append("rect");
rects.attr("x", margin.left)
.attr("y", function(d, i) {
return heightScale(d.Country);
})
/*.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", heightScale.rangeBand())
.append("title") // this is a simple (bad) tooltip
.text(function(d) {
return "In 2013, the infant mortality in " + d.Country + " was: " + d3.format(",")(d.Total);
});
svg.append("g")
.attr("class", "xaxis")
/*.attr("transform", "translate(" + margin.left + "," (height - margin.bottom) + ")")*/
.attr("transform", "translate(" + margin.left + "," + height + ")")
.call(xAxis); // fill in the name of your yaxis function here.
svg.append("g")
.attr("class", "yaxis")
.attr("transform", "translate(" + margin.left + ",0)")
.call(yAxis);
svg.append("text")
.attr("class", "x label")
.attr("transform", "translate(" + (margin.left + width / 2) + " ," +
(height + margin.top) + ")")
.style("text-anchor", "middle")
.attr("dy", "46")
.text("Total Infant Mortality");
var mean = d3.mean(my2013, function(d) {
// the value I want to get the mean of:
return d.Total;
});
rects.attr("fill", function(d) {
if (d.Total < mean) {
return "rgba(0,128,255,1)";
} else {
return "rgba(255,0,0,0.6)";
}
})
var labels = svg.selectAll("text.labels")
.data(my2013)
.enter()
.append("text")
.attr("class", "labels")
.attr("x", function (d) {
return (widthScale(d.Total) + margin.left + 15);
})
.attr("y", function (d, i) {
return (heightScale(d.Country) + margin.top + 7);
})
.text(function (d) {
return d3.format(",")(d.Total);
})
.attr("font-family", "Open Sans, sans-serif")
.attr("font-size", "12px")
.attr("fill", "#000000");
/*svg.append("text")
.attr("class", "y label")
.attr("transform", "translate(" + (margin.right + width / 9) + " ," +
(height / 2.8 + margin.top) + ") rotate(-90)")
.style("text-anchor", "middle")
.attr("dy", "-60")
.text("Life satisfaction");*/
});
</script>
</div>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js