kpq/index.html

## 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>