Week 5: Bar graph

<!DOCTYPE html>

<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>

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>

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 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