Groundhog predictions
Plot.plot({
height: dynamicHeight,
width: 1000,
marginRight: 100,
marginLeft: 100,
marks: [
Plot.dot(
final,
Plot.stackX2({
filter: (d) => d.year >= yearSelect,
x: (d) => (d.shadow === true ? -1 : 1), // 1 if predict spring -1 if predict winter
y: "year",
fill: "#ccc",
opacity: 0.3,
r: 5
})
),
Plot.dot(
final,
Plot.stackX2({
filter: (d) =>
d.year >= yearSelect &&
regionFilter.includes(d.region) &&
nameFilter.includes(d.name),
x: (d) => (d.shadow === true ? -1 : 1), // 1 if predict spring -1 if predict winter
y: "year",
fill: "shadow",
r: 5,
channels: { name: "name", region: "region" }
})
),
Plot.dot(
final,
Plot.pointer(
Plot.stackX2({
filter: (d) =>
d.year >= yearSelect &&
regionFilter.includes(d.region) &&
nameFilter.includes(d.name),
x: (d) => (d.shadow === true ? -1 : 1), // 1 if predict spring -1 if predict winter
y: "year",
r: 8,
fill: "red",
opacity: 0.5,
tip: true,
title: (d) =>
`${d.name} \nfrom ${d.city} predicted ${
d.shadow === true ? "long winter" : "early spring"
} in ${d.year}`
})
)
)
],
x: { axis: null },
color: { range: ["#e0c600", "#3e6589"] },
y: {
domain: [yearSelect, d3.max(final, (d) => d.year)],
ticks: d3.range(yearSelect, d3.max(final, (d) => d.year) + 1, 1),
tickSize: 0,
tickFormat: d3.format(".0f"),
tickPadding: 20,
label: null
},
title: htl.html`<h3 style = "text-align: center">Did the groundhogs predict <b style="color:#3e6589">long winter</b> or <b style="color:#e0c600">early spring</b></h3><br>`
})
regionFilter = {
if (regionSelect === null) {
yield Array.from(new Set(final.map(d => d.region)))
}else {
yield Array.from(new Set([regionSelect]))
}
}
nameFilter = {
if (nameSelect === null) {
yield Array.from(new Set(final.map(d => d.name)))
}else {
yield Array.from(new Set([nameSelect]))
}
}
// dynamically change the height of the chart
dynamicHeight = {
let maxYear = d3.max(final, d => d.year);
let yearRange = maxYear - yearSelect;
const heightPerYear = 20;
yield Math.max(50, heightPerYear * (yearRange + 1));
}
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.
