Public
Edited
Oct 5, 2023
viewof site = Inputs.select(Array.from(new Set(barley.map(d => d.site))), {label: "Select one"})
{
const filteredData = barley.filter(d => d.site === site)
const dataObj = {}
filteredData.forEach(d => {
dataObj[d.variety] = {
1931: 0,
1932: 0,
}
})
filteredData.forEach(d => {
dataObj[d.variety][d.year] = d.yield
})
const transformedData = Object.entries(dataObj)
.flatMap(([variety, years]) => ({
variety: variety,
enter: years[1931],
update: years[1932]
}))
const width = 600
const height = 350
const margin = {
top: 50,
bottom: 25,
left: 100,
right: 25,
}
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("border", "1px solid black")
// legend
const legends = [1931, 1932]
const legendsContainer = svg.append("g")
.attr("transform", `translate(${margin.left}, 15)`)
// legend symbol
legendsContainer.append("g")
.selectAll("rect")
.data(legends)
.join("rect")
.attr("x", (d, index) => index * 75)
.attr("y", 4)
.attr("width", 10)
.attr("height", 10)
.attr("fill", d => d === 1931 ? "steelblue" : "orange")
// legend text
legendsContainer.append("g")
.selectAll("text")
.data(legends)
.join("text")
.text(d => d)
.attr("x", (d, index) => index * 75 + 12)
.attr("y", 10)
.attr("fill", "black")
.attr("text-anchor", "left")
.style("font-family", "sans-serif")
.style("font-size", "12px")
.style("dominant-baseline", "middle")
// plot container
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
// x-scale
const xScale = d3.scaleLinear()
.domain(d3.extent(filteredData.map(d => d.yield)))
.range([0, width])
// y-scale
const yScale = d3.scalePoint(Array.from(new Set(filteredData.map(d => d.variety))), [0, height])
// axis bottom
g.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(xScale))
// axis left
g.append("g")
.call(d3.axisLeft(yScale))
while(true) {
yield svg.node()
g.selectAll("circle")
.data(transformedData, d => d.variety)
.join(
(enter) =>
enter
.append("circle")
.attr("fill", "none")
.attr("cx", d => xScale(d.enter))
.attr("cy", d => yScale(d.variety))
.attr("r", 3)
.style("stroke", "steelblue")
.style("stroke-width", "2px"),
(update) =>
update.call((update) => update.transition()
.style("stroke", "orange")
.attr("cx", d => xScale(d.update))),
// Not sure why exit is not working or how to loop the animation
(exit) =>
exit.call((exit) =>
exit
.transition()
.attr("cx", d => xScale(d.enter))
.transition()
.remove()
)
)
await Promises.delay(1500)
}
}
barley = FileAttachment("barley.json").json()
barley
Type Table, then Shift-Enter. Ctrl-space for more options.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
