Week 5: Dot plot

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Dot Plot</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

<h3>Infant mortality under 5 years-old in South America, <div class="y2002">2002</div> versus <div class="y2013">2013</div></h3>
		<p>Source: World Bank, 2015.

data.sort(function(a, b) {
					return d3.descending(b.Country, a.Country);
				});
				// in this case, i know it's out of 100 because it's percents.
				widthScale.domain([0, 75]);
				// js map: will make a new array out of all the d.name fields
				heightScale.domain(data.map(function(d) { return d.Country; } ));
				// Make the faint lines from y labels to highest dot
				var linesGrid = svg.selectAll("lines.grid")
					.data(data)
					.enter()
					.append("line");
				linesGrid.attr("class", "grid")
					.attr("x1", margin.left)
					.attr("y1", function(d) {
						return heightScale(d.Country) + heightScale.rangeBand()/2;
					})
					.attr("x2", function(d) {
						return margin.left + widthScale(+d.RateYear2013);
					})
					.attr("y2", function(d) {
						return heightScale(d.Country) + heightScale.rangeBand()/2;
					});
				// Make the dotted lines between the dots
				var linesBetween = svg.selectAll("lines.between")
					.data(data)
					.enter()
					.append("line");
				linesBetween.attr("class", "between")
					.attr("x1", function(d) {
						return margin.left + widthScale(+d.RateYear2002);
					})
					.attr("y1", function(d) {
						return heightScale(d.Country) + heightScale.rangeBand()/2;
					})
					.attr("x2", function(d) {
						return margin.left + widthScale(d.RateYear2013);
					})
					.attr("y2", function(d) {
						return heightScale(d.Country) + heightScale.rangeBand()/2;
					})
					.attr("stroke-dasharray", "5,5")
					.attr("stroke-width", function(d, i) {
						if (i == 1) {
							return "1";
						} else {
							return "0.5";
						}
					});
				// Make the dots for 1990
				var dots2002 = svg.selectAll("circle.y2002")
						.data(data)
						.enter()
						.append("circle");
				dots2002
					.attr("class", "y2002")
					.attr("cx", function(d) {
						return margin.left + widthScale(+d.RateYear2002);
					})
					.attr("r", heightScale.rangeBand()/2)
					.attr("cy", function(d) {
						return heightScale(d.Country) + heightScale.rangeBand()/2;
					})
					.style("stroke", function(d){
						if (d.Country === "Bolivia") {
							return "black";
						}
					})
					.style("fill", function(d){
						if (d.Country === "Bolivia") {
							return "#597B95";
						}
					})
					.append("title")
					.text(function(d) {
						return d.Country + ", in 2002, had a infant mortality rate of: " + d.RateYear2002;
					});
				// Make the dots for 2015
				var dots2013 = svg.selectAll("circle.y2013")
						.data(data)
						.enter()
						.append("circle");
				dots2013
					.attr("class", "y2013")
					.attr("cx", function(d) {
						return margin.left + widthScale(+d.RateYear2013);
					})
					.attr("r", heightScale.rangeBand()/2)
					.attr("cy", function(d) {
						return heightScale(d.Country) + heightScale.rangeBand()/2;
					})
					.style("stroke", function(d){
						if (d.Country === "Bolivia") {
							return "black";
						}
					})
					.style("fill", function(d){
						if (d.Country === "Bolivia") {
							return "#B97F3C";
						}
					})
					.append("title")
					.text(function(d) {
						return d.Country + ", in 2013, had a infant mortality rate of: " + d.RateYear2013;
					});
					// add the axes
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + margin.left + "," + height + ")")
					.call(xAxis);
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + margin.left + ",0)")
					.call(yAxis);
				svg.append("text")
					.attr("class", "xlabel")
        	.attr("transform", "translate(" + (margin.left + width / 2) + " ," +
        				(height + margin.bottom) + ")")
        	.style("text-anchor", "middle")
        	.attr("dy", "13")
        	.text("Under 5 years-old mortality rate");
       	// Style one of the Y labels bold:
        // a hack that works if you can unravel the selections - to style "The World" bold in the axis label, which is the 8th element:
        var allYAxisLabels = d3.selectAll("g.y.axis g.tick text")[0]; // un-nest array
        d3.select(allYAxisLabels[1]).style("font-weight", "bold");
        	// You could also use tick formatting to get a % sign on each axis tick
			});
		</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js