Barley

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

<body>
	<h1>Barley</h1>
</body>

var marginCore = 20;
	var margin = {top: 20, right: marginCore, bottom: 20, left: 100};
	var width = 300 - margin.left - margin.right,
		height = 150 - margin.top - margin.bottom;

d3.tsv("barley.tsv", function(error, data) {
		if (error) throw error;

// format your data
		data.forEach( function (d) {

d.yield = +d.yield;
			d.year = +d.year;

});

// use map to strip out jobs_change
		var morrisData = data.filter( function (d) { return d.site == "Morris"; });
		// console.log(morrisData);
		var allVarieties = data.map( function (d) { return d.variety; });
		var morrisVarieties = d3.set(allVarieties).values();
		// console.log(morrisVarieties);

var morrisYields = morrisData.map( function (d) { return d.yield; });
		// console.log(morrisYields);
		var morrisMax = d3.max(morrisYields);
		// console.log(morrisMax);

morrisData.sort( function (a,b) { return b.yield - a.yield; });

var dataYields = data.map( function (d) { return d.yield; });
		var dataMax = d3.max(dataYields);
		console.log(dataMax);

// x and y scale domain and range
		var xScale = d3.scale.linear()
			.range([0,width])
			.domain([0, dataMax]);

var yScale = d3.scale.ordinal()
			.rangeBands([height, 0], 0.333)
			.domain(morrisVarieties);

var yieldsBySite = d3.nest()
			.key( function (d) { return d.site; })
			// .rollup - use this to add additional nodes with which to sort
			// assign node another value to use to sort
			// really important to have entries
			.entries(data);

yieldsBySite

console.log(yieldsBySite);

var site = d3.select('body').selectAll('.g-site')
			.data(yieldsBySite)
			.enter()
			.append('div')
			.attr('class', function (d) { return d.key + ' g-site'; });

site.append('h3').text( function (d) { return d.key; });

var svg = site.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 + ")");

var xAxis = d3.svg.axis()
    		.scale(xScale)
    		.tickSize(3)
    		.tickPadding(0)
    		.orient("top");

var yAxis = d3.svg.axis()
    		.scale(yScale)
    		.tickSize(3)
    		.tickPadding(6)
    		.orient("left");

// var varietyGroup = svg.selectAll(".variety-group")
		// 	.data(morrisData)
		// 	.enter()
		// 	.append("g")
		// 	.attr("class", "variety-group")
		// 	.attr('transform', function (d) { return 'translate(0,' + yScale(d.variety) + ')'; })
		// 	// kind of weird, but because it's only morrisData, you only want for each variety
		// 	// I was really thrown when I .data(data) instead of .data(morrisData)
		// 	;

// // varietyGroup.append('circle')
		// // 	.attr('r', 5)
		// // 	.attr('cx', function (d) { return xScale(d.yield); });

// varietyGroup.append('rect')
		// 	.attr('fill-opacity', 0.5)
		// 	.attr('class', function (d) { return 'year-' + d.year; })
		// 	.attr('x', xScale(0))
		// 	.attr('width', function (d) { return xScale(d.yield); })
		// 	.attr('height', yScale.rangeBand());

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

var varietyGroup = svg.selectAll(".variety-group")
			.data( function (d) { return d.values; })
			// it's a data join in a data join
			// data join inception
			.enter()
			.append("g")
			.attr("class", "variety-group")
			.attr('transform', function (d) { return 'translate(0,' + yScale(d.variety) + ')'; })
			;

// varietyGroup.append('circle')
		// 	.attr('r', 5)
		// 	.attr('cx', function (d) { return xScale(d.yield); });

varietyGroup.append('rect')
			.attr('fill-opacity', 0.5)
			.attr('class', function (d) { return 'year-' + d.year; })
			.attr('x', xScale(0))
			.attr('width', function (d) { return xScale(d.yield); })
			.attr('height', yScale.rangeBand());

});

</script>

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