Barley Farming 1931-1932

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

body {
    font-family: arial, sans;
    font-size: 11px;
    margin: 10px auto;
    width:1220px;
  }

.axis text {
    font-size: 12px;
    fill: #777;
  }

.axis path {
    display: none;
  }

.axis line {
    stroke-width:.3px;
    stroke: #dedede;
  }

.location-container {
    display: inline-block;
    margin-right:10px;
  }

.variety-line {
    stroke-width: 2.5px;
    fill: none;
    cursor: pointer;
  }

.info{
    position: absolute;
    top: 10px;
    left: 250px;
  }

.legend{
    position: absolute;
    left: 1250px;
    top: 100px;
    border: thin solid black;
  }

.legend text{
    position: relative;
    text-align: center;
    display: block;
    border-bottom: thin solid black;
    padding: 10px 30px 10px 30px;
  }

.typeToggle{
    text-align: center;
    padding-top: 7px;
  }

</style>

<div class="legend">
  <text>Type of Barley</text>
    <div class="typeToggle">
            Peatland
            <input id ="check-text-labels" type="checkbox" name="Peatland" checked onclick="checkAddress(this)">
    </div>
    <div class="typeToggle">
            Peatland
            <input id ="check-text-labels" type="checkbox" name="Waseca" checked onclick="checkAddress(this)">
    </div>
    <div class="typeToggle">
            Manchuria
            <input id ="check-text-labels" type="checkbox" name="Manchuria" checked onclick="checkAddress(this)">
    </div>
    <div class="typeToggle">
            Glabron
            <input id ="check-text-labels" type="checkbox" name="Glabron" checked onclick="checkAddress(this)">
    </div>
    <div class="typeToggle">
            Svansota
            <input id ="check-text-labels" type="checkbox" name="Svansota" checked onclick="checkAddress(this)">
    </div>
    <div class="typeToggle">
            Velvet
            <input id ="check-text-labels" type="checkbox" name="Velvet" checked onclick="checkAddress(this)">
    </div>
    <div class="typeToggle">
            Trebi
            <input id ="check-text-labels" type="checkbox" name="Trebi" checked onclick="checkAddress(this)">
    </div>
    <div class="typeToggle">
            No. 457
            <input id ="check-text-labels" type="checkbox" name="No-457" checked onclick="checkAddress(this)">
    </div>
    <div class="typeToggle">
            No. 462
            <input id ="check-text-labels" type="checkbox" name="No-462" checked onclick="checkAddress(this)">
    </div>
    <div class="typeToggle">
            No. 475
            <input id ="check-text-labels" type="checkbox" name="No-475" checked onclick="checkAddress(this)">
    </div>
    <div class="typeToggle">
            Wisconsin No. 38
            <input id ="check-text-labels" type="checkbox" name="Wisconsin-No-38" checked onclick="checkAddress(this)">
    </div>
  </div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script type="text/javascript">
  
var margin = {top: 20, right: 50, bottom: 20, left: 10};

//For nice x axis formatting
var xOffset = 8;

var width = 360 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

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

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

var xAxis = d3.svg.axis()
    .scale(xScale)
    .tickSize(-height)
    .tickPadding(8)
    .tickFormat(d3.round)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(-width)
    .tickPadding(8)
    .orient("right");

d3.tsv("data.tsv", ready);

function fetchInt(string){
    return +string.replace(",","");
  }

function mouseover(){
    var element = d3.select(this);
    var data = element[0][0].__data__;
    var variety = element[0][0].__data__[0].values[0].variety;
    var delta =  Math.round(element[0][0].__data__[1].values[0].yield - element[0][0].__data__[0].values[0].yield);
    if(delta>0){delta = "+"+delta;}
    var area = element[0][0].__data__[0].values[0].site;
    element.style("stroke","black");

d3.select(".info").text("Area: "+area+" Type: "+variety+"     Delta: "+delta);
  }

function mouseleave(){
    var element = d3.select(this);
    element.style("stroke",function(d){return (d[0].values[0].yield < d[1].values[0].yield)?"steelblue":"red";});
    d3.select(".info").text("");
  }

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

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

function makeComparisonChart(areaInfo) {

var line = d3.svg.line()
    .x(function(d) { return xScale(d.values[0].year)+xOffset; })
    .y(function(d) { return yScale(d.values[0].yield); });

yScale.domain(d3.extent(data, function(d) { return d.yield  ; }));
    xScale.domain(d3.extent(data, function(d) { return d.year; }));

var smallMultiple = d3.select("body")
        .append("div")
        .attr("class", "location-container");

smallMultiple.append("h2")
        .text(areaInfo.key);

var svg = smallMultiple.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 + ")");

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

svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + (width+15) + ",0)")
        .call(yAxis);

areaInfo.values.forEach(function(d){
      svg.append("path")
        .attr("class","variety-line "+d.key.split(" ").join("-").split(".").join(""))
        .datum(d.values)
        .attr("d", line)
        .style("stroke",function(d){return (d[0].values[0].yield < d[1].values[0].yield)?"steelblue":"red";})
        .on("mouseover",mouseover)
        .on("mouseleave",mouseleave);
    });
  
  }

nest.forEach(function(d){
    makeComparisonChart(d);
  });

}

</script>

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