31:Ta24,chart = () => { // Scaffold const svg = d3.create("svg"); svg.append("style").html(css); const g = svg.append("g"); // Axes const xaxis = g.append("g") .attr("class", "axis x-axis"); const yaxis = g.append("g") .attr("class", "axis y-axis"); const xaxisLabel = g.append("text") .attr("class", "axis-label x-axis-label"); const yaxisLabel = g.append("text") .attr("class", "axis-label y-axis-label"); // Marks const circle = g.selectAll("circle") .data(data) .join("circle") .attr("fill", d => color(d.city)); const annotation = g.selectAll(".annotation") .data(annotations) .join("text") .attr("class", "annotation") .attr("fill", d => color(d.city)) .text(d => d.city); return Object.assign(svg.node(), { resize(size){ const r = 2; const margin = { left: 56, right: 20, top: 32, bottom: 48 }; const width = size - margin.left - margin.right; const height = Math.max(400, size) - margin.top - margin.bottom; const offset = 33; // Resize: Scales x.range([0, width]); y.range([height, 0]); // Resize: Generators xaxisGenerator.tickSize(height + 10); yaxisGenerator.tickSize(width + 10); // Resize: Scaffold svg .attr("width", size) .attr("height", height + margin.top + margin.bottom); g .attr("transform", `translate(${[margin.left, margin.top]})`); // Resize: Scales xaxis .call(xaxisGenerator); yaxis .attr("transform", `translate(${width})`) .call(yaxisGenerator); const tick = yaxis.select(".tick:last-of-type"); tick.select("text").attr("x", -(yaxisGenerator.tickSize() + yaxisGenerator.tickPadding()) + offset) tick.select("line").attr("x2", -yaxisGenerator.tickSize() + offset); xaxisLabel .attr("y", height + 40) .html(`Daily maximum temperature→`); yaxisLabel .attr("x", -margin.left) .attr("y", -margin.top + 8) .html(`Daily electricity demand↑`); // Resize: Marks circle .attr("cx", d => x(d.tmax)) .attr("cy", d => y(d.demand)) .attr("r", r); annotation .attr("text-anchor", d => d.textAnchor(size)) .attr("x", d => x(d.x(size))) .attr("y", d => y(d.y(size))); } }); }32:[{"id":"85432258be17b288c4a82421ca854db99a24827df54796166ac00e895021e45cddbf83ae3ccef711bccc3dd0da1e74fddfd5770e5c30d2a3c298465fdec378d0","href":"https://static.observableusercontent.com/files/85432258be17b288c4a82421ca854db99a24827df54796166ac00e895021e45cddbf83ae3ccef711bccc3dd0da1e74fddfd5770e5c30d2a3c298465fdec378d0","name":"azps_20210101-20211231.csv","type":"text/csv","lastModified":1715969859838.05,"size":20778},{"id":"d0bb7be08dd3b050a7554825789238c7d980ac25113e03cff53603cd143b322800bee8a9537704e00db9518bf0d4eb3b6124f51404be204a874f95813cd52bff","href":"https://static.observableusercontent.com/files/d0bb7be08dd3b050a7554825789238c7d980ac25113e03cff53603cd143b322800bee8a9537704e00db9518bf0d4eb3b6124f51404be204a874f95813cd52bff","name":"azps_20200101-20201231.csv","type":"text/csv","lastModified":1715969859838.05,"size":20676},{"id":"cb4bff11c7cba0138842b19bcf516d3917dcdaf087a1e0dc46658fb7aa05b2bd2244f623a355699e1bae9b705cf032f6da486c3042e78d833908a6e9186ce414","href":"https://static.observableusercontent.com/files/cb4bff11c7cba0138842b19bcf516d3917dcdaf087a1e0dc46658fb7aa05b2bd2244f623a355699e1bae9b705cf032f6da486c3042e78d833908a6e9186ce414","name":"nyiso_20210101-20211231.csv","type":"text/csv","lastModified":1715969859838.05,"size":35727},{"id":"112d2892b019a905452d42443a704c10d3debe242672431ebf46346d18cc716e6b64c343b246fa9f493daf537a6d16c5658bd5d50175b92a51c4f86ffc6deb8f","href":"https://static.observableusercontent.com/files/112d2892b019a905452d42443a704c10d3debe242672431ebf46346d18cc716e6b64c343b246fa9f493daf537a6d16c5658bd5d50175b92a51c4f86ffc6deb8f","name":"nyiso_20220101-20221231.csv","type":"text/csv","lastModified":1715969859838.05,"size":35736},{"id":"a8571e5cebd870c963346f12e5928a88483fab6c90af1f7eac661cfa66106d3e28fd92bd9b05ec01f7818c76c0dcd98f4ec51163ae22bfa6357120a2bfc98de1","href":"https://static.observableusercontent.com/files/a8571e5cebd870c963346f12e5928a88483fab6c90af1f7eac661cfa66106d3e28fd92bd9b05ec01f7818c76c0dcd98f4ec51163ae22bfa6357120a2bfc98de1","name":"open-meteo-33.43N112.03W333m.csv","type":"text/csv","lastModified":1715969859838.05,"size":23960},{"id":"30ca7520a883d703d6d22d9f458a3a0469feacc702e67cda3382b8952f3d41685c9ef3cd145f4f29b1f68dd700348bb8646b69305abed67eaa402d0cdee16bda","href":"https://static.observableusercontent.com/files/30ca7520a883d703d6d22d9f458a3a0469feacc702e67cda3382b8952f3d41685c9ef3cd145f4f29b1f68dd700348bb8646b69305abed67eaa402d0cdee16bda","name":"azps_20230101-20231231.csv","type":"text/csv","lastModified":1715969859838.05,"size":20770},{"id":"3e78f9f80c64b0f8ab4306185eceb64c7d2858eba0733b97f8f97370169a17ded70a1013fc5f962f6bada5a45b50c2dc8eea5e608e95054921034afbe44148ec","href":"https://static.observableusercontent.com/files/3e78f9f80c64b0f8ab4306185eceb64c7d2858eba0733b97f8f97370169a17ded70a1013fc5f962f6bada5a45b50c2dc8eea5e608e95054921034afbe44148ec","name":"azps_20220101-20221231.csv","type":"text/csv","lastModified":1715969859838.05,"size":20771},{"id":"a9af4909356726dde738777afdfeb77ef8c89f310d4d291c9283ac8de114cdc726b8ba86902486f6ad0640069d284f4660b1fb97148bcc406c1664f169cbf477","href":"https://static.observableusercontent.com/files/a9af4909356726dde738777afdfeb77ef8c89f310d4d291c9283ac8de114cdc726b8ba86902486f6ad0640069d284f4660b1fb97148bcc406c1664f169cbf477","name":"open-meteo-40.74N74.04W51m.csv","type":"text/csv","lastModified":1715969859838.05,"size":23539},{"id":"7c24c5d8faf012137b0d5c5782cfd23f08c7400697813830a4ab50add907392db6932c64e5112c9ac3c481159a5afd3d38fc21064b26848c86c304baefb7b823","href":"https://static.observableusercontent.com/files/7c24c5d8faf012137b0d5c5782cfd23f08c7400697813830a4ab50add907392db6932c64e5112c9ac3c481159a5afd3d38fc21064b26848c86c304baefb7b823","name":"nyiso_20200101-20201231.csv","type":"text/csv","lastModified":1715969859838.05,"size":35834},{"id":"112d2892b019a905452d42443a704c10d3debe242672431ebf46346d18cc716e6b64c343b246fa9f493daf537a6d16c5658bd5d50175b92a51c4f86ffc6deb8f","href":"https://static.observableusercontent.com/files/112d2892b019a905452d42443a704c10d3debe242672431ebf46346d18cc716e6b64c343b246fa9f493daf537a6d16c5658bd5d50175b92a51c4f86ffc6deb8f","name":"nyiso_20230101-20231231.csv","type":"text/csv","lastModified":1715969859838.05,"size":35736}] 2f:{"title":"Electricity demand vs. temperature in New York and Phoenix","cells":[{"id":0,"value":"# Electricity demand vs. temperature in New York and Phoenix","pinned":false,"hidden":false,"mode":"md"},{"id":598,"value":"This notebook contains the data and code to produce a simpler version of the scatter plot seen in [“See how heat waves could increase the risk of blackouts where you live”](https://www.washingtonpost.com/climate-environment/interactive/2024/texas-california-heat-waves-blackouts-map/), published in The Washington Post on May 21, 2024.","pinned":false,"hidden":false,"mode":"md"},{"id":600,"value":"During heat waves, energy demand spikes as people crank up their air conditioners. In New York and Phoenix, for instance, energy usage is more than twice as high on the hottest days of the year compared to mild days.","pinned":false,"hidden":false,"mode":"md"},{"id":456,"value":"display = chart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"The daily maximum temperatures in New York and Phoenix are from [Open-Meteo](https://open-meteo.com/), and the daily electricity demand values are from the [U.S. Energy Information Administration](https://www.eia.gov/electricity/gridmonitor/dashboard/electric_overview/US48/US48).","pinned":false,"hidden":false,"mode":"md"},{"id":595,"value":"toc({ selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"## Graphics","pinned":false,"hidden":false,"mode":"md"},{"id":441,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"display.resize(size)","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":474,"value":"css = `\n.axis-label {\n font-family: ${franklinLight};\n font-size: 16px;\n}\n.axis-label .arrow {\n font-size: 13px;\n}\n.axis-label.y-axis-label {\n paint-order: stroke fill;\n stroke: white;\n stroke-linejoin: round;\n stroke-width: 12px;\n}\n.axis-label.y-axis-label .arrow {\n font-size: 13px;\n paint-order: fill stroke;\n stroke: none;\n}\n\n.axis .tick line {\n stroke: #e9e9e9;\n}\n.axis .tick text {\n font-family: ${franklinLight};\n font-size: 14px;\n}\n.axis .domain {\n display: none;\n}\n\n.annotation {\n font-family: ${franklinLight};\n font-weight: bold;\n paint-order: stroke fill;\n stroke: white;\n stroke-linejoin: round;\n stroke-width: 8px;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"color = city => {\n if (city === \"New York\") {\n return \"rgb(237, 125, 47)\";\n }\n if (city === \"Phoenix\") {\n return \"rgb(145, 66, 35)\";\n }\n return \"#c0c0c0\"\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"## Generators","pinned":false,"hidden":false,"mode":"md"},{"id":536,"value":"xaxisGenerator = d3.axisBottom(x)\n .tickFormat(d => `${d}°F`)\n .tickValues(d3.range(20, 140, 20));","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"yaxisGenerator = d3.axisLeft(y)\n .tickFormat((d, i, e) => `${d / 1e3}K${i === e.length - 1 ? \" MWh\" : \"\"}`)\n .tickValues(d3.range(50e3, 250e3, 25e3));","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"## Scales","pinned":false,"hidden":false,"mode":"md"},{"id":445,"value":"x = d3.scaleLinear()\n .domain([20, 120])","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"y = d3.scaleLinear()\n .domain([50e3, 225e3])","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":434,"value":"size = Math.min(width, 640)","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":541,"value":"annotations = [\n {\n city: \"New York\",\n x: ww => 70,\n y: ww => 160e3,\n textAnchor: ww => \"end\"\n }, {\n city: \"Phoenix\",\n x: ww => ww <= 380 ? 47 : ww <= 480 ? 118 : 110,\n y: ww => ww <= 380 ? 80e3 : ww <= 480 ? 160e3 : 155e3,\n textAnchor: ww => \"end\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"data = [\n ...phoenix,\n ...newyork\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"### Phoenix","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"phoenix = phoenixDemand.map(d => {\n return {\n city: \"Phoenix\",\n ...d,\n tmax: phoenixTmax.find(d0 => d0.date === d.date).tmax\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"// via https://www.eia.gov/electricity/gridmonitor/expanded-view/electric_overview/balancing_authority/AZPS/ElectricityOverview-13/edit\n// you can only download one year at a time\nphoenixDemand = [\n ...await FileAttachment(\"azps_20200101-20201231.csv\").csv(),\n ...await FileAttachment(\"azps_20210101-20211231.csv\").csv(),\n ...await FileAttachment(\"azps_20220101-20221231.csv\").csv(),\n ...await FileAttachment(\"azps_20230101-20231231.csv\").csv()\n]\n.filter(d => d[\"Demand (MWh)\"]) // remove empty row at end of each file\n.map(d => {\n return {\n date: formatDate(d[\"Timestamp (Hour Ending)\"]),\n demand: +d[\"Demand (MWh)\"]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"// via https://open-meteo.com/en/docs/historical-weather-api#latitude=33.4484&longitude=-112.074&start_date=2020-01-01&end_date=2023-12-31&hourly=&daily=temperature_2m_max&temperature_unit=fahrenheit&timezone=America%2FDenver\nphoenixTmax = formatOpenMeteo(await FileAttachment(\"open-meteo-33.43N112.03W333m.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"### New York","pinned":false,"hidden":false,"mode":"md"},{"id":412,"value":"newyork = newyorkDemand.map(d => {\n return {\n city: \"New York\",\n ...d,\n tmax: newyorkTmax.find(d0 => d0.date === d.date).tmax\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"// via https://www.eia.gov/electricity/gridmonitor/expanded-view/electric_overview/balancing_authority/NYIS/ElectricityRegionDemand-20/edit\n// you can only download one year at a time\nnewyorkDemand = [\n ...await FileAttachment(\"nyiso_20200101-20201231.csv\").csv(),\n ...await FileAttachment(\"nyiso_20210101-20211231.csv\").csv(),\n ...await FileAttachment(\"nyiso_20220101-20221231.csv\").csv(),\n ...await FileAttachment(\"nyiso_20230101-20231231.csv\").csv()\n]\n.filter(d => d[\"New York City Demand (MWh)\"]) // remove empty row at end of each file\n.map(d => {\n return {\n date: formatDate(d[\"Timestamp (Hour Ending)\"]),\n demand: +d[\"New York City Demand (MWh)\"]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"// via https://open-meteo.com/en/docs/historical-weather-api#latitude=40.7143&longitude=-74.006&start_date=2020-01-01&end_date=2023-12-31&hourly=&daily=temperature_2m_max&temperature_unit=fahrenheit&timezone=America%2FNew_York\nnewyorkTmax = formatOpenMeteo(await FileAttachment(\"open-meteo-40.74N74.04W51m.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"formatDate = timestamp => {\n const date = timestamp.split(\",\")[0];\n const [m, d, y] = date.split(\"/\");\n return `${y}-${m.padStart(2, 0)}-${d.padStart(2, 0)}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"formatOpenMeteo = text => {\n const lines = text.split(\"\\n\")\n const cols = [\"date\", \"tmax\"]\n return lines\n .slice(4)\n .map(line => {\n const [ date, tmaxString ] = line.split(\",\");\n return {\n date,\n tmax: +tmaxString\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"import { toc } from \"@climatelab/toc@45\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}