31:T10ee,legend = () => { const ticksize = 4; const margin = {left: 0, right: 0, top: 18, bottom: ticksize + 30}; const width = 320 - margin.left - margin.right; const height = 12; const textpad = 12; const x = d3.scaleBand().domain(d3.range(5)).range([0, width / 2]); const epsilon = 1; const wrapper = d3.create("div") .style("width", `${width + margin.left + margin.right}px`) .style("margin", "0 auto") .style("margin-bottom", "-40px") const titles = wrapper.append("div") .style("font-family", franklinLight) .style("margin-bottom", "12px") .style("text-align", "center"); titles.append("div") .style("font-size", "18px") .style("font-weight", "bold") .text("Change in length of mosquito season"); titles.append("div") .text("1980-2009 vs. 2019-2023"); const svg = wrapper.append("svg") .attr("font-family", franklinLight) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${[margin.left, margin.top]})`) g.selectAll(".label") .data(["← Shorter", "Longer →"]) .join("text") .attr("font-size", 16) .attr("x", (d, i) => width / 2 + (16 * (i === 0 ? -1 : 1))) .attr("y", -6) .attr("text-anchor", (d, i) => i === 0 ? "end" : "start") .text(d => d); const decrease = g.append("g"); const decreaseData = x.domain() .map((x, i, e) => { const weeks = e.length - x - 1; return { x, color: color(1 - 7 + 7 * x - 28), html: i === 0 ? `${e.length - 1}weeks` : weeks === 0 ? "" : `${weeks}` }}); const rect = [[0, 0], [x.bandwidth(), 0], [x.bandwidth(), height], [0, height]]; const decreaseRect = decrease.selectAll("polygon") .data(decreaseData) .join("polygon") .attr("transform", d => `translate(${x(d.x)})`) .attr("points", (d, i, e) => { if (i === 0) { return [ [0, height / 2], [x.bandwidth() / 2, 0], [x.bandwidth(), 0], [x.bandwidth(), height], [x.bandwidth() / 2, height], [0, height / 2] ] } else { return rect; } }) .attr("fill", d => d.color); const decreaseTick = decrease.selectAll(".tick") .data(decreaseData) .join("g") .attr("class", "tick") .attr("transform", d => `translate(${x(d.x) + x.bandwidth()})`); decreaseTick.append("line") .attr("y2", (d, i, e) => height + ticksize * (i === e.length - 1 ? 0 : 1)) .attr("stroke", "black") decreaseTick.append("text").filter(d => d) .attr("font-size", 14) .attr("text-anchor", "middle") .attr("y", height + ticksize + textpad) .html(d => d.html); const increase = g.append("g") .attr("transform", `translate(${width / 2})`); const increaseData = x.domain() .map((x, i, e) => { const weeks = x; return { x, color: color(epsilon + 7 * x), html: weeks === 0 ? "" : `${weeks}${i === e.length - 1 ? " weeks" : ""}` }}); const increaseRect = increase.selectAll("polygon") .data(increaseData) .join("polygon") .attr("transform", d => `translate(${x(d.x)})`) .attr("points", (d, i, e) => { if (i === e.length - 1) { return [ [0, 0], [x.bandwidth() / 2, 0], [x.bandwidth(), height / 2], [x.bandwidth() / 2, height], [0, height], [0, 0] ] } else { return rect; } }) .attr("fill", d => d.color); const increaseTick = increase.selectAll(".tick") .data(increaseData) .join("g") .attr("class", "tick") .attr("transform", d => `translate(${x(d.x)})`); increaseTick.append("line") .attr("y2", (d, i) => height + ticksize * Math.min(i, 1)) .attr("stroke", "black") increaseTick.append("text").filter(d => d) .attr("font-size", 14) .attr("text-anchor", "middle") .attr("y", height + ticksize + textpad) .html(d => d.html); return wrapper.node(); }32:T8f9,map = function*() { const wrapper = d3.create("div") .style("width", `${w}px`) .style("height", `${h}px`) .style("position", "relative"); wrapper.append("style").html(css); const canvas = wrapper.append("canvas") .style("position", "absolute"); canvas.node().width = w; canvas.node().height = h; const context = canvas.node().getContext("2d"); path.context(context); for (let i = 0, l = V.length; i < l; i++) { const v = V[i]; if (!v) continue; const lon = X[i % X.length]; const lat = Y[i / X.length | 0]; const w = Math.max(-180, lon - cell_res / 2); const e = Math.min(180, lon + cell_res / 2); const n = Math.min(90, lat + cell_res / 2); const s = Math.max(-90, lat - cell_res / 2); context.beginPath(); path({ type: "Feature", geometry: { type: "Polygon", // wn, en, es, ws, wn coordinates: [ [[w, n], [e, n], [e, s], [w, s], [w, n]] ] } }); const c = color(v); context.fillStyle = c; context.fill(); context.strokeStyle = c; context.stroke(); if (i % 1e4 === 0) yield wrapper.node(); } context.fillStyle = "none"; context.lineWidth = 1; context.beginPath(); path(usGeoInner); context.strokeStyle = "#494949"; context.stroke(); context.beginPath(); path(usGeoOuter); context.strokeStyle = "#2a2a2a"; context.stroke(); const svg = wrapper.append("svg") .style("position", "absolute") .attr("width", w) .attr("height", h); const citiesG = svg.selectAll(".city") .data(cities) .join("g") .attr("class", d => `city ${d.pos} ${toSlugCase(d.name)}`) .attr("transform", d => `translate(${projection([d.lon, d.lat])})`); citiesG.append("circle") .attr("class", "bg bg-0") .attr("r", 3); citiesG.append("circle") .attr("class", "bg bg-1") .attr("r", 3); citiesG.append("circle") .attr("class", "fg") .attr("r", 3); citiesG.append("text") .attr("class", "bg bg-0") .text(d => d.name); citiesG.append("text") .attr("class", "bg bg-1") .text(d => d.name); citiesG.append("text") .attr("class", "fg") .text(d => d.name); yield wrapper.node(); }33:T6ec,css = ` .city circle.bg { fill: none; stroke: white; } .city circle.bg-0 { stroke-width: 6px; stroke-opacity: 0.2; } .city circle.bg-1 { stroke-width: 3px; stroke-opacity: 0.5; } .city circle.fg { fill: none; stroke: black; } .city.ne text { transform: translate(4px, -4px); } .city.se text { transform: translate(4px, 13px); } .city.e text { transform: translate(6px, 4.5px); } .city.boston { display: ${w <= 480 ? "none" : "block"}; } .city.boston text { text-anchor: ${w <= 900 ? "end" : "start"}; transform: translate(${w <= 900 ? "-4px" : "4px"}, -4px); } .city.chicago text { text-anchor: ${w <= 620 ? "end" : "start"}; transform: translate(${w <= 620 ? "-4px" : "4px"}, -4px); } .city.minneapolis { display: ${w <= 480 ? "none" : "block"}; } .city.new-york text { text-anchor: ${w <= 660 ? "end" : "start"}; transform: translate(${w <= 600 ? "-4px" : "4px"}, -4px); } .city.philadelphia { display: ${w <= 480 ? "none" : "block"}; } .city.philadelphia text { text-anchor: ${w <= 768 ? "end" : "start"}; transform: translate(${w <= 768 ? "-6px" : "6px"}, 4.5px); } .city.seattle text { transform: translate(4px, ${w <= 400 ? "13px" : "-4px"}); } .city.st-louis { display: ${w <= 480 ? "none" : "block"}; } .city.washington-dc text { text-anchor: ${w <= 400 ? "end" : w <= 768 ? "middle" : "start"}; transform: ${w <= 400 ? "translate(-4px, 13px)" : w <= 768 ? "translate(0px, 16px)" : "translate(4px, 13px)"}; } .city text { font-size: ${w <= 480 ? "13px" : "14px"}; font-family: ${franklinLight}; fill: black; } .city text.bg { fill: white; stroke: white; } .city text.bg-0 { stroke-width: 4px; stroke-opacity: 0.2; } .city text.bg-1 { stroke-width: 2px; stroke-opacity: 0.5; } `34:[{"id":"6ccd4f8232dcdab3104d858e2009e021a53aa0eea5d3f506aaf19851bc2d6f8575bacde09f1eefe2ea312a83fdfbacda7f9323c90e930dae9f44b227951ea44f","href":"https://static.observableusercontent.com/files/6ccd4f8232dcdab3104d858e2009e021a53aa0eea5d3f506aaf19851bc2d6f8575bacde09f1eefe2ea312a83fdfbacda7f9323c90e930dae9f44b227951ea44f","name":"cities.json","type":"application/json","lastModified":1723833829879.707,"size":971},{"id":"3f34d47829851e750ca1eae26089ee99591652d26b2d4705c1eef7be396c4c71ef7dd25a0483c0ffe6a2dd7f8b6446f1658e8fac0f55e5ff41a9bbddfd064e53","href":"https://static.observableusercontent.com/files/3f34d47829851e750ca1eae26089ee99591652d26b2d4705c1eef7be396c4c71ef7dd25a0483c0ffe6a2dd7f8b6446f1658e8fac0f55e5ff41a9bbddfd064e53","name":"statesTopo.json","type":"application/json","lastModified":1723833829879.707,"size":60898},{"id":"0fd527ac4a2ae17904418ef97170275babc1b4c49e54409ecd460e54214de50cdfa7bc96e69e38e00f3acc7a8298925a4d8ef8a638da89b87949fcfbbd7c15e4","href":"https://static.observableusercontent.com/files/0fd527ac4a2ae17904418ef97170275babc1b4c49e54409ecd460e54214de50cdfa7bc96e69e38e00f3acc7a8298925a4d8ef8a638da89b87949fcfbbd7c15e4","name":"mosquito_days_anomaly_v3.nc","type":"application/octet-stream","lastModified":1723834019686.245,"size":9738220}] 2f:{"title":"Map: Change in length of mosquito season","cells":[{"id":0,"value":"# Map: Change in length of mosquito season","pinned":false,"hidden":false,"mode":"md"},{"id":824,"value":"This notebook contains the data and code to produce a version of the map seen in [“Where mosquito season is getting longer”](https://www.washingtonpost.com/climate-environment/interactive/2024/mosquito-season-state-change-global-warming/), published in The Washington Post on Aug. 22, 2024.","pinned":false,"hidden":false,"mode":"md"},{"id":283,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"

\n \n \n

Note: White areas had no days where the average weather was suitable for mosquitoes.

Source: GridMET. Method based on Climate Central, which used mosquito suitability measurements from Yamana and Eltahir, 2013.

","pinned":false,"hidden":false,"mode":"html"},{"id":307,"value":"toc({ selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"## Graphics","pinned":false,"hidden":false,"mode":"md"},{"id":264,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"## Color","pinned":false,"hidden":false,"mode":"md"},{"id":479,"value":"colors = ['#7f3b08','#b35806','#e08214','#fdb863','#fee0b6','#ffffff','#d8daeb','#b2abd2','#8073ac','#542788','#2d004b']","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"positive = colors.slice(0, colors.length / 2).reverse()","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"negative = colors.slice(Math.ceil(colors.length / 2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"color = value => {\n const round = Math.round(value);\n if (round > 0) {\n if (round < 7) return positive[0];\n if (round < 14) return positive[1];\n if (round < 21) return positive[2];\n if (round < 28) return positive[3];\n return positive[4];\n }\n if (round < 0) {\n if (round > -7) return negative[0];\n if (round > -14) return negative[1];\n if (round > -21) return negative[2];\n if (round > -28) return negative[3];\n return negative[4];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"## Geo","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"projection = d3.geoAlbers()\n .fitSize([w, h], usGeoOuter)","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"usTopo = FileAttachment(\"statesTopo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"usGeoInner = topojson.mesh(usTopo, usTopo.objects.ne_50m_admin_1_states_provinces_lakes, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"usGeoOuter = topojson.mesh(usTopo, usTopo.objects.ne_50m_admin_1_states_provinces_lakes, (a, b) => a === b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"cities = FileAttachment(\"cities.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"file = FileAttachment(\"mosquito_days_anomaly_v3.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"nc = file\n .arrayBuffer()\n .then((buffer) => new netcdf(buffer))","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"V = nc.getDataVariable(\"count_anomaly\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"X = nc.getDataVariable(\"lon\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"Y = nc.getDataVariable(\"lat\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"cell_res = 1 / 24","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"w = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"h = w * 0.631","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"function toSlugCase(x) {\n return x.toString().toLowerCase()\n .replace(/\\s+/g, \"-\") // Replace spaces with -\n .replace(/[^\\w\\-]+/g, \"\") // Remove all non-word chars\n .replace(/\\-\\-+/g, \"-\") // Replace multiple - with single -\n .replace(/^-+/, \"\") // Trim - from start of text\n .replace(/-+$/, \"\"); // Trim - from end of text\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"import { toc } from \"@climatelab/toc@45\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"netcdf = import(\"https://cdn.skypack.dev/netcdfjs@2.0.2?min\").then(d => d.NetCDFReader)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}