BarleyDots

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

.g-chart-container {
    width: 300px;
    display: inline-block;
    margin: 10px 0;
  }

.g-location {
    text-align: center;
    font-weight: bold;
    font-size:14px;
    margin: 3px 0;
  }

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

.axis line {
      fill: none;
      stroke: #D3D3D3;
      shape-rendering: crispEdges;
      stroke-width: 1px;
    }

.axis text {
      font-family: arial, sans-serif;
      font-size: 8px;
      pointer-events: none;
      fill: #777;
    }

.xtick line {
  stroke: #ccc;
  stroke-width: 1px;
  stroke-dasharray: 2px 3px;
}

.xtick text {
  font-family: arial;
  font-size:8px;
}

.domain {
      display: none;
}

.y.axis text {
  text-anchor: end !important;
  font-size:10px;
}

</style>

<body>

</body>

var margin = {top: 20, right: 10, bottom: 20, left: 130};

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

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

var yScale = d3.scale.ordinal()
            .rangeBands([height, 0], 0.2)
            .domain(allVarieties);

//Define Y axis
var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(-width)
    .tickPadding(10)
    .orient("left");

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

//  d3.tsv("barley.tsv", function(error, data) {
   //
  //  if (error) return console.warn(error);

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

function ready(err, data) {
    if (err) throw "error loading data";

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

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

xScale.domain([0, maxYield ]);
// makeChart("Crookston");
// makeChart("University Farm");

allSites = d3.set(data.map(function(d) { return d.site; })).values();

allSites.forEach(function(d) {
  makeChart(d);
});

function makeChart(site) {
  var myLocationName = site;

var myLocationData = data.filter(function(d) {
      return d.site === myLocationName;
    });

var chartContainer = d3.select(".barley-charts-container").append("div")
  .attr("class", "g-chart-container");

var chartLocation = chartContainer.append("h5")
    .attr("class", "g-location");

var chart = chartContainer.append("div")
    .attr("class", "g-chart");

chartLocation.text(myLocationName);

var svg = chart.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", "y axis")
  .call(yAxis);

//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) + yScale.rangeBand()/2) + ")";
	});

varietyGroup.append("circle")
    .attr("r", 3)
    .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