D3 Examples - Barley Yields -- Crookston, v4

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
  /*css to go here*/
  body {
    font-family: arial;
    font-size: 12px;
  }
​
  .g-chart-container {
    width:350px;
    margin:10px 0;
  }
​
  .g-location {
    text-align: center;
    font-weight: bold;
    font-size:14px; 
    margin: 3px 0;
  }
​
  .axis line {
    fill: none;
    stroke: #ccc;
    stroke-dasharray: 2px 3px;
    shape-rendering: crispEdges;
    stroke-width: 1px;
  }
​
  .axis text {
    font-family: arial, sans-serif;
    font-size: 12px;
    pointer-events: none;
    fill: #777;
  }
​
  .domain {
    display: none;
  }
​
  .y.axis line {
  }
​
  .y.axis text {
    text-anchor: end !important;
    font-size:12px;
  }
​
  .g-slopegraph-path {
    stroke: #ccc;
    stroke-width: 2px;
    opacity:0.5;
  }
​
  .bounder {
    fill:none;
    stroke: red;
​
  }
​
</style>
​
<body>
    <div class="g-chart-container">
        <h5 class="g-location"></h5>
        <div class="g-chart"></div>
    </div>
</body>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<script>
//JS to go here
var myLocationName = "Crookston";
​
//https://bl.ocks.org/mbostock/5577023
var colors10 = ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a"]
;
​
var color = d3.scaleOrdinal()
        .range(colors10);
​
var margin = {top: 0, right: 100, bottom: 20, left: 100};
​
var width = 720 - 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 yScale = d3.scaleLinear()
        .range([height,0]);
​
var xScale = d3.scaleLinear()
        .range([0, width])
        .domain([1930.5, 1932.5]);
​
var xAxis = d3.axisBottom()
        .scale(xScale)
        .tickSize(-height)
        .tickValues([1931,1932])
        .tickFormat(d3.round);
​
var yAxis = d3.axisLeft()
        .scale(yScale);
​
var line = d3.line()
        .x(function(d) { return xScale(d.year); })
        .y(function(d) { return yScale(d.yield); });
​
d3.tsv("barley.tsv", ready);
​
function ready(err, data) {
    if (err) throw "error loading data";
​
    //FORMAT data
    data.forEach(function(d) {
        d.year = +d.year;
        d.yield = +d.yield;
    });
​
    var myLocationData = data.filter(function(d) {
        return d.site === myLocationName;
    });
​
  var varieties = data.map(function(d) { return d.variety; });
  var uniqVarieties = d3.set(varieties).values();
    color.domain(uniqVarieties);
​
    d3.select(".g-location").text(myLocationName);
​
    var yieldsByVariety = d3.nest()
            .key(function(d) { return d.variety; })
            .entries(myLocationData);
​
    var maxYield = d3.max(data, function(d) { return d.yield; });
​
    yScale.domain([0, maxYield ]);
​
    svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .attr("class", "x axis")
            .call(xAxis);
​
    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
​
    var varietyLineGroup = svg.selectAll(".g-variety-group")
            .data(yieldsByVariety)
            .enter()
            .append("g")
            .attr("class", "g-variety-group");
​
    varietyLineGroup.append("text")
            .text(function(d) {
                return d.values[1].variety;
            })
            .attr("x", xScale(1932))
            .attr("dx", 5)
            .attr("y", function(d) { return yScale(d.values[1].yield); });
​
    varietyLineGroup.append("circle")
            .attr("r", 2)
            .style("fill", function(d) { return color(d.key); })
            .attr("cx", function(d) { return xScale(d.values[0].year); })
            .attr("cy", function(d) { return yScale(d.values[0].yield); });
​
    varietyLineGroup.append("circle")
            .attr("r", 2)
            .style("fill", function(d) { return color(d.key); })
            .attr("cx", function(d) { return xScale(d.values[1].year); })
            .attr("cy", function(d) { return yScale(d.values[1].yield); });
​
    varietyLineGroup.append("path")
            .attr("class", "g-slopegraph-path")
            .attr("d", function(d) { return line(d.values); })
            .style("stroke", function(d) { return color(d.key); });
​
​
​
}
​
​
</script>
    