jadiehm/barley.csv

## barley.csv

          
            yield
            variety
            year
            site

            
              48.86667
              Manchuria
              1931
              Waseca

            
              55.2
              Glabron
              1931
              Waseca

            
              47.33333
              Svansota
              1931
              Waseca

            
              50.23333
              Velvet
              1931
              Waseca

            
              63.8333
              Trebi
              1931
              Waseca

            
              58.1
              No. 457
              1931
              Waseca

            
              65.7667
              No. 462
              1931
              Waseca

            
              48.56666
              Peatland
              1931
              Waseca

            
              46.76667
              No. 475
              1931
              Waseca

            
              58.8
              Wisconsin No. 38
              1931
              Waseca

            
              33.46667
              Manchuria
              1932
              Waseca

            
              37.73333
              Glabron
              1932
              Waseca

            
              38.5
              Svansota
              1932
              Waseca

            
              37.4
              Velvet
              1932
              Waseca

            
              49.2333
              Trebi
              1932
              Waseca

            
              42.2
              No. 457
              1932
              Waseca

            
              44.7
              No. 462
              1932
              Waseca

            
              36.03333
              Peatland
              1932
              Waseca

            
              41.26667
              No. 475
              1932
              Waseca

            
              58.16667
              Wisconsin No. 38
              1932
              Waseca

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

<style type="text/css">

 body {
   font-family: arial, sans;
   font-size: 11px;
}

svg {
 border: none;
}

.right-align{
	text-align: right;
}

.left-align{
	text-align: left;
}

.axis line,
.axis path {
 	fill: none;
 	stroke: #d3d3d3;
 	shape-rendering: crispEdges;
}

.xaxis text {
   font-weight: bold;
}

.d3-tip {
  line-height: 1;
  padding: 5px;
  background: white;
  color: black;
  text-align:right;
}

h2{
   margin-bottom:-.5em;
}

</style>

<body>

</body>

<h2>Waseca barley yields</h2>
<p><strong>1931–1932</strong></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

<script type="text/javascript">

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

var width = 350 - 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 + ")");

var xScale = d3.scale.linear()
   .range([0,width]);

var yScale = d3.scale.linear()
   .range([height,0]);

var xAxis = d3.svg.axis()
   .scale(xScale)
   .orient("bottom")
   .ticks(1)
   .tickSize(0)
   .tickFormat(d3.format("d"));

var y2Axis = d3.svg.axis()
   .scale(yScale)
   .orient("right")
   .ticks(0)
   .tickSize(0);

var y1Axis = d3.svg.axis()
   .scale(yScale)
   .orient("left")
   .ticks(0)
   .tickSize(0);

//tooltips
var tip = d3.tip()
   .attr('class', 'd3-tip')
   .offset([14, 72])
   .html(function(d) {
    return "<strong>" + d.variety + "</strong>: " + d3.round(d.yield, 1);
  })

svg.call(tip);

d3.csv("barley.csv", ready);

function ready(error, data) {
 if (error) return console.warn(error);

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

//update domains based on extrema, which has pluses and minuses
xScale.domain(d3.extent(data, function(d) { return d.year; }));
yScale.domain(d3.extent(data, function(d) { return d.yield; }));

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

svg.append("g")
   .attr("class", "y2 axis")
   .attr("transform", "translate(" + width + ",0)")
   .call(y2Axis);

svg.append("g")
   .attr("class", "y1 axis")
   .call(y1Axis);

//move axis text
d3.selectAll(".xaxis text")
   .attr("transform", function(d) {
             return "translate(0," + this.getBBox().height + ")";
         });

//circles
var circleGroup = svg.selectAll(".circle-group")
   .data(data)
   .enter()
   .append("g")
   .attr("class", "circle-group")
   .attr("transform", function(d) { return "translate(" + xScale(d.year) + "," + yScale(d.yield) + ")"; });

circleGroup.append("circle")
   .attr("r", 3.5)
   .attr("fill", function(d){
      if (d.variety === "Wisconsin No. 38"){
         return "orange"
      }
      else {
         return "gray"
      }
   })
   .attr("opacity", .8)
   .on('mouseover', tip.show)
   .on('mouseout', tip.hide);

//labels
circleGroup.append("text")
   .text(function(d) { return d.variety; })
   .attr("dx", function(d){
   		if (d.year === "1931"){
   			return -92;
   		}
   		else {
   			return 5;
   		}
   })
   .attr("dy", 3)
   .attr("class", function(d){
   		if (d.year === "1931"){
   			return "right-align";
   		}
   		else {
   			return "left-align";
   		}
   });

//lines
var slopeGroup = svg.selectAll(".slopeGroup")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "slope-group")
	.attr({
      x1: function(d){return "translate(" + margin.left + ")"},
      x2: function(d){return "translate(" + width + ")"},
      y1: function(d){return yScale(d.yield)},
      y2: function(d){return yScale(d.yield)}
   });


slopeGroup.append("line")
   .attr("stroke", "black")
   .attr("stroke-width", 2);


 }
</script>
yield	variety	year	site
48.86667	Manchuria	1931	Waseca
55.2	Glabron	1931	Waseca
47.33333	Svansota	1931	Waseca
50.23333	Velvet	1931	Waseca
63.8333	Trebi	1931	Waseca
58.1	No. 457	1931	Waseca
65.7667	No. 462	1931	Waseca
48.56666	Peatland	1931	Waseca
46.76667	No. 475	1931	Waseca
58.8	Wisconsin No. 38	1931	Waseca
33.46667	Manchuria	1932	Waseca
37.73333	Glabron	1932	Waseca
38.5	Svansota	1932	Waseca
37.4	Velvet	1932	Waseca
49.2333	Trebi	1932	Waseca
42.2	No. 457	1932	Waseca
44.7	No. 462	1932	Waseca
36.03333	Peatland	1932	Waseca
41.26667	No. 475	1932	Waseca
58.16667	Wisconsin No. 38	1932	Waseca
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style type="text/css">

	body {
	font-family: arial, sans;
	font-size: 11px;
	}

	svg {
	border: none;
	}

	.right-align{
	text-align: right;
	}

	.left-align{
	text-align: left;
	}

	.axis line,
	.axis path {
	fill: none;
	stroke: #d3d3d3;
	shape-rendering: crispEdges;
	}

	.xaxis text {
	font-weight: bold;
	}

	.d3-tip {
	line-height: 1;
	padding: 5px;
	background: white;
	color: black;
	text-align:right;
	}

	h2{
	margin-bottom:-.5em;
	}

	</style>

	<body>

	</body>

	<h2>Waseca barley yields</h2>
	<p><strong>1931–1932</strong></p>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

	<script type="text/javascript">

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

	var width = 350 - 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 + ")");

	var xScale = d3.scale.linear()
	.range([0,width]);

	var yScale = d3.scale.linear()
	.range([height,0]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(1)
	.tickSize(0)
	.tickFormat(d3.format("d"));

	var y2Axis = d3.svg.axis()
	.scale(yScale)
	.orient("right")
	.ticks(0)
	.tickSize(0);

	var y1Axis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(0)
	.tickSize(0);

	//tooltips
	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([14, 72])
	.html(function(d) {
	return "<strong>" + d.variety + "</strong>: " + d3.round(d.yield, 1);
	})

	svg.call(tip);

	d3.csv("barley.csv", ready);

	function ready(error, data) {
	if (error) return console.warn(error);

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

	//update domains based on extrema, which has pluses and minuses
	xScale.domain(d3.extent(data, function(d) { return d.year; }));
	yScale.domain(d3.extent(data, function(d) { return d.yield; }));

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

	svg.append("g")
	.attr("class", "y2 axis")
	.attr("transform", "translate(" + width + ",0)")
	.call(y2Axis);

	svg.append("g")
	.attr("class", "y1 axis")
	.call(y1Axis);

	//move axis text
	d3.selectAll(".xaxis text")
	.attr("transform", function(d) {
	return "translate(0," + this.getBBox().height + ")";
	});

	//circles
	var circleGroup = svg.selectAll(".circle-group")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "circle-group")
	.attr("transform", function(d) { return "translate(" + xScale(d.year) + "," + yScale(d.yield) + ")"; });

	circleGroup.append("circle")
	.attr("r", 3.5)
	.attr("fill", function(d){
	if (d.variety === "Wisconsin No. 38"){
	return "orange"
	}
	else {
	return "gray"
	}
	})
	.attr("opacity", .8)
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide);

	//labels
	circleGroup.append("text")
	.text(function(d) { return d.variety; })
	.attr("dx", function(d){
	if (d.year === "1931"){
	return -92;
	}
	else {
	return 5;
	}
	})
	.attr("dy", 3)
	.attr("class", function(d){
	if (d.year === "1931"){
	return "right-align";
	}
	else {
	return "left-align";
	}
	});

	//lines
	var slopeGroup = svg.selectAll(".slopeGroup")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "slope-group")
	.attr({
	x1: function(d){return "translate(" + margin.left + ")"},
	x2: function(d){return "translate(" + width + ")"},
	y1: function(d){return yScale(d.yield)},
	y2: function(d){return yScale(d.yield)}
	});


	slopeGroup.append("line")
	.attr("stroke", "black")
	.attr("stroke-width", 2);


	}
	</script>