2b:null 2c:["$","title",null,{"children":"Weather Market Impact Monitor | Berkeley MIDS W209 Information Visualization Course | Observable"}] 31:T174d,{ // Import Chart.js const Chart = await require("chart.js@3"); // Sample data generation function generateSampleData() { return [ { date: "2024-08-15", value: 95, avg: 82, change: -2.68 }, { date: "2024-07-22", value: 98, avg: 84, change: 3.45 }, { date: "2024-06-30", value: 89, avg: 75, change: -1.22 }, { date: "2024-06-10", value: 102, avg: 86, change: 4.78 }, { date: "2024-05-18", value: 88, avg: 78, change: -0.95 }, { date: "2024-04-25", value: 91, avg: 77, change: 2.15 }, { date: "2024-03-12", value: 85, avg: 74, change: -1.56 }, { date: "2024-02-08", value: 79, avg: 72, change: 1.89 } ]; } function updateDataTable() { const tableBody = document.getElementById("dataTableBody"); const data = generateSampleData(); if (!tableBody) return; tableBody.innerHTML = ""; data.forEach((event) => { const row = document.createElement("div"); row.className = "table-row"; const changeClass = event.change >= 0 ? "positive" : "negative"; const changeSign = event.change >= 0 ? "+" : ""; row.innerHTML = `

${event.date}

${event.value}°F

${event.avg}°F

${changeSign}${event.change}%

`; tableBody.appendChild(row); }); } function generateChartData() { const days = []; const avgData = []; const upperData = []; const lowerData = []; for (let i = -10; i <= 10; i++) { days.push(i); let baseResponse; if (i < 0) { baseResponse = (Math.abs(i) / 10) * 0.5 + Math.random() * 0.3 - 0.15; } else if (i === 0) { baseResponse = 2.5 + Math.random() * 0.5; } else { baseResponse = 2.5 * Math.exp(-i * 0.3) + Math.random() * 0.2 - 0.1; } avgData.push(baseResponse); upperData.push(baseResponse + 1.2 + Math.random() * 0.3); lowerData.push(baseResponse - 0.8 - Math.random() * 0.3); } return { days, avgData, upperData, lowerData }; } let weatherChart = null; function initChart() { const ctx = document.getElementById("reactionChart"); if (!ctx) return; if (weatherChart) { weatherChart.destroy(); } const chartData = generateChartData(); weatherChart = new Chart(ctx, { type: "line", data: { labels: chartData.days, datasets: [ { label: "Average Response", data: chartData.avgData, borderColor: "white", borderDash: [5, 5], borderWidth: 2, backgroundColor: "transparent", pointRadius: 0, tension: 0.1 }, { label: "Upper Bound", data: chartData.upperData, borderColor: "#4ade80", borderDash: [5, 5], borderWidth: 2, backgroundColor: "transparent", pointRadius: 0, tension: 0.1 }, { label: "Lower Bound", data: chartData.lowerData, borderColor: "#f87171", borderDash: [5, 5], borderWidth: 2, backgroundColor: "transparent", pointRadius: 0, tension: 0.1 } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { labels: { color: "white", usePointStyle: true } } }, scales: { x: { title: { display: true, text: "Days from Event", color: "white" }, ticks: { color: "white" }, grid: { color: "rgba(255, 255, 255, 0.1)" } }, y: { title: { display: true, text: "Natural Gas Price % Change", color: "white" }, ticks: { color: "white", callback: function (value) { return value.toFixed(1) + "%"; } }, grid: { color: "rgba(255, 255, 255, 0.1)" } } } } }); } function updateStatistics() { const eventType = document.getElementById("weatherEvent")?.value || "extreme_heat"; const stdDev = parseFloat(document.getElementById("stdDev")?.value || "1"); let avgResp; switch (eventType) { case "extreme_heat": avgResp = (Math.random() * 2 + 0.5) * stdDev; break; case "extreme_cold": avgResp = (Math.random() * 3 + 1) * stdDev; break; case "hurricane": avgResp = (Math.random() * 1.5 + 0.3) * stdDev; break; default: avgResp = (Math.random() * 2 + 0.2) * stdDev; } const upperResp = avgResp + (Math.random() * 1.5 + 1); const lowerResp = avgResp - (Math.random() * 1.2 + 0.8); const avgEl = document.getElementById("avgResponse"); const upperEl = document.getElementById("upperResponse"); const lowerEl = document.getElementById("lowerResponse"); if (avgEl) { avgEl.textContent = `${avgResp >= 0 ? "+" : ""}${avgResp.toFixed(3)}%`; avgEl.className = avgResp >= 0 ? "positive" : "negative"; } if (upperEl) upperEl.textContent = `+${upperResp.toFixed(3)}%`; if (lowerEl) { lowerEl.textContent = `${lowerResp.toFixed(3)}%`; lowerEl.className = lowerResp >= 0 ? "positive" : "negative"; } } // Global function for the button window.updateWeatherData = function () { updateDataTable(); updateStatistics(); initChart(); }; // Initialize setTimeout(() => { updateDataTable(); updateStatistics(); initChart(); }, 100); return "Weather Monitor initialized"; }32:T1e43,html`

Event Selection

Weather Event:

Time Span:

Start Date:

End Date:

Standard Deviation Threshold:

Weather Events Data

Date

Value

Hist. Avg

NG Price %Chg

Response Statistics

Average Response - Natural Gas Index +0.385%

Upper Bound Response - Natural Gas Index +1.940%

Lower Bound Response - Natural Gas Index -1.170%

Market Reaction Graph

` 33:[] 2f:{"id":"f1b0315b36366751","slug":null,"title":"Weather Market Impact Monitor","thumbnail":"74b2fdf3140adb3cc1d941018c21c89bfd8c1f37d0390aa1630df320eac0bee9","access_level":"public","create_time":"$D2025-07-29T16:55:34.684Z","update_time":"$D2025-09-24T01:17:39.603Z","view_time":null,"first_public_time":"$D2025-09-23T13:34:11.393Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course","avatar_url":"https://avatars-next.observableusercontent.com/15549145605863403a5e1a9e52e5f27f9a102749b0a2c648195d93efe07a5f34","tier":"enterprise_2024"},"version":103,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d9de6483bc6c964e","login":"samantha-yujun-huang","name":"Samantha Yujun Huang","avatar_url":"https://avatars-next.observableusercontent.com/077d1a821608215a81e74b403d14fd5cbc5fe3090455989b0013086161482fc4","tier":null}],"members":[{"type":"individual","id":"d9de6483bc6c964e","login":"samantha-yujun-huang","name":"Samantha Yujun Huang","avatar_url":"https://avatars-next.observableusercontent.com/077d1a821608215a81e74b403d14fd5cbc5fe3090455989b0013086161482fc4","tier":null,"role":"editor"},{"type":"team","id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course","avatar_url":"https://avatars-next.observableusercontent.com/15549145605863403a5e1a9e52e5f27f9a102749b0a2c648195d93efe07a5f34","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Weather Market Impact Monitor","cells":[{"id":0,"value":"# Weather Market Impact Monitor","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"