2c:null 2d:["$","title",null,{"children":"Risky heat added by climate change, June-August 2025 | Climate Central | Observable"}] 32:T1fa8,viewof risky_map = { const BASE_W = 1000, BASE_H = 650; // design size (all coordinates use this) const container = d3 .create("div") .style("position", "relative") .style("display", "block") // not inline-block .style("width", "100%") // fill the cell width .style("max-width", BASE_W + "px") // cap at your design width .style("margin", "0 auto") // center .style("font", "14px 'Work Sans', sans-serif") .style("color", "white"); const svg = d3 .create("svg") .attr("viewBox", [0, 0, BASE_W, BASE_H]) .attr("preserveAspectRatio", "xMidYMid meet") .style("width", "100%") // responsive width .style("height", "auto") // keep aspect .style("display", "block") // remove inline gaps .style("background", "#10172a") .style("border-radius", "12px") .style("box-shadow", "0 0 10px rgba(0,0,0,0.3)"); const width = BASE_W, height = BASE_H; const projection = d3 .geoEqualEarth() .scale(180) .translate([width / 2, height / 2]); const path = d3.geoPath(projection); // Ocean svg .append("path") .attr("d", path({ type: "Sphere" })) .attr("fill", "#bbe3f9") .attr("stroke", "black") .attr("transform", `translate(0,-45)`) .attr("stroke-width", 1); // LEFT = With climate change const left = svg.append("g").attr("class", "map-left"); left .selectAll("path") .data(real_world.features) .join("path") .attr("d", path) .attr("fill", (d) => d.properties.name === "Antarctica" ? colors[0] : color(+d.properties.risky_days) ) // EDIT if your field differs .attr("stroke", "#333") .attr("transform", `translate(0,-45)`) .attr("stroke-width", 0.3); // RIGHT = Without climate change (clipped) const right = svg.append("g").attr("class", "map-right"); right .selectAll("path") .data(real_world.features) .join("path") .attr("d", path) .attr("fill", (d) => d.properties.name === "Antarctica" ? colors[0] : color(+d.properties.risky_days - +d.properties.days_added) ) // EDIT if fields differ .attr("transform", `translate(0,-45)`) .attr("stroke", "#333") .attr("stroke-width", 0.3); // Slider clip const clip = svg .append("clipPath") .attr("id", "clip") .append("rect") .attr("x", width / 2) .attr("y", 0) .attr("width", width / 2) .attr("height", height); right.attr("clip-path", "url(#clip)"); // Labels const leftLabel = svg .append("text") .attr("x", 15) .attr("y", 25) .attr("fill", "white") .attr("font-size", 14) .attr("font-weight", "bold") .text("With climate change →"); const rightLabel = svg .append("text") .attr("x", width - 15) .attr("y", 25) .attr("text-anchor", "end") .attr("fill", "white") .attr("font-size", 14) .attr("font-weight", "bold") .text("← Without climate change"); // Handle const handle = svg.append("g").attr("class", "handle"); handle .append("line") .attr("x1", width / 2) .attr("x2", width / 2) .attr("y1", 0) .attr("y2", height) .attr("stroke", "#fff") .style("opacity", 0.7) .attr("stroke-width", 2); handle .append("circle") .attr("cx", width / 2) .attr("cy", height / 2) .attr("r", 20) .attr("fill", "#fff") .style("opacity", 0.7) .style("cursor", "ew-resize"); let handleX = width / 2; function update(x) { handleX = x; clip.attr("x", x).attr("width", width - x); handle.select("line").attr("x1", x).attr("x2", x); handle.select("circle").attr("cx", x); const pct = (x / width) * 100; leftLabel.style("opacity", pct < 30 ? 0 : 1); rightLabel.style("opacity", pct > 70 ? 0 : 1); } function toViewBox([px, py]) { const r = svg.node().getBoundingClientRect(); return [px * (width / r.width), py * (height / r.height)]; } svg.call( d3.drag().on("drag", (event) => { const x = Math.max(0, Math.min(width, event.x)); update(x); }) ); update(width / 2); // TOOLTIP const tooltip = container .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("background", "rgba(0,0,0,0.85)") .style("color", "#fff") .style("padding", "8px 10px") .style("border-radius", "8px") .style("font", "13px 'Work Sans', sans-serif") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.3)") .style("opacity", 0) .style("z-index", 2); svg.call( d3.drag().on("drag", (event) => { const [vx] = toViewBox(d3.pointer(event, svg.node())); update(Math.max(0, Math.min(width, vx))); }) ); function showTip(event, d) { const [px, py] = d3.pointer(event, svg.node()); // CSS pixels for placing the HTML tip const [vx] = toViewBox([px, py]); // viewBox units for logic const onLeftSide = vx < handleX; const withDays = +d.properties.risky_days; const withoutDays = +d.properties.risky_days - +d.properties.days_added; const value = onLeftSide ? withDays : withoutDays; const side = onLeftSide ? "With climate change" : "Without climate change"; const dayy = value === 1 ? "day" : "days"; const name = d.properties.name === "Antarctica" ? "Antarctica" : d.properties.country; const ttip = d.properties.name === "Antarctica" ? "No data" : `Risky heat days: ${value} ${dayy} (${side.toLowerCase()})`; tooltip .style("opacity", 1) .html( `

${name}

${ttip}

` ) .style("left", `${px + 14}px`) .style("top", `${py + 14}px`); } function hideTip() { tooltip.style("opacity", 0); } // attach once for (const layer of [left, right]) { layer .selectAll("path") .on("mousemove", showTip) .on("mouseenter", showTip) .on("mouseleave", hideTip); } for (const layer of [left, right]) { layer .selectAll("path") .on("mousemove", showTip) .on("mouseenter", showTip) .on("mouseleave", hideTip); } for (const layer of [left, right]) { layer .selectAll("path") .on("mousemove", showTip) .on("mouseenter", showTip) .on("mouseleave", hideTip); } // Append SVG first so overlays stack above container.append(() => svg.node()); // captions (SVG text so they scale) svg .append("text") .attr("x", 25) .attr("y", height - 33) .attr("fill", "#fff") .attr("font-size", 11) .text( "Total number of risky heat days (per capita average) from June–August 2025 in a world with and without climate change." ); svg .append("text") .attr("x", 25) .attr("y", height - 18) .attr("fill", "#fff") .attr("font-size", 11) .text( "Risky heat days have temperatures hotter than 90% of those observed in a local area over the 1991-2020." ); // legend (foreignObject; enlarge tick numbers + title) if (typeof legendEl !== "undefined" && legendEl) { const L_W = 520, L_H = 50; const node = legendEl.cloneNode(true); d3.select(node) .selectAll("text, .tick text, .legend-tick text") .style("font-size", 14); // ← make the numbers larger d3.select(node) .selectAll(".title, .legend-title") .style("font-size",18) .style("font-weight", 600); svg.append("foreignObject") .attr("x", (width - L_W) / 2 + 60) // your current offset .attr("y", height - 110) .attr("width", L_W) .attr("height", L_H) .append(() => node); } // logo (foreignObject so it scales) if (typeof logoEl !== "undefined" && logoEl) { const LOGO_W = 239, LOGO_H = 30; // tune to your logo aspect svg .append("foreignObject") .attr("x", width - LOGO_W - 16) .attr("y", height - LOGO_H - 16) .attr("width", LOGO_W) .attr("height", LOGO_H) .append(() => logoEl.cloneNode(true)) .style("width", "100%") .style("height", "100%") .style("display", "block"); } return container.node(); }33:T144b,function Legend(color, { textColor, title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues} = {}) { function ramp(color, n = 256) { const canvas = document.createElement("canvas"); canvas.width = n; canvas.height = 1; const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); } return canvas; } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("color", "white") .style('font-size', '14px') .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", "white"); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", 200) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "white") .attr("class", "legendTitle") .style('font-size', '14px') .style("text-anchor", 'middle') .text(title)); return svg.node(); }34:[{"id":"02366f9ed2b264cd0cdca0c99152913cf03d51e2e3119b65bb31fbc671c8af0c0277957c8ffd38ff12e4a9e8107aabac1b26b217a20ac160bf4b5c7f09d57a32","href":"https://static.observableusercontent.com/files/02366f9ed2b264cd0cdca0c99152913cf03d51e2e3119b65bb31fbc671c8af0c0277957c8ffd38ff12e4a9e8107aabac1b26b217a20ac160bf4b5c7f09d57a32","name":"obs-data.csv","type":"text/csv","lastModified":1757540429344.269,"size":8156},{"id":"7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","href":"https://static.observableusercontent.com/files/7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","name":"countries-110m.json","type":"application/json","lastModified":1757540429611.164,"size":107761},{"id":"d68f6b6e76aa40005381c4c2d461e08d789f513138adb3fd6f6beeacbc0303200bd0c25d427c6a03a795017aec3741294b4553f4d2f7d915b7d7454df5094074","href":"https://static.observableusercontent.com/files/d68f6b6e76aa40005381c4c2d461e08d789f513138adb3fd6f6beeacbc0303200bd0c25d427c6a03a795017aec3741294b4553f4d2f7d915b7d7454df5094074","name":"global-map.geojson","type":"application/geo+json","lastModified":1757610941525.383,"size":582685},{"id":"5bc87605bef88611d7eae41eb4ab26e15b07426798ad6d0bcbe882d4ee5381544646448afb053396411eb02809b5b79ed89ead6ece06194ee61b4ebaaea1238d","href":"https://static.observableusercontent.com/files/5bc87605bef88611d7eae41eb4ab26e15b07426798ad6d0bcbe882d4ee5381544646448afb053396411eb02809b5b79ed89ead6ece06194ee61b4ebaaea1238d","name":"cf-data.csv","type":"text/csv","lastModified":1757540429348.542,"size":8086},{"id":"d0f474d3e85d20fd6388ceedade0ebbaec5fd35e12b597e7ddff298e80364507b1643953643f263e5f5618f128e9144ba4cfa78ca73c524be15eb8d4b2f9e402","href":"https://static.observableusercontent.com/files/d0f474d3e85d20fd6388ceedade0ebbaec5fd35e12b597e7ddff298e80364507b1643953643f263e5f5618f128e9144ba4cfa78ca73c524be15eb8d4b2f9e402","name":"logo.png","type":"image/png","lastModified":1757627308582.663,"size":46532}] 30:{"id":"70aeae4ab52111fb","slug":"a-world-with-and-without-climate-change","title":"Risky heat added by climate change, June-August 2025","thumbnail":"45b983ebc42609bfef73dbb42955dd7aee8d0e4ab646ccec4b250dc956ecfddb","access_level":"public","create_time":"$D2025-09-10T21:39:38.537Z","update_time":"$D2026-03-03T00:51:41.893Z","view_time":null,"first_public_time":"$D2025-09-11T23:10:19.095Z","fork":false,"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":967,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"43d98796353ee1e2","login":"ktrudeau","name":"Kaitlyn Trudeau","avatar_url":"https://avatars-next.observableusercontent.com/3650447af2e2411fcfe3aa899ed520cce0fe01a62f5b78ec6617c32d64cdf326","tier":null}],"members":[{"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":true,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Risky heat added by climate change, June-August 2025","cells":[{"id":0,"value":"

Risky heat added by climate change, June-August 2025

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":902,"value":"Use the slider below to explore how human-caused climate change influenced the number of risky heat days during a three-month period (June-August 2025) for people worldwide. Slide to the left to see how many risky heat days would be experienced in a world without climate change and the to the right to see how many risky heat days were experienced in our current world with climate change. Risky heat days are days with temperatures hotter than 90% of those observed in a local area over the 1991-2020 period. More about this data and the methodology can be found in Climate Central's report People Exposed to Climate Change: June-August 2025.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":88,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":959,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":865,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":918,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":925,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":938,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":941,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":962,"value":"PAGE CODE BELOW","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":816,"value":"real_world = {\n const fc = AA; // {type:\"FeatureCollection\", features:[...]}\n return {\n ...world_map,\n features: [...world_map.features, ...fc]\n };\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"breaks = [1, 5, 10, 20, 30, 40, 60]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"with_data = FileAttachment(\"obs-data.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"colors = [\n \"#c7c8ca\",\n \"#fef6f0\",\n \"#fed2c1\",\n \"#fda284\",\n \"#fc8969\",\n \"#f54331\",\n \"#b91419\",\n \"#6b0011\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"without_data = FileAttachment(\"cf-data.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"cc_longlogo = FileAttachment(\"logo.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"world_map = FileAttachment(\"global-map.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"swipePct = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"function color(x) {\n if (x < 1) {\n return colors[0] //\"#c7c8ca\";\n } else if (x >= 1 & x < 5) {\n return colors[1] //\"#fef6f0\";\n } else if (x >= 5 & x < 10) {\n return colors[2] //\"#04223e\";\n } else if (x >= 10 & x < 20) {\n return colors[3] //\"#fda284\";\n } else if (x >= 20 & x < 30) {\n return colors[4] //\"#fc8968\";\n } else if (x >= 30 & x < 40) {\n return colors[5] //\"#f54331\";\n } else if (x >= 40 & x < 60) {\n return colors[6] // \"#b91419\";\n } else {\n return colors[7] //\"#6b0011\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"// Preload your logo file in Files and name it \"horizontal-logo.png\"\nlogoEl = FileAttachment(\"logo.png\").image({width:220, height: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":360,"value":"legendEl = Legend( d3.scaleThreshold(breaks, colors),\n {\n title:\"Risky heat days, June-August 2025\",\n fontSize: 15,\n width: 400,\n height: 50\n }\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":376,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":669,"value":"world = FileAttachment(\"countries-110m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":673,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":675,"value":"AA = countries.features.filter((d) => d.properties.name === \"Antarctica\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"