SlopegraphDRAFT

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

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>

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>

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js