Public
Edited
May 8
// --- Final Assembled DOM Structure ---
finalDomStructure = {
const wrapper = htl.html`<div style="position: relative;"></div>`; // Parent needs position: relative
// Append the layout of charts
wrapper.appendChild(chartsLayout);
// Append the SVG node for correlation lines (it will be populated by another cell)
wrapper.appendChild(correlationLinesSvgNode);
return wrapper;
}
Panic.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
file = FileAttachment("Panic.csv");
yearRange_for_slider = {
// Depend on plotData_4 to ensure it's calculated first
const data = plotData_4;
if (!data || !Array.isArray(data) || data.length === 0) {
const currentActualYear = new Date().getFullYear();
return { min: currentActualYear - 5, max: currentActualYear, all: [currentActualYear] }; // Sensible default
}
const years = data.map(d => {
if (d.x instanceof Date && !isNaN(d.x)) {
return d.x.getFullYear();
} else if (typeof d.x === 'number' && !isNaN(d.x) && d.x >= 1000 && d.x < 3000) { // Heuristic for numerical years
return Math.floor(d.x);
}
return null; // Skip if x is not a recognizable year format
}).filter(year => year !== null);
if (years.length === 0) {
const currentActualYear = new Date().getFullYear();
return { min: currentActualYear - 5, max: currentActualYear, all: [currentActualYear] };
}
const uniqueYears = [...new Set(years)].sort((a, b) => a - b);
return {
min: uniqueYears[0],
max: uniqueYears[uniqueYears.length - 1],
all: uniqueYears // Store all unique years if needed for a different input type
};
}
// --- Year Selector Slider ---
viewof selectedYear = Inputs.range(
[yearRange_for_slider.min, yearRange_for_slider.max],
{
label: "Highlight Year on Chart 4:",
step: 1,
value: yearRange_for_slider.min // Default to the earliest year
}
)
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.
