31:Ta89,viewof map = { let tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("padding", "5px") .style("opacity", 0.9) .style("background", "white") .style("border", "2px solid") .style("border-radius", "2px") .style("pointer-radius", "none"); const div = d3.create("div"); function direction(temp) { if (temp >= 1) { return "have warmed by"; } else if (temp <= -1) { return "have cooled by"; } else { return "have remained fairly constant, warming by just "; } } // we create an SVG with the width and height specified const svg = div .append("svg") .attr("width", 1000) .attr("height", 750) .attr("viewBox", [0, 0, width, 750]); const countyGeogs = svg .append("g") .selectAll("path") .data(counties.features) .join("path") // This line renders our population data .attr("fill", (d) => getColor(d.properties["2024FallPackage_CountyMap_Slopes_DIFF"]) ) .style("stroke", "black") .style("stroke-width", 0.25) .attr("d", path); countyGeogs .on("mouseover", function (e, d) { let thisDiv = d3.select(this).data()[0]; if (thisDiv !== mutable thisDiv) mutable thisDiv = thisDiv; d3.select(this).style("stroke-width", 2).style("stroke", "yellow"); const message = direction( thisDiv.properties["2024FallPackage_CountyMap_Slopes_DIFF"] ); const cc = thisDiv.properties.STUSPS === "LA" ? "Parish" : "County"; tooltip.style( "visibility", "visible" ).html(`Average fall temperatures in ${ thisDiv.properties.NAME } ${cc}, ${thisDiv.properties.STUSPS} ${message} ${+thisDiv.properties["2024FallPackage_CountyMap_Slopes_DIFF"]}°F since 1970.`); }) .on("mousemove", function (e, d) { return tooltip .style("top", e.pageY - 10 + "px") .style("left", e.pageX + 10 + "px"); }) .on("mouseout", function (e, d) { if (mutable thisDiv) mutable thisDiv = null; d3.select(this).style("stroke-width", 0.15).style("stroke", "black"); tooltip.style("visibility", "hidden"); }); // this part renders the state borders over top of our counties svg .append("path") .datum(statesMesh) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("d", path); // we need to return a DOM element. // the .node() function returns the DOM element corresponding to the d3 selection. return div.node(); }32:Ta05,33:[{"id":"5bd2404c2d648c5589110c71483596038aee130c19a7177a0d689a0255e43485c8a1b123251eb700cc2d86419c45bd37294dafef582233a8d6a1dfeaaf485c85","href":"https://static.observableusercontent.com/files/5bd2404c2d648c5589110c71483596038aee130c19a7177a0d689a0255e43485c8a1b123251eb700cc2d86419c45bd37294dafef582233a8d6a1dfeaaf485c85","name":"2024FallPackage_Counties.geojson","type":"application/geo+json","lastModified":1724657894670.642,"size":25520029},{"id":"352ec3f52e7d3c174c44fb9e854358401ea97b850ed6467a12bc750aec32a3b797566562c1e74040b7b43cc40b0e925ca27c11f6a171ce6031be3659fabfcda0","href":"https://static.observableusercontent.com/files/352ec3f52e7d3c174c44fb9e854358401ea97b850ed6467a12bc750aec32a3b797566562c1e74040b7b43cc40b0e925ca27c11f6a171ce6031be3659fabfcda0","name":"2024FallPackage_CountyData.csv","type":"text/csv","lastModified":1724678834355.056,"size":47692},{"id":"5a9fadd5c85c0c14f9849886a66dbd03ed67662ead98114cbe633072026e41eec8c0d8ee22bd3c3b0bffb441bf8e8b1964c6861973c9dc3f5f160324feead694","href":"https://static.observableusercontent.com/files/5a9fadd5c85c0c14f9849886a66dbd03ed67662ead98114cbe633072026e41eec8c0d8ee22bd3c3b0bffb441bf8e8b1964c6861973c9dc3f5f160324feead694","name":"CC_LongLogo-2.png","type":"image/png","lastModified":1724647249173.001,"size":199924}] 2f:{"title":"Climate Matters: 2024 Fall Package","cells":[{"id":1303,"value":"# Climate Matters: 2024 Fall Package","pinned":false,"hidden":false,"mode":"md"},{"id":2831,"value":"

Mapping the Change in Average Fall Temperatures (°F) by County, 1970-2023

","pinned":false,"hidden":false,"mode":"html"},{"id":2371,"value":"The map below shows how much the average fall (September-November) temperature (°F) has changed from 1970-2023 in counties across the contiguous U.S. Read more about changes to fall temperatures in Climate Central's 2024 Fall Package. County-level monthly average temperatures were obtained from NCEI's nClimDiv dataset and can also be accessed via Climate at a Glance.

Note: While Connecticut has recently switched from counties to planning regions, NCEI does not yet have data for the new geographies. Until that changes, county data will continue to be used for Connecticut.","pinned":false,"hidden":false,"mode":"md"},{"id":2070,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2117,"value":"newMap = htl.html`\n
\n \n \n
\n
${viewof legend}
\n
${viewof map}
\n
${viewof logo}
\n
\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2468,"value":"
\n
Want to embed this map on another website?
\n
${Object.assign(html`
","pinned":false,"hidden":false,"mode":"html"},{"id":2052,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1580,"value":"viewof legend = htl.html`
\n \n
${Legend(d3.scaleThreshold([`+1°`,`+2°`,`+3°`,`+4°`,`+5°`], colors), {width: 1000, height:50, tickSize:2, title: \"Change in average fall temperature (°F) by county, 1970-2023\", } )}
\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"mutable thisDiv = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"getColor = function(temp) {\n let x = +temp;\n if(x < 1) {\n return colors[0];\n } else if (x >= 1 & x < 2) {\n return colors[1];\n } else if (x >= 2 & x < 3) {\n return colors[2];\n } else if (x >= 3 & x < 4) {\n return colors[3];\n } else {\n return colors[4];\n } \n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2649,"value":"embedCode = {\n return``\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"colors = ['#f2e0a3','#df9f5b','#d86e44','#d74532','#7f0e0e']","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"// The borders of the states are merged so we can render a single line where they would otherwise overlap\nstatesMesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"projection = d3.geoAlbersUsa()\n//.fitSize([width, height], countyShapes)\n// The default projection parameters used by most other county map examples instead of fitSize:\n.scale(1100)\n.translate([975/2, 610/2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"height = width * 0.45","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"us = d3.json(\"https://unpkg.com/us-atlas@3/counties-10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"counties = FileAttachment(\"2024FallPackage_Counties.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":2426,"value":"viewof dataDownload = DOM.download(\n FileAttachment(\"2024FallPackage_CountyData.csv\").blob(),\n FileAttachment(\"2024FallPackage_CountyData.csv\").name,\n \"Download Data\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1793,"value":"viewof logo = await (FileAttachment(\"CC_LongLogo-2.png\").image({width: 250, height:18}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2170,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":2701,"value":"import {copy} from \"@mbostock/copy-to-clipboard\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2817,"value":"\n\n","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}