2f:T43d,Often we're interested in the difference between two related metrics over time. For example, we might want to know the difference between a forecast, and what actually ended up happening (the "actuals"). In this example, we're looking at the actual demand and the day-ahead forecasted demand for energy leading up to and during the [February 2021 Texas power crisis](https://en.wikipedia.org/wiki/2021_Texas_power_crisis). As prices surged and rolling blackouts were initiated to [protect the grid](https://www.texastribune.org/2021/02/18/texas-power-outages-ercot/), 4.5 million homes and businesses were left without power. Imagine that we're a few weeks past the crisis, looking back to learn more about what happened during those crucial hours and days. Of course, a good standard way of looking at this data is to simply show a line chart with two lines, one for ${textcolor('actual energy demand', colors.get('actuals'))} and one for the ${textcolor('forecast', colors.get('forecast'))}. Adding an annotation and vertical rule provides context about an event of interest. 30:T464,Plot.plot({ marks: [ // dark blue line to show the actual demand Plot.line(data, { x: "date", y: "actuals", stroke: colors.get("actuals"), curve: "step" }), // dashed partially opaque line to show the day-ahead forecasted demand Plot.line(data, { x: "date", y: "forecast", stroke: colors.get("forecast"), curve: "step", strokeDasharray: "2 2" }), // rule at bottom of chart marking y=0; Plot.ruleY([0]), // vertical rule to mark date/time of event Plot.ruleX([event.datetime], { stroke: "gray", y1: 0, y2: maxValue * 1.03 }), // text to mark date/time of event Plot.text([event], { text: "description", x: "datetime", y: maxValue * 1.05, textAnchor: "start" }) ], 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, width })31:T72d,Plot.plot({ marks: [ // dark blue line to show the actual demand Plot.line(data, { x: "date", y: "actuals", stroke: colors.get("actuals"), curve: "step", strokeWidth: 0.5 }), Plot.areaY(data, { x: "date", y1: "forecast", y2: (d) => Math.max(d.forecast, d.actuals), sort: "date", fill: colors.get("above") }), Plot.areaY(data, { x: "date", y1: "forecast", y2: (d) => Math.min(d.forecast, d.actuals), sort: "date", fill: colors.get("below") }), // rule at bottom of chart marking y=0; Plot.ruleY([0]), // vertical rule to mark date/time of event Plot.ruleX([event.datetime], { stroke: "gray", y1: 0, y2: maxValue * 1.03 }), // text to mark date/time of event Plot.text([event], { text: "description", x: "datetime", y: maxValue * 1.05, textAnchor: "start" }) ], x: { ticks: d3 .utcWeeks(...d3.extent(data, (d) => d.date)) .map((d) => d3.utcHour.offset(d, 6)), tickFormat: (d) => { return d.toLocaleString("en-US", { month: "short", day: "2-digit", // to display the UTC date/times in the timezone in which the events took place timeZone: "America/Chicago" }); } }, color: { domain: ["above", "below", "actuals", "forecast"], range: [ colors.get("above"), colors.get("below"), colors.get("actuals"), colors.get("forecast") ] }, 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: 60, width })32:T491,Plot.plot({ marks: [ // dark blue line to show the actual demand Plot.line(data, { x: "date", y: "actuals", stroke: colors.get("actuals"), curve: "step" }), // dashed partially opaque line to show the day-ahead forecasted demand Plot.line(data, { x: "date", y: "forecast", stroke: colors.get("forecast"), curve: "step", strokeDasharray: "2 2" }), // rule at bottom of chart marking y=0 Plot.ruleY([0]), // vertical rule to mark date/time of event Plot.ruleX([event.datetime], { stroke: "gray", y1: 0, y2: maxValue * 1.03 }), // text to mark date/time of event Plot.text([event], { text: "description", x: "datetime", y: maxValue * 1.05, textAnchor: "start" }) ].concat(didYouNoticeThis), width: Math.max(width, 550), marginLeft: 60, 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" }) } })33:T4d8,Plot.plot({ marks: [ // dark blue line to show the actual demand Plot.line(data.filter(zoom), { x: "date", y: "actuals", stroke: colors.get('actuals'), curve: "step" }), // dashed partially opaque line to show the day-ahead forecasted demand Plot.line(data.filter(zoom), { x: "date", y: "forecast", stroke: colors.get('forecast'), curve: "step", strokeDasharray: "2 2" }), // rule at bottom of chart marking y=0 Plot.ruleY([0]), // vertical rule to mark date/time of event Plot.ruleX([event.datetime], { stroke: "gray", y1: 0, y2: maxValue * 1.03 }), // text to mark date/time of event Plot.text([event], { text: "description", x: "datetime", y: maxValue * 1.05, textAnchor: "start" }), didYouNoticeThis ], width: Math.max(width, 550), marginLeft: 60, x: { ticks: 9, // Texas (CST) is 6 hours after UTC ticks: d3.utcDays(...d3.extent(zoomed, d => d.date)).map(d => d3.utcHour.offset(d, 6)), tickFormat: d => d.toLocaleString("en-US", { timeZone: "America/Chicago", month: "short", day: "2-digit", }) }, })34:T668,More generally, it's a question of what metric is most important to us. In this case, since we're most interested in the *differences*, how much the actual demand was ${textcolor('above', colors.get('above'))} or ${textcolor('below', colors.get('below'))} the forecasted demand, **we're more likely to notice the key insights about differences by plotting the differences themselves**. In other cases, we might care more about how much the demand is changing compared to last week. If so, we'd want to a chart where the week / week growth is drawn explicitly. Or, perhaps it's really important if the forecasted demand crosses some threshold, perhaps 60,000kw. In that case, we could change the marks we draw, and the styles (color, opacity, etc) to draw attention to values above that [threshold](https://github.com/observablehq/plot/blob/main/README.md#color-options). Or, maybe we want to see what the typical demand is on a Tuesday vs a Sunday or in the summer vs winter. Then we could [facet](https://observablehq.com/@observablehq/plot-facets) by day-of-week or by season. By framing *"what chart should I use"* as a question about *"what's important to me about the data"*, we can intentionally choose [marks](https://observablehq.com/@observablehq/plot-marks), [scales](https://observablehq.com/@observablehq/plot-scales), [transforms](https://observablehq.com/@observablehq/plot-transforms), and [facets](https://observablehq.com/@observablehq/plot-facets) that are defined by the metrics we care most about. And, in doing so, the most important features of the data will be the most noticeable features of the visualization. 35:[] 2d:{"title":"What’s different? Analyzing Time-Series Forecast Performance","cells":[{"id":0,"value":"# What’s different? Analyzing Time-Series Forecast Performance\n## It’s not enough for an important feature of the data to be visible. It needs to be noticeable.","pinned":false,"hidden":false,"mode":"md"},{"id":1493,"value":"authorship([\"Zan Armstrong\", \"Mike Freeman\", \"Ian Johnson\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"-------","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"However, often we're most interested in the difference itself.\n\n*Was demand higher or lower than forecasted? By how much? When? In particular, what was the difference between actuals & forecast right around the time of the event of interest? *\n\nOne way to make this more visible is to fill in the gaps, where the color is determined by if the actual demand was ${textcolor('above forecast', colors.get('above'))} or actual demand was ${textcolor('below forecast', colors.get('below'))}.","pinned":false,"hidden":false,"mode":"md"},{"id":812,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"By filling in the gaps between the lines, we can start to see more about the differences. Yet, the big purple section attracts most of our attention. And, it's nearly impossible to compare the differences over time beyond \"big\" and \"medium\" and \"small\". \n\nLet's take this a step further by changing what we're measuring on the y-axis, to focus even more on the differences themselves. \n\nPreviously the y-axis represented the actual or forecasted energy demand. In the chart below the y-axis represents the *difference* in energy usage between the actuals and forecast. \n\nSo, if the forecast was accurate, the value would be 0. If the ${textcolor('actuals were above the forecast', colors.get('above'))} by 5000 kW, we would see an orange mark from 0 to 5000. And, if the ${textcolor('actuals came in below the forecast', colors.get('below'))} by 1000 kW, we'd see a purple mark from 0 to -1000. ","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"differenceChart = Plot.plot({\n marks: [\n Plot.ruleX(data, {\n x: \"date\",\n y1: 0,\n y2: (d) => d.actuals - d.forecast,\n stroke: (d) => (d.actuals - d.forecast > 0 ? \"above\" : \"below\")\n }),\n Plot.ruleY([0]) // include y=0 in chart and show baseline\n ].concat(annotationsDeltas), // additional marks for annotations are added here\n color: {\n domain: [\"above\", \"below\"],\n range: [colors.get(\"above\"), colors.get(\"below\")]\n },\n x: {\n ticks: d3\n .utcWeeks(...d3.extent(data, (d) => d.date))\n .map((d) => d3.utcHour.offset(d, 6)),\n tickFormat: (d) =>\n d.toLocaleString(\"en-US\", {\n timeZone: \"America/Chicago\",\n month: \"short\",\n day: \"numeric\"\n })\n },\n width,\n marginLeft: 60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"Admittedly in the difference chart we do lose some information. We no longer can see if the actual demand was relatively high or low. On the other hand, we're able to more clearly compare the differences over time because they share a common baseline. Moreover, smaller differences that were harder to see are now noticeable. ","pinned":false,"hidden":false,"mode":"md"},{"id":619,"value":"## Did you notice?","pinned":false,"hidden":false,"mode":"md"},{"id":210,"value":"One thing that jumped out at me is that the demand actually started to fall below the forecast *just prior* to the blackouts, as we can see in this “zoomed in” view focused on just the week prior. Moreover, there were two “dips” during the 36 hours before the blackouts were initiated. ","pinned":false,"hidden":false,"mode":"md"},{"id":1253,"value":"Plot.plot({\n marks: [\n Plot.rectX(zoomed, {\n // filter: zoom,\n x1: \"date\",\n x2: (d) => d3.utcHour.offset(d.date, 1),\n y1: 0,\n y2: (d) => d.actuals - d.forecast,\n fill: (d) => (d.actuals - d.forecast > 0 ? \"above\" : \"below\")\n // title: d => ,\n }),\n Plot.ruleY([0]), // include y=0 in chart and show baseline\n annotationsDeltas,\n demandBelowForecastAnnotation,\n demandAboveForecastAnnotation\n ],\n color: {\n domain: [\"above\", \"below\"],\n range: [colors.get(\"above\"), colors.get(\"below\")]\n },\n y: {\n label: \"↑ Demand (megawatt hours)\"\n },\n x: {\n // Texas (CST) is 6 hours after UTC\n ticks: d3\n .utcDays(...d3.extent(zoomed, (d) => d.date))\n .map((d) => d3.utcHour.offset(d, 6)),\n tickFormat: (d) =>\n d.toLocaleString(\"en-US\", {\n timeZone: \"America/Chicago\",\n month: \"short\",\n day: \"2-digit\"\n })\n },\n width: Math.max(width, 550),\n marginLeft: 60,\n style: {\n overflow: \"visible\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"Now that I know what to look for, I can see it when I go back to the original chart. But, sometimes **it's not enough for an important feature of the data to be visible. It needs to be noticeable.** \n","pinned":false,"hidden":false,"mode":"md"},{"id":183,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"Even if I zoom in on a shorter time-scale, I may not notice the switch where the ${textcolor('demand', colors.get('actuals'))} line dips below the ${textcolor('forecast', colors.get('forecast'))} line.","pinned":false,"hidden":false,"mode":"md"},{"id":536,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"## Perceiving the vertical distance or the shortest path? \nMoreover, even though I *can* see demand dropping below forecast, it's still hard for me to see in the line chart that there are actually two larger dips with a slight recovery between them. \n\nThe differences are the vertical distances between the two lines. But, when the distance is a gap, our eyes sometimes take a short-cut: we perceive the difference to be the perpendicular \"shortest distance between two paths\" rather than the vertical distances. As a result, when we think we're comparing the difference between forecast and demand over time, we're actually comparing the difference between the two metrics at *different points in time*. ","pinned":false,"hidden":false,"mode":"md"},{"id":1401,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":706,"value":"## What’s most important?","pinned":false,"hidden":false,"mode":"md"},{"id":466,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"-------","pinned":false,"hidden":false,"mode":"md"},{"id":855,"value":"\n*PS - For those who wondering why demand started to dip before the rolling blackouts, it may have had to do with price. Around that time [the price of electricity rocketed from $0.12 per kWh to $9 per kWh](https://www.texastribune.org/2021/02/22/texas-pauses-electric-bills/), and in many cases [those costs were being passed directly to consumers](https://www.texastribune.org/2021/02/24/texas-puc-electric-bills/). Correlating the price, demand, and forecast accuracy data is a story for another notebook.* \n\n*To learn more about the crisis, check out the [in-depth series from the Texas Tribune](https://www.texastribune.org/series/winter-storm-power-outage/).*","pinned":false,"hidden":false,"mode":"md"},{"id":1501,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1499,"value":"navigation(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":267,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"#### Data Source","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"\n\n*Source: U.S. Energy Information Administration (Aug 2021)*\n\nThe US Energy Information Administration makes data available about energy usage and day-ahead-demand forecasting for sites across the country. This data a tiny subset of their [public data](https://www.eia.gov/opendata/). \n\nWe've also shown how you can use Observable as \"front-end\" for this data, where you can interface to query, preview, and download data from the notebook: [EIA OpenData: Real-Time Hourly Electricity Data](https://observablehq.com/@observablehq/eia-opendata-electricity-grid-operation). \n\nThe dataset includes the date/hour, the actual demand, and day-ahead forecasted demand for the ERCOT (Electric Reliability Council of Texas, Inc) during January and February 2021. [ERCOT](http://www.ercot.com/about) manages ~90% of Texas electricity load. \n","pinned":false,"hidden":false,"mode":"md"},{"id":347,"value":"The remainder of this notebook contains supporting code and imports. Feel free to ignore this unless you are interested in how the charts above are implemented.","pinned":false,"hidden":false,"mode":"md"},{"id":1037,"value":"#### Loading Data\nThese cells load the data. ","pinned":false,"hidden":false,"mode":"md"},{"id":997,"value":"rawdata = FileAttachment(\"TexasEnergyDemandForecast@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":993,"value":"data = aq.from(rawdata) // https://observablehq.com/@observablehq/data-wrangler\n\t.rename({demand: \"actuals\"}) // rename column from “demand” to “actuals”\n\t.objects() // return an array of objects","pinned":true,"hidden":false,"mode":"ojs"},{"id":1033,"value":"The *event* cell utilizes another aspect of the data: when the blackouts occurred. ","pinned":false,"hidden":false,"mode":"md"},{"id":809,"value":"event = ({\n description: \"Rolling Blackouts\",\n datetime: new Date(\"2021-02-15T07:25:00Z\") // 7:25AM UTC is 1:25AM CST\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1339,"value":"#### Filter Data by Date\n\"zoom\" helps us filter the data to \"zooomed\", a 9 day period leading up to the event of interest. ","pinned":false,"hidden":false,"mode":"md"},{"id":981,"value":"zoom = {\n const start = d3.isoParse(\"2021-02-07T07:25:00Z\");\n const end = d3.isoParse(\"2021-02-16T07:25:00Z\");\n return (d) => +d.date >= +start && +d.date <= +end;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1210,"value":"zoomed = data.filter(zoom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1296,"value":"#### Ticks on the X-Axis\n\nThese cells define the ticks for the x-axis, which we use in the charts above. \n\nDates are stored in UTC, which is a best practice for handling time data consistently. However, when reading at the charts, we want to think about the time events took place based as the time in Texas. Therefore, we want to define the tick marks on the axis in the [Central Time Zone](https://en.wikipedia.org/wiki/Central_Time_Zone), which is a 6 hour offset from UTC in February (in the summer it would be 5 hours, due to Daylight Savings Time). \n\nTherefore, we apply ```d3.utcHour.offset(d, 6)``` to offset the times by 6 hours. ","pinned":false,"hidden":false,"mode":"md"},{"id":1216,"value":"zoomedTicks = d3.utcDays(...d3.extent(zoomed, d => d.date)).map(d => d3.utcHour.offset(d, 6))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1227,"value":"dataTicks = d3.utcWeeks(...d3.extent(data, d => d.date)).map(d => d3.utcHour.offset(d, 6))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1055,"value":"#### map concepts to colors\nThis map of colors defines the colors for the 4 key concepts marked in these charts, so that each concept is shown with a consistent color throughout the document. ","pinned":false,"hidden":false,"mode":"md"},{"id":1006,"value":"colors = new Map([\n [\"actuals\", \"#5b6187\"], \n [\"forecast\", \"#a2a5ba\"],\n [\"below\", \"#89119c\"], // actuals below forecast\n [\"above\", \"#ff6300\"], // actuals above forecast\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1030,"value":"#### Annotations\n\nThese cells define annotation marks for the charts above, in order to keep the Observable Plot code above focussed on the charts themselves. Clicking on the \"[minimap](https://observablehq.com/@observablehq/introducing-visual-dataflow)\" icon to the right, and you'll see where this code is being used. ","pinned":false,"hidden":false,"mode":"md"},{"id":1523,"value":"resp = {return width>500 ? 1: 2 }","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"demandBelowForecastAnnotation = \n [\n Plot.text([{value: \"demand falls below forecast ➣\"}], {\n text: \"value\",\n x: d3.utcHour.offset(event.datetime, -36),\n y: -4000,\n textAnchor: \"end\",\n fontSize: resp*width/70,//16,\n fontStyle: 'italic'\n })\n ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"demandAboveForecastAnnotation = \n [\n Plot.text([{value: \"demand rises above forecast ➣\"}], {\n text: \"value\",\n x: d3.utcHour.offset(event.datetime, -134),\n y: 6200,\n textAnchor: \"end\",\n fontSize: resp*width/70,//16,\n fontStyle: 'italic'\n })\n ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"// point out where the demand dropped below the forecast\ndidYouNoticeThis = \n [\n Plot.text([{value: \"Did you notice demand drop below forecast here? ⇘\"}], {\n text: \"value\",\n x: d3.utcHour.offset(event.datetime, -36),\n y: 67000,\n textAnchor: \"end\",\n fontSize: 16,\n fontStyle: 'italic'\n })\n ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"// show when the rolling blackouts started on the difference chart\nannotationsDeltas = \n [\n Plot.ruleX([event.datetime], {\n stroke: \"gray\",\n y1: 0,\n y2: maxDelta\n }),\n // text describing the event of interest\n Plot.text([event], {\n text: \"description\",\n x: \"datetime\",\n y: maxDelta * 1.05,\n textAnchor: \"start\"\n }),\n ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1328,"value":"#### Placing Annotations\n\nWhile Observable Plot manages the axis extents based on the data, it's helpful to calculate a few statistics to aid in the placements of the annotations.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1009,"value":"maxDelta = d3.max(data, d => d.actuals - d.forecast)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1013,"value":"maxValue = Math.max(d3.max(data, d => d.actuals), d3.max(data, d => d.forecast))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1062,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":470,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1495,"value":"import {authorship, navigation, workshop, altauthorship} from \"@observablehq/timeseries-assets\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}