Week 5: Dot Plot

README.md

Week 5: Dot Plot

Assignment: Create a scatterplot using any of the data in the CSV file.

Selected only the data for 1990 and compare it against 2015. A lot of the challenge came from the spacing of the dots and the labels in the graph.

dotplot.js

// this is the size of the svg container -- the white part
var fullwidth = 1600,
fullheight = 1750;

// these are the margins around the graph. Axes labels go in margins.
var margin = {top: 5, right: 50, bottom: 50, left: 400};

var width = fullwidth - margin.left - margin.right,
	height = fullheight - margin.top - margin.bottom;

var widthScale = d3.scale.linear()
.range([ 0, width]);

var heightScale = d3.scale.ordinal()
.rangeRoundBands([ 0, height], 0.2);

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("maternalMortalityGdp.csv", function(error, data) {

		if (error) {
			console.log("error reading file");
		}

		data.sort(function(a, b) {
			return d3.ascending(+a.year2013, +b.year2013);
		});

		// in this case, i know it's out of 100 because it's percents.
		widthScale.domain([ 0, 2.5*d3.max(data, function(d) {
					return +d.year2013;
				}) ]);
		// js map: will make a new array out of all the d.name fields
		heightScale.domain(data.map(function(d) { return d.name; } ));


		// 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.name) + heightScale.rangeBand();
		})
		.attr("x2", function(d) {
			return margin.left + widthScale(+d.year2013);

		})
		.attr("y2", function(d) {
			return heightScale(d.name) + heightScale.rangeBand();
		});

		// 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.year1990);
		})
		.attr("y1", function(d) {
			return heightScale(d.name) + heightScale.rangeBand()/2;
		})
		.attr("x2", function(d) {
			return margin.left + widthScale(d.year2013);
		})
		.attr("y2", function(d) {
			return heightScale(d.name) + heightScale.rangeBand()/2;
		})
		.attr("stroke-dasharray", "5,5")
		.attr("stroke-width", function(d, i) {
			if (i == 7) {
				return "1";
			} else {
				return "0.5";
			}
		});


		// Make the dots for 1990

		var dots1990 = svg.selectAll("circle.y1990")
		.data(data)
		.enter()
		.append("circle");

		dots1990
		.attr("class", "y1990")
		.attr("cx", function(d) {
			return margin.left + widthScale(+d.year1990);
		})
		.attr("r", heightScale.rangeBand()/2)
		.attr("cy", function(d) {
			return heightScale(d.name) + heightScale.rangeBand()/2;
		})
		.style("stroke", function(d){
			if (d.name === "United States of America") {
				return "black";
			}
		})
		.style("fill", function(d){
			if (d.name === "United States of America") {
				return "darkorange";
			}
		})
		.append("title")
		.text(function(d) {
			return d.name + " in 1990: " + d.year1990;
		});

		// Make the dots for 2013

		var dots2013 = svg.selectAll("circle.y2013")
		.data(data)
		.enter()
		.append("circle");

		dots2013
		.attr("class", "y2013")
		.attr("cx", function(d) {
			return margin.left + widthScale(+d.year2013);
		})
		.attr("r", heightScale.rangeBand()/2)
		.attr("cy", function(d) {
			return heightScale(d.name) + heightScale.rangeBand()/2;
		})
		.style("stroke", function(d){
			if (d.name === "United States of America") {
				return "black";
			}
		})
		.style("fill", function(d){
			if (d.name === "United States of America") {
				return "#476BB2";
			}
		})
		.append("title")
		.text(function(d) {
			return d.name + " in 2013: " + d.year2013;
		});

			// 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")
			.text("Maternal Mortality Rate per 100,000 live births");
			
			svg.append("text")
				.attr("class", "ylabel")
				.attr("transform", "rotate(-90)")
        		.attr("y", 100)
        		.attr("x", 0 - (height / 2))
        		.style("text-anchor", "end")
        		.text("Country");
	// Style one of the Y labels bold:
	// d3.select(allYAxisLabels[]).style(
	// 	"font-weight", fuction(d) {if (d.name === "United States of America"){
	// 		return "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

	// You could also use tick formatting to get a % sign on each axis tick

});

index.html

<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Maternal Mortality Rate in 2013 by Country</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		
	</head>
	<body>

		<h1>Maternal Mortality Rate by Country, <div class="y1990">1990</div> versus <div class="y2013">2013</div></h1>
		<p>The Maternal Mortality Rate (per 100,000 live births) in 2013 by Country.</p>
		<p>The maternal mortality rate is compared to the country's respective GDP (measured in millions of dollars). The pink dot represents the United States.</p>

    	<p>Source: WHO (2015) Global Health Observatory Data Repository, Source: World Bank</p>
    	<script type="text/javascript" src="dotplot.js"></script>

		

	</body>
</html>

maternalMortalityGdp.csv

style.css

body {
	font-family: 'Verdana', sans-serif;
	font-size: 14px;
	background-color: #fff;
}


svg {
	background-color: white;
}


p {
	font-size: 11pt;
	color: gray;
}

div.y2013 {
	color: #6699FF;
	display: inline;
}
div.y1990 {
	color: orange;
	display: inline;
}

svg {
	background-color: white;
}

circle {
	stroke-width: 1;
}

circle.y2013 {
	fill: #6699FF;
}

circle.y1990 {
	fill: orange;
}

circle:hover {
	stroke-width: 3;
	stroke: white;
}

line.grid {
	stroke: #eee;
}

line.between {
	stroke: black;
}

.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis text {
	font-size: 11px;
}


.ylabel,.xlabel {
	font-size: 14px;
	color: #0099FF;
	font-weight: bold;
}

/*circle:hover
{
	fill: #FF9900;
}
*/

thumbnail.png