test

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

.title {
  font: 24px sans-serif;
}
.legend {
  font: 12px sans-serif;
}
</style>

// CHECK LIST

// HIERARCHY
// First Level - Site: SVG
// Second Level - Variety: Group Tag
// Third Level - Year: rect

var margin = {top: 20, right: 40, bottom: 30, left: 120};

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

var varietyScale = d3.scaleBand()
.padding([.1])
.rangeRound([height, 0]);

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

var xAxis = d3.axisBottom(xScale)
.tickPadding(8);

var yAxis = d3.axisLeft(varietyScale)
.tickPadding(8);

var colorScale = d3.scaleOrdinal(d3.schemeCategory10);

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

function ready(error, data) {

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

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

xScale.domain(d3.extent(data, function(d)  { return d.yield })).nice();
  varietyScale.domain(varieties);

var yearScale = d3.scaleBand()
  .rangeRound([varietyScale.bandwidth(), 0])
  .padding([.05])
  .domain(years);

var nestedBarleyData = d3.nest().key(function(d) { return d.site })
  .rollup(function(leaves) { return {
    medianValue: d3.median(leaves, function(d) { return d.yield }),
    totalValue: d3.sum(leaves, function(d) { return d.yield }),
    lastYear: d3.sum(leaves.filter(function(d) { return d.year == "1931" }), function(d) { return d.yield }),
    thisYear: d3.sum(leaves.filter(function(d) { return d.year == "1932" }), function(d) { return d.yield }),
    values: leaves
  }
})
.entries(data)
.sort(function(a, b) { return a.value.totalValue > b.value.totalValue })

var svg = d3.select("body")
.selectAll("svg")
.data(nestedBarleyData)
.enter().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(0," + height + ")")
.call(xAxis);

svg.append("g")
.attr("class","y axis")
.call(yAxis);

svg.append("text")
.attr("class", "title")
.text(function(d) {console.log(d); return d.key })

svg.selectAll(".varietyYield")
.data(function(d) { return d.value.values })
.enter().append("rect")
.attr("class", "varietyYield")
.attr("x", 0)
.attr("width" , function(d) { return xScale(d.yield) })
.attr("y", function(d) { return varietyScale(d.variety) + yearScale(d.year) })
.attr("height", yearScale.bandwidth())
.style("fill", function(d) { return colorScale(d.year); })

var legend = svg.selectAll(".legend")
.data(colorScale.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", colorScale)

legend.append("text")
.attr("x", width - 20)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });

d3.selectAll(".varietyYield")
.on("click", function() {
  d3.select(this)
  .transition()
  .duration(3000)
  .attr("width", 5)
  .attr("x", function(d) { return xScale(d.yield) - 5 })
  d3.select(this)
  .append("text")
  .text("hi")
})

svg.append("g")
.attr("class","y axis")
.call(yAxis);

}

</script>

https://d3js.org/d3.v4.min.js