D3 Examples - Barley Farming 1931-1932

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
​
  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>
​
<body>
  <div class="info"></div>
​
  <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 checkAddress(element){
    
    var lines = d3.selectAll(".variety-line."+element.name);
    console.log(lines);
    if(element.checked){
      lines.transition().duration(500).style("opacity",1);
    }
    else{
      lines.transition().duration(500).style("opacity",0.1);
    }
  }
​
  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;    
  });
​
  var nest = d3.nest()
                .key(function(d){ return d.site;})
                .key(function(d){return d.variety;})
                .key(function(d){return d.year;})
                .entries(data);
​
  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>
    