svg.append("rect")
.attr("width", width)
.attr("height", 500)
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-opacity", 0.1);
const xScale = d3.scaleBand()
.domain(data.map(d => d.variety))
.range([0, width])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.yield)])
.range([500, 0]);
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => xScale(d.variety) + xScale.bandwidth() / 2)
.attr("cy", d => yScale(d.yield))
.attr("r", d => d.yield)
.attr("fill", d => d.variety)
.attr("stroke", d => d.variety)
.attr("stroke-width", 1)
.attr("stroke-opacity", 1);
svg.selectAll("circle")
.on("mouseover", (event, d) => {
})
.on("mouseout", (event, d) => {
});
const legend = svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(20,20)");
legend.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", (d, i) => i * 20)
.attr("width", 10)
.attr("height", 10)
.attr("fill", d => d.variety);
legend.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("x", 20)
.attr("y", (d, i) => i * 20 + 10)
.text(d => d.variety);