Barley

<!DOCTYPE html>
<meta charset="utf-8">

body {
  	background: #fefefe;
  }

path.domain {
  	fill:none;
  }
  div.title {
  	/*margin:45px auto 100px auto;*/
  	width:150px;
  	float:left;
  	margin-right:50px;
  	margin-top:28px;
  	position:fixed;
  }

div.title p{
  	font-size:14px;
  	text-align:right;
  	margin-top:20px;
  	border-top:1px solid #ccc;
  	padding-top: 10px;
  	line-height:14px;
  }

span.emoji {
  	font-size:18px;
  }
  div.graphs {
  	float:right;
  	width: 500px;
  }

div.container {
  	margin:20px auto 50px auto;
  	width:700px;
  }

h1 {
  	text-align:right;
  	font-family:sans-serif;
  	font-size:16px;
  	line-height:10px;
  }

.axis text {
    font-size: 11px;
    fill: #666;
    font-family:sans-serif;
  }

.y.axis path {
    display: none;
  }

.y.axis line {
    stroke-width:1px;
    stroke: #111;
  }

svg {
  	margin-bottom:25px;
  }

rect.positive {
  	fill: #81bf40;
  }

rect.negative {
  	fill: #cc0066;
  }
  text.siteName {
  	font-size:16px;
  	font-weight:bold;
  	font-family:sans-serif;
  }
</style>

<body>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	
	<div class="container">
		<div class="title">
			<h1>Barley Yield</h1>
			<h1>% Change</h1>
			<h1>1931 vs 1932</h1>
			<p>
				<span class="emoji">🌱</span> In the early 1930s, agronomists in Minnesota ran a field trial to study the crop barley. At six sites in Minnesota, ten varieties of Barley were grown in each of two years. The following shows the percent change per variety of barley yield from 1931 to 1932 for each of these sites
				<br/><br/><br/>
				<span class="emoji">🙏</span> special thanks to <br/>Liv Buli, Kevin Quealy, Paul Buffa, and William S. Cleveland
			</p>
		</div>
		<div class="graphs"></div>
	</div>
	<script>

var margin = {top: 20, right: 10, bottom: 20, left: 10};
		var width = 450 - margin.left - margin.right,
    		height = 150 - margin.top - margin.bottom;

var container = d3.select(".graphs");
    	
    	ready = function(err, data) {
    		if( err ) alert(err.statusText);

var cropSites = d3.set(data.map(function(d){
				return d.site;
			})).values();

var formattedData = [];
			for( var i=0; i<cropSites.length; i++){
				var siteName = cropSites[i];
				var filteredData = data.filter(function(d){
					return d.site == siteName;
				});

var svg = container.append("svg")
	    			.attr("width", width + margin.left + margin.right)
	    			.attr("height", height + margin.top + margin.bottom)
	    			.append("g")
	    				.attr("transform","translate(" + margin.left + "," + margin.top + ")");
	    		
	    		drawBarGraph(svg, filteredData, siteName);
			}
		};

drawBarGraph = function(svg, filteredData, siteName) {

svg.append("text")
				.attr("class", "siteName")
				.attr("transform", "translate(15,0)")
				.text(siteName);

var cropVarieties = d3.set(filteredData.map(function(d){
				return d.variety;
			})).values();

//Format the data
			var varietyData = {};
			filteredData.forEach(function(d){
				if( !(d.variety in varietyData) ) {
					varietyData[d.variety] = {
						name: d.variety
					};
				}
				varietyData[d.variety][d.year] = d.yield;
			});

for(variety in varietyData) {
				varietyData[variety].diff = (varietyData[variety]["1932"] - varietyData[variety]["1931"]) / varietyData[variety]["1931"];
			}
			var finalData = [];
			for(variety in varietyData) {
				finalData.push(varietyData[variety]);
			}

var diffValues = finalData.map(function(d){ return d.diff; });

var xScale = d3.scale.ordinal()
					.rangeRoundPoints([0,width])
					.domain(cropVarieties);

var yScale = d3.scale.linear()
					.range([height,0])
					.domain([d3.min(diffValues)-.5,d3.max(diffValues)+.35]);
					// .domain([-1,1]);

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

var yAxis = d3.svg.axis()
							.ticks(2)
							.scale(yScale)
							.tickFormat(d3.format("0%"))
							// .tickValues(d3.extent(diffValues))
							.orient("left");

svg.append("g")
				.attr("class", "x axis")
				.call(xAxis)
				.selectAll("text")
					.attr("transform", "translate(-75,20) rotate(-45)");

svg.append("g")
				.attr("class", "y axis")
				.call(yAxis);

return graph;
    	};

d3.tsv("barley.tsv", ready);
	</script>
</body>

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