kpq · October 10, 2017 00:05
diff --git a/barley-v2.tsv b/barley-v2.tsv
diff --git a/index.html b/index.html

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

 <style type="text/css">
  /*css to go here*/

  svg {
  	border: 1px solid #f0f;
  }

  .variety-group line {
    stroke: #ccc;
  }

  .y1931 {
    fill: #ccc;
  }

  .y1932 {
    fill: red;
  }


 </style>

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

 </body>

 <script src="https://d3js.org/d3.v4.min.js"></script>

 <script>
  //JS to go here

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

  var width = 400 - margin.left - margin.right,
      height = 300 - 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 + ")");

  d3.tsv("barley-v2.tsv", ready);

  function ready(err, data) {
    if (err) console.warn(err, "error loading data");
    
    // format your data
    data.forEach(function(d) {
      d.y1931 = +d.y1931;
      d.y1932 = +d.y1932;
      d.diff = d.y1931 - d.y1932;
    });

    data = data.filter(function(d) {
      return d.site == "University Farm";
    });

    var xscale = d3.scaleLinear()
      .domain([20,50])
      .range([0,width]);

    var yscale = d3.scalePoint()
      .range([height, 0])
      .domain(["Glabron", "Manchuria", "No. 457", "No. 462", "No. 475", "Peatland", "Svansota", "Trebi", "Velvet", "Wisconsin No. 38"]);

    var yaxis = d3.axisLeft(yscale);
    var xaxis = d3.axisBottom(xscale);

    svg.append("g").call(xaxis);
    svg.append("g").call(yaxis);

    var varietyGroup = svg.selectAll(".variety-group")
      .data(data)
      .enter()
      .append("g")
      .attr('class', 'variety-group')
      .attr("transform", function(d) {
        return "translate(0," + yscale(d.variety) + ")";
      });

    varietyGroup.append("line")
      .attr("x1", function(d) { return xscale(d.y1931); })
      .attr("x2", function(d) { return xscale(d.y1932); })
      .attr("y1", 0)
      .attr("y2", 0);

    varietyGroup.append("circle")
      .attr("class", "y1931")
      .attr("cx", function(d) { return xscale(d.y1931); })
      .attr("r", 3);

    varietyGroup.append("circle")
      .attr("class", "y1932")
      .attr("cx", function(d) { return xscale(d.y1932); })
      .attr("r", 6);

    














  }



 </script>
variety	site	y1931	y1932
Glabron	Crookston	38.13333	26.16667
Manchuria	Crookston	39.93333	32.96667
No. 457	Crookston	45.66667	34.33333
No. 462	Crookston	48.56666	30.53333
No. 475	Crookston	44.1	32.13333
Peatland	Crookston	41.6	25.23333
Svansota	Crookston	40.46667	20.63333
Trebi	Crookston	46.93333	41.83333
Velvet	Crookston	41.33333	32.06666
Wisconsin No. 38	Crookston	49.86667	35.9
Glabron	Duluth	29.66667	25.86667
Manchuria	Duluth	28.96667	22.56667
No. 457	Duluth	33.6	22.7
No. 462	Duluth	28.1	22.5
No. 475	Duluth	33.06666	27.36667
Peatland	Duluth	32	31.36667
Svansota	Duluth	25.7	22.23333
Trebi	Duluth	33.93333	30.6
Velvet	Duluth	26.3	22.46667
Wisconsin No. 38	Duluth	31.6	29.33333
Glabron	Grand Rapids	29.13333	14.43333
Manchuria	Grand Rapids	32.96667	22.13333
No. 457	Grand Rapids	32.16667	19.46667
No. 462	Grand Rapids	24.93334	19.9
No. 475	Grand Rapids	19.7	15.23333
Peatland	Grand Rapids	34.7	26.76667
Svansota	Grand Rapids	29.66667	16.63333
Trebi	Grand Rapids	29.76667	20.63333
Velvet	Grand Rapids	23.03333	32.23333
Wisconsin No. 38	Grand Rapids	34.46667	20.66667
Glabron	Morris	28.76667	35.13333
Manchuria	Morris	27.43334	34.36666
No. 457	Morris	28.7	43.53334
No. 462	Morris	30.36667	47
No. 475	Morris	22.6	44.23333
Peatland	Morris	29.86667	43.2
Svansota	Morris	25.76667	35.03333
Trebi	Morris	43.76667	46.63333
Velvet	Morris	26.13333	38.83333
Wisconsin No. 38	Morris	29.46667	47.16667
Glabron	University Farm	43.06666	36.8
Manchuria	University Farm	27	26.9
No. 457	University Farm	43.26667	26.43334
No. 462	University Farm	36.6	25.56667
No. 475	University Farm	24.66667	30
Peatland	University Farm	32.76667	28.06667
Svansota	University Farm	35.13333	27.43334
Trebi	University Farm	36.56666	29.06667
Velvet	University Farm	39.9	26.8
Wisconsin No. 38	University Farm	39.3	38
Glabron	Waseca	55.2	37.73333
Manchuria	Waseca	48.86667	33.46667
No. 457	Waseca	58.1	42.2
No. 462	Waseca	65.7667	44.7
No. 475	Waseca	46.76667	41.26667
Peatland	Waseca	48.56666	36.03333
Svansota	Waseca	47.33333	38.5
Trebi	Waseca	63.8333	49.2333
Velvet	Waseca	50.23333	37.4
Wisconsin No. 38	Waseca	58.8	58.16667

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

	<style type="text/css">
	/css to go here/

	svg {
	border: 1px solid #f0f;
	}

	.variety-group line {
	stroke: #ccc;
	}

	.y1931 {
	fill: #ccc;
	}

	.y1932 {
	fill: red;
	}


	</style>

	<body>

	<h1>Barley!</h1>

	</body>

	<script src="https://d3js.org/d3.v4.min.js"></script>

	<script>
	//JS to go here

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

	var width = 400 - margin.left - margin.right,
	height = 300 - 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 + ")");

	d3.tsv("barley-v2.tsv", ready);

	function ready(err, data) {
	if (err) console.warn(err, "error loading data");

	// format your data
	data.forEach(function(d) {
	d.y1931 = +d.y1931;
	d.y1932 = +d.y1932;
	d.diff = d.y1931 - d.y1932;
	});

	data = data.filter(function(d) {
	return d.site == "University Farm";
	});

	var xscale = d3.scaleLinear()
	.domain([20,50])
	.range([0,width]);

	var yscale = d3.scalePoint()
	.range([height, 0])
	.domain(["Glabron", "Manchuria", "No. 457", "No. 462", "No. 475", "Peatland", "Svansota", "Trebi", "Velvet", "Wisconsin No. 38"]);

	var yaxis = d3.axisLeft(yscale);
	var xaxis = d3.axisBottom(xscale);

	svg.append("g").call(xaxis);
	svg.append("g").call(yaxis);

	var varietyGroup = svg.selectAll(".variety-group")
	.data(data)
	.enter()
	.append("g")
	.attr('class', 'variety-group')
	.attr("transform", function(d) {
	return "translate(0," + yscale(d.variety) + ")";
	});

	varietyGroup.append("line")
	.attr("x1", function(d) { return xscale(d.y1931); })
	.attr("x2", function(d) { return xscale(d.y1932); })
	.attr("y1", 0)
	.attr("y2", 0);

	varietyGroup.append("circle")
	.attr("class", "y1931")
	.attr("cx", function(d) { return xscale(d.y1931); })
	.attr("r", 3);

	varietyGroup.append("circle")
	.attr("class", "y1932")
	.attr("cx", function(d) { return xscale(d.y1932); })
	.attr("r", 6);
















	}



	</script>