2a:null 2b:["$","title",null,{"children":"Climate Matters: 2026 Spring Package | Climate Central | Observable"}] 30:T5a8,viewof copyButton = { const width = 950; const container = d3.create("div"); const embed = container .append("div") .attr("class", "embed-cta") .style("margin", "0px auto 0 auto") .style("max-width", `${width}px`) .style("padding", "16px") .style("background", "none") .style("border-radius", "14px") .style("text-align", "center") .style("display", "flex") .style("flex-direction", "column") .style("align-items", "center") .style("justify-content", "center") .style("text-align", "center");; embed .append("div") .style("color", "#000") .style("font-size", "clamp(16px, 2vw, 22px)") .style("font-weight", "700") .style("font-family", "Effra") .style("margin-bottom", "18px") .text("Want to embed this map on your website?"); const btn = embed .append("button") .style("border", "none") .style("background", "#ffffff") .style("color", "#000") .style("font-weight", 700) .style("font-size", "clamp(14px, 2vw, 16px)") .style("padding", "10px 18px") .style("border-radius", "999px") .style("cursor", "pointer") .style("width", "clamp(220px, 60%, 360px)") .style("box-shadow", "0 8px 16px rgba(0,0,0,0.18)") .text("Copy iframe code") .on("click", () => { copy(embedCode); btn.text("Copied!"); setTimeout(() => btn.text("Copy iframe code"), 1500); }); return container.node(); }31:T5c2,function drawDiscreteLegend( svgSelection, { x, y, bins, title = null, titleOffset = 12, boxWidth = 130, boxHeight = 14, gap = 0, labelOffset = 28, fontSize = 28, titleFontSize = 40, labelColor = "black", stroke = "none", unit = "°", prefix = "+" } ) { const g = svgSelection .append("g") .attr("class", "discrete-legend") .attr("transform", `translate(${x}, ${y})`); // LEFT-ALIGNED TITLE if (title) { g.append("text") .attr("x", 0) .attr("y", -titleOffset) .attr("text-anchor", "start") .attr("font-family", "Bebas Neue") .attr("font-size", titleFontSize) .attr("fill", labelColor) .text(title); } const items = g .selectAll("g.legend-item") .data(bins) .join("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(${i * (boxWidth + gap)}, 0)`); // Color boxes items .append("rect") .attr("width", boxWidth) .attr("height", boxHeight) .attr("fill", (d) => d.color) .attr("stroke", stroke); // Labels at START of each box items .append("text") .attr("x", (d,i) => i<=1 ? -25:0) .attr("y", boxHeight + labelOffset) .attr("text-anchor", "start") .attr("font-family", "Bebas Neue") .attr("font-size", fontSize) .attr("fill", labelColor) .text((d) => d.min === -2 ? "" : (d.min === -1 ? `${d.min}${unit}` : `${prefix}${d.min}${unit}`)); }32:Tcd6,// STEP 3: CHANGE THE SEASON IN THREE SPOTS IN THIS FUNCTION - I'VE NOTED WHERE TO DO SO. renderSeasonalMap = function () { const width = 1200; const height = 800; const mapWidth = width - margin.left - margin.right; const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("z-index", 10) .style("visibility", "hidden") .style("padding", "6px") .style("background", "white") .style("border", "2px solid #111") .style("border-radius", "2px") .style("font-family", "Effra") .style("font-size", "14px") .style("pointer-events", "none"); function direction(temp) { if (temp >= 1) return "has warmed by"; if (temp <= -1) return "has cooled by"; return "has remained fairly constant, changing by"; } const filtered = counties.features.filter( (d) => d.properties.STATE !== "HI" ); const projection = d3 .geoAlbersUsa() .fitSize([mapWidth, height - margin.top - margin.bottom], { type: "FeatureCollection", features: filtered }); const path = d3.geoPath(projection); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("font-family", "Effra"); drawDiscreteLegend(svg, { x: margin.left, y: 90, boxWidth: mapWidth / bins.length, title: legendTitle, bins }); // ---- Map ---- const mapGroup = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); mapGroup .selectAll("path.county") .data(filtered) .join("path") .attr("class", "county") .attr("d", path) .attr("fill", (d) => getColor(d.properties.CHANGE_F)) .attr("stroke", "#111") .attr("stroke-width", 0.25) .on("mouseover", function (event, d) { d3.select(this).attr("stroke-width", 2).attr("stroke", "white"); const message = direction(d.properties.CHANGE_F); tooltip.style("visibility", "visible").html(` The average ${thisSeason.toLowerCase()} temperature in ${d.properties.COUNTY}, ${d.properties.STATE} ${message} ${d.properties.CHANGE_F}°F since 1970. `); }) .on("mousemove", function (event) { tooltip .style("top", `${event.pageY - 10}px`) .style("left", `${event.pageX + 10}px`); }) .on("mouseout", function () { d3.select(this).attr("stroke-width", 0.25).attr("stroke", "#111"); tooltip.style("visibility", "hidden"); }); mapGroup .append("path") .datum(statesMesh) .attr("fill", "none") .attr("stroke", "#111") .attr("stroke-width", 1) .attr("d", path); // ---- Footer ---- svg .append("text") .attr("x", margin.left) .attr("y", height - 40) .attr("font-size", 14) .attr("fill", "black") .text(footnote); svg .append("text") .attr("x", margin.left) .attr("y", height - 20) .attr("font-size", 14) .attr("fill", "black") .text(footnote2); // ---- Logo (FIXED) ---- svg .append("image") .attr("href", logoUrl) .attr("x", width - 260) .attr("y", height - 55) .attr("width", 250) .attr("height", 18); return svg.node(); }33:[{"id":"25bde8b422f72bc7939e3dbb3c89e99c336dcc3fb34124458391cd603309c56154e2102649345e743a531533bf4d0bb61d937c48e67456f583f7b4d4ec8fd75d","href":"https://static.observableusercontent.com/files/25bde8b422f72bc7939e3dbb3c89e99c336dcc3fb34124458391cd603309c56154e2102649345e743a531533bf4d0bb61d937c48e67456f583f7b4d4ec8fd75d","name":"2026SpringPackage (1).geojson","type":"application/geo+json","lastModified":1771269152713.009,"size":29503477},{"id":"dd33d65629b473f4bb41408a421d1c96b87ec23a94e4f658c71abc9fc6a9b4f70663030e22b05dee03bfc790202bb59868de351b3f9f7b0ba02ecf7213ef5c78","href":"https://static.observableusercontent.com/files/dd33d65629b473f4bb41408a421d1c96b87ec23a94e4f658c71abc9fc6a9b4f70663030e22b05dee03bfc790202bb59868de351b3f9f7b0ba02ecf7213ef5c78","name":"Bebas-Regular.woff2","type":"font/woff2","lastModified":1771264625387.748,"size":21760},{"id":"5a9fadd5c85c0c14f9849886a66dbd03ed67662ead98114cbe633072026e41eec8c0d8ee22bd3c3b0bffb441bf8e8b1964c6861973c9dc3f5f160324feead694","href":"https://static.observableusercontent.com/files/5a9fadd5c85c0c14f9849886a66dbd03ed67662ead98114cbe633072026e41eec8c0d8ee22bd3c3b0bffb441bf8e8b1964c6861973c9dc3f5f160324feead694","name":"CC_LongLogo.png","type":"image/png","lastModified":1771264625387.748,"size":199924},{"id":"8a40cc9c389767d0bf81cc84049ac7d84258b1d3e2e6d1a281b994de825eb79a48b9f775e2b600f353e75051fd36c58d00bd1aaa199efdb59c8e639d1f47fda4","href":"https://static.observableusercontent.com/files/8a40cc9c389767d0bf81cc84049ac7d84258b1d3e2e6d1a281b994de825eb79a48b9f775e2b600f353e75051fd36c58d00bd1aaa199efdb59c8e639d1f47fda4","name":"Effra-Regular.woff2","type":"font/woff2","lastModified":1771264625387.748,"size":23932},{"id":"4e2049d23ea787a96c74356c0a7d40715e0e168611f8d7d18d0d59921bfafb09e5196f7ea6fc6233919f0f5dec0c7916fb010a73a40bfa40a89dc851eee56866","href":"https://static.observableusercontent.com/files/4e2049d23ea787a96c74356c0a7d40715e0e168611f8d7d18d0d59921bfafb09e5196f7ea6fc6233919f0f5dec0c7916fb010a73a40bfa40a89dc851eee56866","name":"Effra-Bold (3).woff2","type":"font/woff2","lastModified":1771350369902.74,"size":20860},{"id":"315ace52f464e0016e0f3f3a77ba8222b2a2bdbc8e2d0a2aa75726c8dedd9b2d874be5429738941929985998e7a7d684d5d48a0a3fc2a580ef766366eae72d75","href":"https://static.observableusercontent.com/files/315ace52f464e0016e0f3f3a77ba8222b2a2bdbc8e2d0a2aa75726c8dedd9b2d874be5429738941929985998e7a7d684d5d48a0a3fc2a580ef766366eae72d75","name":"2026SpringPackage_AK_AvgT@1.geojson","type":"application/geo+json","lastModified":1771610129368.112,"size":3437832},{"id":"315ace52f464e0016e0f3f3a77ba8222b2a2bdbc8e2d0a2aa75726c8dedd9b2d874be5429738941929985998e7a7d684d5d48a0a3fc2a580ef766366eae72d75","href":"https://static.observableusercontent.com/files/315ace52f464e0016e0f3f3a77ba8222b2a2bdbc8e2d0a2aa75726c8dedd9b2d874be5429738941929985998e7a7d684d5d48a0a3fc2a580ef766366eae72d75","name":"2026SpringPackage_AK_AvgT.geojson","type":"application/geo+json","lastModified":1771608578117.184,"size":3437832},{"id":"6a7a16901f4fd4c4452c2a3ff4aa1f5cc73287590a65b413e63d1023afdb04b00375cd530b05a0cf89d2358ecfd4ed5e45ae6016c454d73e30e1933afb0356cf","href":"https://static.observableusercontent.com/files/6a7a16901f4fd4c4452c2a3ff4aa1f5cc73287590a65b413e63d1023afdb04b00375cd530b05a0cf89d2358ecfd4ed5e45ae6016c454d73e30e1933afb0356cf","name":"2026SpringPackage_withAK.geojson","type":"application/geo+json","lastModified":1771610159295.5,"size":32499257}] 2e:{"id":"c5c6b05aaf6bd046","slug":"2026-spring-package","title":"Climate Matters: 2026 Spring Package","thumbnail":"94098b9ea4e626118bfaa2df0868dbb42373f04c56c9d97874920ace745b9a57","access_level":"public","create_time":"$D2026-02-16T17:57:05.387Z","update_time":"$D2026-09-22T18:45:39.765Z","view_time":null,"first_public_time":"$D2026-02-26T00:20:58.499Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1b16cfac8e47ddf9","login":"climatecentral","name":"Climate Central","avatar_url":"https://avatars-next.observableusercontent.com/b8d84fbc6265f9a7c731e62fc076af7c84c7be3a9be06e52da319786d6b129dd","tier":"pro_2024"},"version":1226,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4e31ce8412b726f1","login":"charlotte-selover","name":"Charlotte Selover","avatar_url":"https://avatars-next.observableusercontent.com/3890132cdba02e4d3af0aa582058381eac042964ed27aaf5dc504ffac17e2371","tier":null},{"type":"individual","id":"43d98796353ee1e2","login":"ktrudeau","name":"Kaitlyn Trudeau","avatar_url":"https://avatars-next.observableusercontent.com/3650447af2e2411fcfe3aa899ed520cce0fe01a62f5b78ec6617c32d64cdf326","tier":null}],"members":[{"type":"individual","id":"4e31ce8412b726f1","login":"charlotte-selover","name":"Charlotte Selover","avatar_url":"https://avatars-next.observableusercontent.com/3890132cdba02e4d3af0aa582058381eac042964ed27aaf5dc504ffac17e2371","tier":null,"role":"editor"},{"type":"individual","id":"43d98796353ee1e2","login":"ktrudeau","name":"Kaitlyn Trudeau","avatar_url":"https://avatars-next.observableusercontent.com/3650447af2e2411fcfe3aa899ed520cce0fe01a62f5b78ec6617c32d64cdf326","tier":null,"role":"editor"},{"type":"team","id":"1b16cfac8e47ddf9","login":"climatecentral","name":"Climate Central","avatar_url":"https://avatars-next.observableusercontent.com/b8d84fbc6265f9a7c731e62fc076af7c84c7be3a9be06e52da319786d6b129dd","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"186c52906a25cfb1","slug":"seasonal-temperature-change","title":"Seasonal Temperatures","owner":{"id":"1b16cfac8e47ddf9","login":"climatecentral","name":"Climate Central"}},"type":"notebook","body":{"titling":"auto","title":"Climate Matters: 2026 Spring Package","cells":[{"id":0,"value":"# Climate Matters: 2026 Spring Package","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":957,"value":"## Change in Average ${thisSeason} Temperature (°F) by County, 1970-${endYear}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"Like all other seasons, spring is getting warmer across the U.S. – impacting allergies, wildfire risk, pest seasons, agriculture, and more.\n\nThe map below shows how much average ${thisSeason.toLowerCase()} temperatures have changed in counties across the contiguous U.S. from 1970-${endYear}. Read more about the impacts of increasing ${thisSeason.toLowerCase()} warmth in Climate Central's 2026 ${thisSeason} Package.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1012,"value":"finalMap = {\n \n const svg2 = renderSeasonalMap();\n\n await injectFonts(svg2, effra, effraBold, bebas);\n return svg2;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"Methodology: Monthly temperature data for counties across the contiguous United States were obtained from NOAA/NCEI's nClimDiv dataset. This data can also be accessed via NCEI's Climate at a Glance. While Connecticut has recently switched from counties to planning regions, NCEI does not yet have data for the new geographies. Until that changes, we will continue to use the county data available for Connecticut.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":652,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":656,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":657,"value":"# PAGE CODE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":924,"value":"## Items to update","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":801,"value":"// Update the season (should be capitalized)\nthisSeason = \"Spring\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"// Replace this file in the Files pane and it will automatically update.\ncounties = FileAttachment(\"2026SpringPackage_withAK.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"// Copy the iFrame code and paste it in this cell between the two tick marks ``\nembedCode = {\n return ``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"## Legend items","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"legendTitle = `Average ${thisSeason} temperature change, 1970-${endYear}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"// If you ever want to change the colors - do so here\ncolors = ['#deebf7','#e7e7e7','#fee5d9','#fcbba1','#fc9272','#fb6a4a','#ef3b2c','#cb181d', '#99000d']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"// If you need to change the legend categories/colors/values -- change here\nbins = [\n { min: -2, max: -1.01, color: colors[0] },\n { min: -1, max: 0.999, color: colors[1]},\n { min: 1, max: 1.999, color: colors[2] },\n { min: 2, max: 2.999, color: colors[3]},\n { min: 3, max: 3.999, color: colors[4] },\n { min: 4, max: 4.999, color: colors[5] },\n { min: 5, max: 5.999, color: colors[6] },\n { min: 6, max: 6.999, color: colors[7] },\n { min: 7, max: 10.999, color: colors[8] }\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// Function that assigns a county a color based on the temperature change variable\ngetColor = function(temp) {\n let x = +temp;\n if(x <= -1) {\n return colors[0];\n } else if (x > -1 & x < 1) {\n return colors[1];\n } else if (x >= 1 & x < 2) {\n return colors[2];\n } else if (x >= 2 & x < 3) {\n return colors[3];\n } else if (x >= 3 & x < 4) {\n return colors[4];\n } else if (x >= 4 & x < 5) {\n return colors[5];\n } else if (x >= 5 & x < 6) {\n return colors[6];\n } else if (x >= 6 & x < 7) {\n return colors[7];\n } else {\n return colors[8]\n }\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"## Map items","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"seasons = ({\n \"Winter\" : \"DJF\",\n \"Spring\": \"MAM\",\n \"Summer\": \"JJA\",\n \"Fall\" : \"SON\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"endYear = 2025","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"seasMonths = seasons[thisSeason]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"// Edit here if needed\nfootnote = `Change in average ${thisSeason.toLowerCase()} (${seasMonths}) temperatures (°F) across U.S. counties from 1970-2025. Data for Hawaii was not available over the same period.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"footnote2 = \"Source: NOAA/NCEI Climate at a Glance.\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"// CC Logo\nlogoUrl = await FileAttachment(\"CC_LongLogo.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"// Create a state \"mesh\" where the borders are merged so we can render a single line where they would otherwise overlap on top of another state's borders\nstatesMesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"// Import GeoJSON of US counties\nus = d3.json(\"https://unpkg.com/us-atlas@3/counties-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"// For the tooltip\nmutable thisDiv = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"margin = [{\n top: 160,\n right: 60,\n bottom: 90,\n left: 60\n }][0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"## Required imports/libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1165,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"import {copy} from \"@mbostock/copy-to-clipboard\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"injectFonts = async (svgElement, effra, effra_bold, bebas) => {\n const [effraUrl, boldUrl, bebasUrl] = await Promise.all([effra, effra_bold, bebas]);\n const svg = d3.select(svgElement); // ensure it’s a D3 selection\n\n svg.insert(\"style\", \":first-child\").text(`\n @font-face {\n font-family: 'Effra';\n font-weight: 400;\n src: url('${effraUrl}') format('woff2');\n }\n @font-face {\n font-family: 'Effra Bold';\n font-weight: 700;\n src: url('${boldUrl}') format('woff2');\n }\n @font-face {\n font-family: 'Bebas Neue';\n font-weight: 400;\n src: url('${bebasUrl}') format('woff2');\n }\n `);\n\n return svg.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"## Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"effra = FileAttachment(\"Effra-Regular.woff2\") \n.arrayBuffer()\n .then(buf => `data:font/woff2;base64,${btoa(String.fromCharCode(...new Uint8Array(buf)))}`)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"effraBold = FileAttachment(\"Effra-Bold (3).woff2\") \n.arrayBuffer()\n .then(buf => `data:font/woff2;base64,${btoa(String.fromCharCode(...new Uint8Array(buf)))}`)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"effraBoldUrl = await Promise.all([effraBold]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"effraUrl = await Promise.all([effra]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"bebas = FileAttachment(\"Bebas-Regular.woff2\").arrayBuffer()\n .then(buf => `data:font/woff2;base64,${btoa(String.fromCharCode(...new Uint8Array(buf)))}`)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"bebasUrl = await Promise.all([bebas]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 2f:"$2e:body"