"Velvet", "Wisconsin No. 38"]

// below is code from the scatterplot from Part 3, with variables adjusted to account for the barley

//data set

const width = 600;

const height = 400;

const margin = { top: 70, bottom: 50, left: 50, right: 100 };

const div = htl.html`<div></div>`;

// groups data by whatever field specified - adding all button

// appending category with all data points

const categories = [["All Sites", barley], ...d3.groups(barley, d => d.site)];

const buttons = d3

.select(div)

.selectAll("button")

.data(categories)

.join("button");

buttons.text((d) => d[0]);

const svg = d3

.select(div)

.append("div")

.append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom);

// adding title and axes labels

svg.append("text")

.attr("x", (width + margin.left + margin.right) / 2)

.attr("y", margin.top / 2)

.attr("text-anchor", "middle")

.attr("font-size", "16px")

.attr("font-weight", "bold")

.text("Scatterplot of Barley Yield in Minnesota by Variety and Site");

svg.append("text")

.attr("text-anchor", "middle")

.attr("x", margin.left + width / 2)

.attr("y", height + margin.top + margin.bottom - 5)

.text("Barley Variety");

svg.append("text")

.attr("text-anchor", "middle")

.attr("transform", `rotate(-90)`)

.attr("x", -margin.top - height / 2)

.attr("y", 15)

.text("Yield");

const g = svg

.append("g")

.attr("transform", `translate(${margin.left}, ${margin.top})`);

const x = d3

.scalePoint()

.domain(varieties)

.range([0, width]);

const y = d3

.scaleLinear()

.domain(d3.extent(barley, (d) => d["yield"]))

.range([height, 0]);

const color = d3

.scaleOrdinal()

.domain(categories.map((d) => d[0]))

.range(d3.schemeDark2);

g.append("g").call(d3.axisLeft(y));

g.append("g")

.attr("transform", `translate(0, ${height})`)

.call(d3.axisBottom(x));

const circles = g

.selectAll("circle")

// initializing scatterplot with all data

.data(barley)

.join("circle")

.attr("r", 4)

//.style("stroke", "#000")

// changing border color based on year

.style("stroke", d => Number(d.year) === 1931 ? "#000" : "#666")

.style("stroke-width", 2)

.attr("cx", (d) => x(d.variety))

.attr("cy", (d) => y(d.yield))

.style("fill", (d) => color(d.site))

.style("opacity", 0.7)

// code from Part 5

.style("cursor", "pointer")

.on("click", (event, d) => {

text.text(JSON.stringify(d))

});

buttons.on("click", (event, d) => {

// selecting circles

g.selectAll("circle")

.data(d[1], (d) => d)

.join(

// allows for animation and changing of data being shown

(enter) =>

enter

.append("circle")

.attr("r", 4)

//.style("stroke", "#000")

.style("stroke", d => Number(d.year) === 1931 ? "#000" : "#666")

.style("stroke-width", 2)

.attr("cx", (d) => x(d.variety))

.attr("cy", (d) => y(d.yield))

.style("fill", (d) => color(d.site))

.style("opacity", 0.7)

.style("cursor", "pointer")

.on("click", (event, d) => {

text.text(JSON.stringify(d));

}),

(update) =>

update

.attr("cx", (d) => x(d.variety))

.attr("cy", (d) => y(d.yield))

.style("fill", (d) => color(d.site))

.style("opacity", 0.7),

// shrinking animation

(exit) =>

exit

.attr("fill", "red")

.call((exit) =>

exit.transition().duration(1000).attr("r", 0).remove()

)

);

});

// code from Part 5

const text = svg

.append("text")

.style("font", "12px sans-serif")

.attr("y", 15)

.text("Click on a circle to read the data!");

// creating a legend

// creating array with data for legend

const legendData = [

{ year: 1931, color: "#000", label: "1931" },

{ year: 1932, color: "#666", label: "1932" }

];

// appending legend group to SVG in top right corner

const legend = svg.append("g")

.attr("transform", `translate(${width + margin.left + 25}, ${margin.top})`);

// creatining legend items

legendData.forEach((entry, index) => {

// creating a rectangle for each year indicating border color

legend.append("rect")

.attr("x", 0)

.attr("y", index * 30)

.attr("width", 20)

.attr("height", 20)

.style("fill", entry.color);

// creating legend labels

legend.append("text")

.attr("x", 30)

.attr("y", index * 30 + 10)

.text(entry.label)

.attr("font-size", "12px")

.attr("alignment-baseline", "middle");

});

return div;

}

When creating the scatterplot, I used the code that we implemented in Part 3 of the series. I believe that none of the changes I made were that drastic to make the figure work with the barley data. I mainly had to change the data set variable name from "iris" to "barley", and then think about what variables I wanted on each axes and go on from there. To make it a little more exciting, I added another category with the whole data set to my array of categories so that I could have another button that can plot the data from "All Sites" rather than only one. I also decided to play around with the shapes of the data points to see if I could distinguish each point by year, which worked, but I couldn't get the data exiting to work (because squares don't have radius attributes and I don't think I understood the transforms ChatGPT generated well enough - definitely something I will have to look into more). In the end, I decided to change the borders of the points based on year, which I think is ok but not the mostly noticeable. From this, you can notice that Morris was the only site where barley yield increased. I think that something else I could work on further (maybe if I knew how the buttons worked more) would be selecting more than 2 sites so that those could be compared side-by-side at the same time.