Published
Edited
Dec 9, 2021
4 stars
Plot.plot({
marks: [
// add rule to show difference: actuals to forecast
// then comment out Plot.line sections to remove the lines
// then switch the ruleX to y1: 0 and y2: d => d.actuals - d.forecast
/*
Plot.ruleX(data, {
x: "date",
y1: "actuals",
y2: "forecast",
stroke: d => d.actuals > d.forecast
}),
*/
// show the actual demand
Plot.line(data, {
x: "date",
y: "actuals",
stroke: "#5b6187"
}),
// dashed partially line to show the day-ahead forecasted demand
Plot.line(data, {
x: "date",
y: "forecast",
strokeDasharray: "2 2",
stroke: "#a2a5ba"
}),
// vertical rule to mark date/time of event
Plot.ruleX([event.datetime], {
stroke: "black",
strokeWidth: 1
}),
// rule at bottom of chart marking y=0;
Plot.ruleY([0]),
],
// making ticks readable / in appropriate timezone
x: {
ticks: d3
.utcWeeks(...d3.extent(data, (d) => d.date))
.map((d) => d3.utcHour.offset(d, 6)),
tickFormat: (d) =>
d.toLocaleString("en-US", {
timeZone: "America/Chicago",
month: "short",
day: "numeric"
})
},
marginLeft: 50,
marginRight: 100,
width
})
maxValue = Math.max(d3.max(data, d => d.actuals), d3.max(data, d => d.forecast))
rawdata = FileAttachment("TexasEnergyDemandForecast-1.csv").csv({typed: true})
data = aq.from(rawdata) // https://observablehq.com/@observablehq/data-wrangler
.rename({demand: "actuals"}) // rename column from “demand” to “actuals”
.objects() // return an array of objects
event = ({
description: "Rolling Blackouts",
datetime: new Date("2021-02-15T07:25:00Z") // 7:25AM UTC is 1:25AM CST
})
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.
