kpq · January 31, 2016 15:38
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <style type="text/css">
  /*css to go here*/
  body {
  	font-family: arial;
  	font-size: 12px;
  }

  .g-chart-container {
  	width:350px;
  	margin:10px 0;
  }

  .g-location {
  	text-align: center;
  	font-weight: bold;
  	font-size:14px; 
  	margin: 3px 0;
  }
  .g-variety-group.g-increasing line {
  	stroke:#7FA4CE;
  }

  .g-variety-group.g-decreasing line {
  	stroke: #BE6C8D;
  }
  .g-variety-group.g-decreasing circle {
  	fill: #BE6C8D;
  }
  .g-variety-group.g-increasing circle {
  	fill: #7FA4CE;
  }

  circle.g-1931-yield {
  	stroke: #000; ;
  	fill: #fff !important;
  }

  .g-variety-group line {
  	stroke: #ccc;
  	stroke-width: 4px;
  }

 	.axis line {
    fill: none;
    stroke: #ccc;
    stroke-dasharray: 2px 3px;
    shape-rendering: crispEdges;
    stroke-width: 1px;
  }

  .axis text {
    font-family: arial, sans-serif;
    font-size: 12px;
    pointer-events: none;
    fill: #777;
  }

  .domain {
 		display: none;
  }

  .y.axis text {
    text-anchor: end !important;
    font-size:12px;
  }
 </style>

 <body>
 	<div class="g-chart-container">
 		<h5 class="g-location"></h5>
 		<div class="g-chart"></div>
 	</div>
 </body>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

 <script>
 //JS to go here

 //which location do I want to chart?
 var myLocationName = "University Farm";

 var margin = {top: 20, right: 10, bottom: 20, left: 130};

 var width = 720 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

 var svg = d3.select("body").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 + ")");

 //set domains once we load data
 var xScale = d3.scale.linear()
 		.range([0,width]);

 //ordinal scale - y0 is just a naming convention
 var y0 = d3.scale.ordinal()
 		.rangeBands([height, 0], 0.2);

 var yAxis = d3.svg.axis()
 		.scale(y0)
 		.tickSize(-width)
 		.tickPadding(13)
 		.orient("left");

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

 d3.tsv("https://raw.githubusercontent.com/thisismetis/nyc16_dataviz3/master/class3/barley.tsv?token=AC7uVd2ad4nXsDk5GMy0h3eOfpTA9LVLks5Wt2STwA%3D%3D", ready);

 function ready(err, data) {
 	if (err) throw "error loading data";

 	//format data
 	data.forEach(function(d) {
 		d.year = +d.year;
 		d.yield = +d.yield;
 	});

 	// an array for just the location I want
 	var myLocationData = data.filter(function(d) {
 		return d.site === myLocationName;
 	});

 	//tricky, but insert hierarchy into our data. we'll go over this.
 	var yieldsByVariety = d3.nest()
 			.key(function(d) { return d.variety; })
 			.entries(myLocationData);

 	//add a flag for each variety to see whether it increased
 	yieldsByVariety.forEach(function(d) {
 		d.increasing = (d.values[0].yield > d.values[1].yield);
 	});

 	//make a headline
 	d3.select(".g-location").text(myLocationName);

 	//set domains
 	var maxYield = d3.max(data, function(d) { return d.yield; });

 	xScale.domain([0, maxYield ]);
 	y0.domain(d3.set(data.map(function(d) { return d.variety; })).values());

 	//draw your axes
 	svg.append("g")
 			.attr("class", "y axis")
 			.call(yAxis);

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

 	//data join -- draw groups first
 	var varietyGroup = svg.selectAll(".g-variety-group")
 			.data(yieldsByVariety)
 			.enter()
 			.append("g")
 			.attr("class", function(d) { return "g-variety-group " + (d.increasing ? "g-increasing" : "g-decreasing"); })
 			.attr("transform", function(d) {
 				return "translate(0," + (y0(d.key) + y0.rangeBand()/2) + ")";
 			});

 	varietyGroup.append("line")
 			.attr("x1", function(d) { return xScale(d.values[0].yield); })
 			.attr("x2", function(d) { return xScale(d.values[1].yield); });

 	varietyGroup.append("circle")
 			.attr("class", "g-1931-yield")
 			.attr("r", 2)
 			.attr("cx", function(d) { return xScale(d.values[0].yield); });

 	varietyGroup.append("circle")
 			.attr("r", 4)
 			.attr("cx", function(d) { return xScale(d.values[1].yield); });

 }


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

	<style type="text/css">
	/css to go here/
	body {
	font-family: arial;
	font-size: 12px;
	}

	.g-chart-container {
	width:350px;
	margin:10px 0;
	}

	.g-location {
	text-align: center;
	font-weight: bold;
	font-size:14px;
	margin: 3px 0;
	}
	.g-variety-group.g-increasing line {
	stroke:#7FA4CE;
	}

	.g-variety-group.g-decreasing line {
	stroke: #BE6C8D;
	}
	.g-variety-group.g-decreasing circle {
	fill: #BE6C8D;
	}
	.g-variety-group.g-increasing circle {
	fill: #7FA4CE;
	}

	circle.g-1931-yield {
	stroke: #000; ;
	fill: #fff !important;
	}

	.g-variety-group line {
	stroke: #ccc;
	stroke-width: 4px;
	}

	.axis line {
	fill: none;
	stroke: #ccc;
	stroke-dasharray: 2px 3px;
	shape-rendering: crispEdges;
	stroke-width: 1px;
	}

	.axis text {
	font-family: arial, sans-serif;
	font-size: 12px;
	pointer-events: none;
	fill: #777;
	}

	.domain {
	display: none;
	}

	.y.axis text {
	text-anchor: end !important;
	font-size:12px;
	}
	</style>

	<body>
	<div class="g-chart-container">
	<h5 class="g-location"></h5>
	<div class="g-chart"></div>
	</div>
	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

	<script>
	//JS to go here

	//which location do I want to chart?
	var myLocationName = "University Farm";

	var margin = {top: 20, right: 10, bottom: 20, left: 130};

	var width = 720 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	var svg = d3.select("body").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 + ")");

	//set domains once we load data
	var xScale = d3.scale.linear()
	.range([0,width]);

	//ordinal scale - y0 is just a naming convention
	var y0 = d3.scale.ordinal()
	.rangeBands([height, 0], 0.2);

	var yAxis = d3.svg.axis()
	.scale(y0)
	.tickSize(-width)
	.tickPadding(13)
	.orient("left");

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

	d3.tsv("https://raw.githubusercontent.com/thisismetis/nyc16_dataviz3/master/class3/barley.tsv?token=AC7uVd2ad4nXsDk5GMy0h3eOfpTA9LVLks5Wt2STwA%3D%3D", ready);

	function ready(err, data) {
	if (err) throw "error loading data";

	//format data
	data.forEach(function(d) {
	d.year = +d.year;
	d.yield = +d.yield;
	});

	// an array for just the location I want
	var myLocationData = data.filter(function(d) {
	return d.site === myLocationName;
	});

	//tricky, but insert hierarchy into our data. we'll go over this.
	var yieldsByVariety = d3.nest()
	.key(function(d) { return d.variety; })
	.entries(myLocationData);

	//add a flag for each variety to see whether it increased
	yieldsByVariety.forEach(function(d) {
	d.increasing = (d.values[0].yield > d.values[1].yield);
	});

	//make a headline
	d3.select(".g-location").text(myLocationName);

	//set domains
	var maxYield = d3.max(data, function(d) { return d.yield; });

	xScale.domain([0, maxYield ]);
	y0.domain(d3.set(data.map(function(d) { return d.variety; })).values());

	//draw your axes
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

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

	//data join -- draw groups first
	var varietyGroup = svg.selectAll(".g-variety-group")
	.data(yieldsByVariety)
	.enter()
	.append("g")
	.attr("class", function(d) { return "g-variety-group " + (d.increasing ? "g-increasing" : "g-decreasing"); })
	.attr("transform", function(d) {
	return "translate(0," + (y0(d.key) + y0.rangeBand()/2) + ")";
	});

	varietyGroup.append("line")
	.attr("x1", function(d) { return xScale(d.values[0].yield); })
	.attr("x2", function(d) { return xScale(d.values[1].yield); });

	varietyGroup.append("circle")
	.attr("class", "g-1931-yield")
	.attr("r", 2)
	.attr("cx", function(d) { return xScale(d.values[0].yield); });

	varietyGroup.append("circle")
	.attr("r", 4)
	.attr("cx", function(d) { return xScale(d.values[1].yield); });

	}


	</script>