The end-to-end solution for building and hosting better data apps, dashboards, and reports.
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
})
zoom = {
const start = d3.isoParse("2021-02-07T07:25:00Z");
const end = d3.isoParse("2021-02-16T07:25:00Z");
return (d) => +d.date >= +start && +d.date <= +end;
}
zoomed = data.filter(zoom)
zoomedTicks = d3.utcDays(...d3.extent(zoomed, d => d.date)).map(d => d3.utcHour.offset(d, 6))
dataTicks = d3.utcWeeks(...d3.extent(data, d => d.date)).map(d => d3.utcHour.offset(d, 6))
colors = new Map([
["actuals", "#5b6187"],
["forecast", "#a2a5ba"],
["below", "#89119c"], // actuals below forecast
["above", "#ff6300"], // actuals above forecast
])
resp = {return width>500 ? 1: 2 }
demandBelowForecastAnnotation =
[
Plot.text([{value: "demand falls below forecast ➣"}], {
text: "value",
x: d3.utcHour.offset(event.datetime, -36),
y: -4000,
textAnchor: "end",
fontSize: resp*width/70,//16,
fontStyle: 'italic'
})
]
demandAboveForecastAnnotation =
[
Plot.text([{value: "demand rises above forecast ➣"}], {
text: "value",
x: d3.utcHour.offset(event.datetime, -134),
y: 6200,
textAnchor: "end",
fontSize: resp*width/70,//16,
fontStyle: 'italic'
})
]
// point out where the demand dropped below the forecast
didYouNoticeThis =
[
Plot.text([{value: "Did you notice demand drop below forecast here? ⇘"}], {
text: "value",
x: d3.utcHour.offset(event.datetime, -36),
y: 67000,
textAnchor: "end",
fontSize: 16,
fontStyle: 'italic'
})
]
// show when the rolling blackouts started on the difference chart
annotationsDeltas =
[
Plot.ruleX([event.datetime], {
stroke: "gray",
y1: 0,
y2: maxDelta
}),
// text describing the event of interest
Plot.text([event], {
text: "description",
x: "datetime",
y: maxDelta * 1.05,
textAnchor: "start"
}),
]
maxDelta = d3.max(data, d => d.actuals - d.forecast)
maxValue = Math.max(d3.max(data, d => d.actuals), d3.max(data, d => d.forecast))
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
import {authorship, navigation, workshop, altauthorship} from "@observablehq/timeseries-assets"
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.
