31:T94b,chart = () => { // Scaffold const svg = d3.create("svg").attr("class", "chart"); 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"); // Marks const dot = g.append("g") .attr("class", "dots") .selectAll(".dot") .data(data) .join("circle") .attr("class", "dot") .attr("dx", 5) .attr("fill", d => fill(d.season)) .attr("stroke", d => stroke(d.season)); const label = g.append("g") .attr("class", "labels") .selectAll(".label") .data(data.filter(d => d.days === 7)) .join("text") .attr("class", "label"); return Object.assign(svg.node(), { update(ww, place, duration) { // Resize: Dimensions const r = ww <= 480 ? 6 : 7; const margin = { left: 45, right: ww <= 480 ? 102 : ww <= 768 ? 114 : r + 1, top: 32, bottom: 8 }; const size = Math.min(420, ww); const width = size - margin.left - margin.right; const height = Math.min(300, size * 0.75) - margin.top - margin.bottom; // Resize: Scales x.range([0, width]); y.range([height, 0]); // Resize: Data const labelData = data .filter(d => d.days === 7) .map(d => (d.y = y(d.mean_error), d)); const dodged = dodge(labelData.map(d => d.y), ww <= 480 ? 16 : 20); labelData.forEach((d, i) => (d.y = dodged[i], d)); // Resize: Scaffold svg .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); g .attr("transform", `translate(${[margin.left, margin.top]})`); // Resize: Axes xaxis .call(g => xaxisGenerator(g, ww, x, height)); yaxis .call(g => yaxisGenerator(g, y, width, height, margin)); // Resize: Marks dot .attr("cx", d => x(d.days)) .attr("cy", d => y(d.mean_error)) .attr("r", r); label .data(labelData) .attr("dx", r + 5) .attr("dy", r - 2) .attr("fill", d => stroke(d.season)) .attr("x", width) .attr("y", d => d.y) .text(d => seasonText(d.season)); } }) }32:[{"id":"339e11fc09fa710ae08c9522381222ff36f4f5f7948fb308bce9f16a6b41a32838f06da627bb2056dadeb1b0a0f863d397d8d5575e128b337a1539a6b8847532","href":"https://static.observableusercontent.com/files/339e11fc09fa710ae08c9522381222ff36f4f5f7948fb308bce9f16a6b41a32838f06da627bb2056dadeb1b0a0f863d397d8d5575e128b337a1539a6b8847532","name":"cities.json","type":"application/json","lastModified":1719358339323.82,"size":44414299}] 2f:{"title":"Temperature forecast accuracy in U.S. cities","cells":[{"id":0,"value":"# Temperature forecast accuracy in U.S. cities","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"This notebook contains the data and code to produce a version of the chart seen in [“How accurate is the weather forecast in your city?”](https://www.washingtonpost.com/climate-environment/interactive/2024/how-accurate-is-the-weather-forecast/), published in The Washington Post on July 2, 2024.","pinned":false,"hidden":false,"mode":"md"},{"id":247,"value":"Below, search for your city to see how forecast accuracy changes as it goes further into the future. We called a forecast “accurate” if it was within 3°F of the average daily high temperature. Because accuracy often varies depending on the time of year, we are also showing you the accuracy during the warmer months (April through September) and the cooler months (October through March).","pinned":false,"hidden":false,"mode":"md"},{"id":155,"value":"viewof place = Inputs.select(places, {\n format: d => `${d.city}, ${d.state_post}`,\n label: \"Select a city:\",\n value: places.find(d => d.id === \"206\") \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"\n

In ${place.city}, ${place.state_post}, the forecast is accurate\n ${place.days === 0 ? \"less than one day out.\" : place.days === 7 ? \"at least 7 days out.\" : `${place.days < 3 ? \"only \" : \"\"}${place.days} day${place.days === 1 ? \"\" : \"s\"} out.`}\n

${place.season_diff < -0.1 ? \"Warm months are easier to predict than cool months.\" : place.season_diff > 0.1 ? \"Cool months are easier to predict than warm months.\" : \"Cool and warm months are about equally predictable.\"}

","pinned":false,"hidden":false,"mode":"html"},{"id":240,"value":"

Average forecast error for Washington, D.C.

","pinned":false,"hidden":false,"mode":"html"},{"id":43,"value":"display = chart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"toc({ selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"## Graphics","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"display.update(width, place)","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"css = `\n.chart {\n overflow: visible;\n}\n\n.axis .domain {\n display: none;\n}\n.axis .tick text {\n fill: #666666;\n font-family: ${franklinLight};\n font-size: 14px;\n}\n.axis .tick line {\n stroke: #d5d5d5;\n}\n.axis.x-axis .tick line {\n stroke-dasharray: 2,3;\n}\n.axis.y-axis .tick text {\n paint-order: stroke fill;\n stroke: white;\n stroke-linejoin: round;\n stroke-width: 6px;\n text-anchor: start;\n}\n\n.label {\n font-family: ${franklinLight};\n font-size: ${width <= 480 ? \"14\" : \"16\"}px;\n font-weight: bold;\n}\n\n.robotext {\n font-family: ${franklinLight};\n}\n.robotext-pill {\n font-weight: bold;\n white-space: nowrap;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"## Axes","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"xaxisGenerator = (g, ww, x, height) => {\n const generator = d3.axisTop(x)\n .tickFormat((d, i) => `${d}${i === 0 ? ww <= 350 ? \" day\" : \" day out\" : \"\"}`)\n .tickSize(height + 20);\n\n const axis = g\n .attr(\"transform\", `translate(0, ${height})`)\n .call(generator);\n\n const tick = axis.selectAll(\".tick\")\n \n tick.select(\"text\")\n .style(\"opacity\", d => ww <= 500 ? d % 2 === 1 ? 1 : 0 : 1)\n\n return g;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"yaxisGenerator = (g, y, width, height, margin) => {\n const generator = d3.axisLeft(y)\n .tickFormat(d => `${d.toFixed(yInterval === 1 ? 0 : 1)}°F`)\n .tickPadding(0)\n .tickSize(width + margin.left)\n .tickValues(d3.range(yDomain[0], yDomain[1] + yInterval, yInterval));\n\n const axis = g\n .attr(\"transform\", `translate(${width})`)\n .call(generator);\n\n return g;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"## Scales","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"x = d3.scalePoint().domain(d3.range(1, 8).slice())","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"extent = d3.extent(data, d => d.mean_error);","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"range = extent[1] - extent[0];","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"yInterval = range < 1 ? 0.5 : 1;","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"yDomain = [floorTo(extent[0], yInterval), ceilTo(extent[1], yInterval)];","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"y = d3.scaleLinear().domain(yDomain);","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"fill = season => season === \"year\" ? \"#fff\" : season === \"warm\" ? \"#ffc200\" : \"#0082e6\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"stroke = season => season === \"year\" ? \"#2a2a2a\" : season === \"warm\" ? \"#cc9c00\" : \"#005799\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"seasonText = season => season === \"year\" ? \"Full year\" : season === \"warm\" ? \"Warm months\" : \"Cool months\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"places = (await FileAttachment(\"cities.json\").json()).sort((a, b) => d3.ascending(a.city, b.city) || d3.ascending(a.state_name, b.state_name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"data = place.data.sort((a, b) => d3.ascending(a.season, b.season))","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"// Takes an array of numbers representing the y-coordinate\n// See https://observablehq.com/@d3/slope-chart/3\nfunction dodge(positions, separation = 10, maxiter = 10, maxerror = 1e-1) {\n let n = positions.length;\n if (!positions.every(isFinite)) throw new Error(\"invalid position\");\n if (!(n > 1)) return positions;\n let index = d3.range(positions.length);\n for (let iter = 0; iter < maxiter; ++iter) {\n index.sort((i, j) => d3.ascending(positions[i], positions[j]));\n let error = 0;\n for (let i = 1; i < n; ++i) {\n let delta = positions[index[i]] - positions[index[i - 1]];\n if (delta < separation) {\n delta = (separation - delta) / 2;\n error = Math.max(error, delta);\n positions[index[i - 1]] -= delta;\n positions[index[i]] += delta;\n }\n }\n if (error < maxerror) break;\n }\n return positions;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"function ceilTo(number, interval) {\n return Math.ceil(number / interval) * interval;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"function floorTo(number, interval) {\n return Math.floor(number / interval) * interval;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { toc } from \"@climatelab/toc@45\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}