Barley

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

svg {
      border: 1px solid #ccc;
  }

.domain {
  fill:none;
}
.xtick line {
  stroke: #D3D3D3;
  stroke-width: 1px;
  stroke-dasharray: 3,2;
}

.g-1931 {
  fill:#DCDCDC;
}
.g-1932 {
  fill:#FF4500;
}

</style>

<body>
  <h1>Barley</h1>
<p>Crop yield by variety and year</p>

</body>

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()
                        //  .domain([10, 70])
                         .range([0, width]);

var yScale = d3.scale.ordinal()
                  .rangeBands([height, 0],1)
                  .domain(["Velvet", "Peatland", "Manchuria", "Wisconsin No. 38", "Trebi", "No. 462", "No. 457", "Svansota","No. 475", "Glabron"]);

var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient("left");

d3.tsv("barley.tsv", function(error, data) {

if (error) return console.warn(error);

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

var myLocationData = data.filter(function(d) {
  return d.site === "Grand Rapids";
});

var maxYield = d3.max(data, function(d) { return d.yield; });

xScale.domain([0, maxYield ]);

svg.append("g")
    .call(yAxis);

//Define X axis
    var xAxis = d3.svg.axis()
           .scale(xScale)
           .orient("bottom")
           .tickValues([0,10,20,30,40,50,60,70]);

//Create X axis
   svg.append("g")
     .attr("transform", "translate(0," + height + ")")
     .attr("class", "xtick")
     .call(xAxis);

var varietyGroup = svg.selectAll(".g-variety-group")
      .data(myLocationData)
      .enter()
      .append("g")
      .attr("class", "g-variety-group")
      .attr("transform", function(d) {
          return "translate(" + xScale(d.yield) + "," + yScale(d.variety) + ")";
      });

varietyGroup.append("circle")
          .attr("r", 4)
          .attr("class", function(d) {
            return "g-" + d.year;
          });

//Legend
      svg.append("circle")
        .attr("r", 4)
        .attr("transform", "translate(50,0)")
        .attr("class", "g-1931");

svg.append("text")
        .attr("x", 55)
        .attr("y", 4)
        .attr("font-size", 10)
        .text("1931");

svg.append("circle")
          .attr("r", 4)
          .attr("transform", "translate(2,0)")
          .attr("class", "g-1932");

svg.append("text")
          .attr("x", 7)
          .attr("y", 4)
          .attr("font-size", 10)
          .text("1932");

d3.selectAll(".tick line")
  .attr("y2",-height+margin.top);

// varietyGroup.append("text")
  //   .text(function(d) { return d.variety; });

// var maxX = d3.max(data, function(d) { return d.x; });
  console.log(data);
  // console.log("max", maxX);

})

</script>

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