Barley Yield - L4

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Barley Harvest</title>
		<style>
			h1 {
				font: 34px "Permanent Marker";
				text-decoration: underline;
				color: #4b4742;
				margin: 0;
			}
			div {
				text-align: center;
				font-family: "Permanent Marker";
				color: #666;
			}
			.y1931 {
				color: #97BE53;
			}
			.y1932 {
				color: #C5604B;
			}
			text {
			  font: 13px "Permanent Marker";
			  fill: #666;
			}
			.axis text {
			  font: 12px "Amatic SC";
			  fill: #666;
			}
			.axis path {
			  display: none;
			}
			.axis line {
			  stroke-width:1px;
			  stroke: #666;
			}
			.tick line {
				opacity: 0.2;
			}
		</style>
		<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
		<script src="https://d3js.org/d3.v3.js" charset="utf-8"></script>
	</head>
	<body>
		<section>
			<h1>Morris Goes Against the Grain</h1>
			<div>Change in Yield from <span class="y1931">1931</span> to <span class="y1932">1932</span></div>
		</section>
		<script>
			// Start by stating the margin convention
			var margin = {top: 10, right: 30, bottom: 2, left: 30},
				width = 900 - margin.right - margin.left,
				height = 540 - margin.top - margin.bottom;

// Set the scale ranges
			var xScale = d3.scale.linear()
				.range([0, width]);

d3.csv("barley_yields.csv", function(error, data) {

// create input domain of site for the y-axis
				// https://stackoverflow.com/questions/15125920/how-to-get-distinct-values-from-an-array-of-objects-in-javascript
				var flags = [],
					sites = [],
					topVarietal = ["Glabron", "Manchuria", "Peatland", "Trebi", "Velvet"],
					l = data.length, i;

for( i=0; i<l; i++) {
				    if( flags[data[i].site]) continue;
				    flags[data[i].site] = true;
				    sites.push(data[i].site);
				}

console.log(sites);

// reduce the data set to only the years Revolution focused on
				data = data.filter(function(d) {
					return topVarietal.indexOf(d.variety) != -1 && (d.year == "1931" || d.year == "1932");
				});

// cleanse the data to use for arithmatic later
				data.forEach(function(d) {
					d.year = +d.year;
					d.yield = +d.yield;
				});

// set scale domains
				xScale
					.domain([20, 55]);

var xAxis = d3.svg.axis()
					.scale(xScale)
					.ticks(10)
					.tickSize(-height)
					.orient("bottom");

var yScale = d3.scale.ordinal()
					.domain(sites)
					.rangePoints([height, 0], 1);

var svg = d3.select("h1").append("svg")
					.attr("width", width + margin.right + margin.left)
					.attr("height", height + margin.top + margin.bottom);

var groups = svg
					.selectAll("g");

// Explain why I only need a select here
				var bar = groups.select("rect")
					.data(nest)
					.enter()
					.append("rect")
					.attr("x", function(d) {
						// Account for Morris starting in the opposite position of other sites
						return xScale(d3.min([d.values[0].values[0], d.values[1].values[0]]));
					})
					.attr("y", function(d) { return yScale(d.key); })
					.attr("width", function(d) {
						// Rect width cannot be negative
						return Math.abs(xScale(d.values[1].values[0]) - xScale(d.values[0].values[0]));
					})
					.attr("height", "1");

var circle1931 = groups.select("circle")
					.data(nest)
					.enter()
					.append("circle")
						.attr("cx", function(d) {
							return xScale(d.values[0].values[0]); })
						.attr("cy", function(d) { return yScale(d.key); })
						.attr("r", "5")
						.attr("fill", "#97BE53");

// Why when my axis is placed first does text not show up?
				var text = groups.select("text")
					.data(nest)
					.enter()
					.append("text")
						.attr("x", function(d) {
							return d3.min([xScale(d.values[1].values[0]),xScale(d.values[0].values[0])]) + 15;
						})
							//function(d) { return xScale(d.values[0].values); })
						.attr("y", function(d) { return yScale(d.key); })
						.style("font-family", "Amatic SC")
            .style("font-size", "14")
            .style("fill", "#666")
						.text(function(d) { return d.key; });

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + margin.left + "," + height + ")")
					.call(xAxis);

// svg.append("text")
				// 	.attr("class", "x axis")
				// 	.attr("text-anchor", "middle")
				// 	.attr("transform", "translate(" + width/2 + "," + (height + 35) + ")")
				// 	// I wish I knew how to color 1931 green and 1932 red
				// 	.text("Change in Yield from 1931 to 1932");

});
		</script>
	</body>
</html>

https://d3js.org/d3.v3.js