31:Tb0f,bars = () => { // Scales const x = d3.scaleLinear().domain([0, d3.sum(barsData, d => d.days)]); const color = threshold => palette[thresholds.indexOf(threshold)]; const colorText = threshold => paletteText[thresholds.indexOf(threshold)]; // Scaffold const wrapper = d3.create("div").attr("class", "bars"); const svg = wrapper.append("svg").style("display", "table").style("margin", "0 auto") const g = svg.append("g"); // Marks const rect = g.selectAll("rect") .data(barsData) .join("rect") .attr("fill", d => color(d.threshold)) .attr("stroke", d => colorText(d.threshold)); const label = g.selectAll(".label") .data(barsData) .join("text") .attr("class", "label") .attr("y", d => -6 - ((d.word_count - 1) * 16)) .html(d => d.html); label.selectAll("tspan") .attr("x", 0) .attr("dy", (_, i) => i * 16); const value = g.selectAll(".value") .data(barsData) .join("text") .attr("class", "value") .attr("fill", d => colorText(d.threshold)) .attr("x", 4); return Object.assign(wrapper.node(), { resize(width) { const margin = { left: 1, right: 1, top: 40, bottom: 1 }; const chartwidth = Math.min(width, 400) - margin.left - margin.right; const chartheight = 32; // Resize: Scales x.range([0, chartwidth]); // Resize: Data const first = barsData.findIndex(d => x(d.days) > 80); barsData.forEach((d, i) => { d.first = i === first; return d; }); wrapper.style("width", `${Math.min(640, width)}px`) svg .attr("width", chartwidth + margin.left + margin.right) .attr("height", chartheight + margin.top + margin.bottom); g .attr("transform", `translate(${[margin.left, margin.top]})`); // Resize: Marks rect .attr("height", chartheight) .attr("width", d => x(d.days)) .attr("x", (_, i) => x(d3.sum(barsData.slice(0, i), d0 => d0.days))); label .attr("opacity", d => x(d.days) > maxWidth ? 1 : 0) .attr("transform", (d, i) => { if (x(d.days) > maxWidth) { return `translate(${x(d3.sum(barsData.slice(0, i), d0 => d0.days))})`; } else { return "translate(0)"; } }); value .attr("opacity", d => x(d.days) > maxWidth ? 1 : 0) .attr("transform", (d, i) => { if (x(d.days) > maxWidth) { return `translate(${x(d3.sum(barsData.slice(0, i), d0 => d0.days))})`; } else { return "translate(0)" } }) .attr("y", chartheight / 2 + 6) .text(d => `${d.days}${d.first ? " days" : ""}`); } }) }32:Tb8a,chart = () => { // Scaffold const svg = d3.create("svg"); 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"); const yaxisLabel = g.selectAll(".y-axis-label") .data(thresholdLabels) .join("g") .attr("class", "y-axis-label"); // Marks const day = g.selectAll(".day") .data(daily) .join("circle") .attr("class", "day") .attr("fill", d => color(d.heat_index)) .attr("stroke", d => d3.color(color(d.heat_index)).darker(0.8)); const thresholdLabel = g.selectAll(".threshold-label") .data(d3.zip(thresholdValues.slice(1, 5), ["Caution", "Extreme caution", "Danger", "Extreme danger"])) .join("text") .attr("class", "threshold-label") .attr("dy", "0.32em") .attr("fill", d => d[0] >= 103 ? color(d[0]) : color(d[0], true)) .attr("opacity", d => d[0] >= yDomain.yMin && d[0] <= yDomain.yMax ? 1 : 0) .attr("x", 4) .attr("y", -7) .text(d => d[1]); return Object.assign(svg.node(), { resize(ww){ // Resize: Dimensions const r = ww <= 400 ? 3 : 4; const margin = { left: 40, right: r + 1, top: 14, bottom: 26}; const basewidth = Math.min(ww, 640); const width = basewidth - margin.left - margin.right; const height = basewidth * 9 / 16 - margin.top - margin.bottom; // Resize: Scales x.range([0, width]); y.range([height, 0]); // 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 .attr("transform", `translate(0, ${height})`) .call(xaxisGenerator); yaxisGenerator.tickSize(width + 10) const ytickOffset = 13; yaxis .attr("transform", `translate(${width})`) .call(yaxisGenerator); const tick = yaxis.selectAll(".tick"); tick.select("line") .style("stroke", d => { return thresholdValues.includes(d) ? d < 103 ? color(d, d <= 103) : color(d) : "#e9e9e9" }) .attr("x2", -width - margin.left) tick.select("text") .style("fill", d => { return thresholdValues.includes(d) ? d < 103 ? color(d, d <= 103) : color(d) : "#666666" }) .attr("x", -width - margin.left) .attr("y", -8); yaxisLabel .attr("transform", d => `translate(${[-margin.left, d.y]})`) thresholdLabel .attr("transform", d => `translate(0, ${y(d[0])})`); // Resize: Marks day .attr("r", r) .attr("cx", d => x(d.datetime)) .attr("cy", d => y(d.heat_index)); } }) }33:T625,yDomain = { const yExtent = d3.extent(data.daily, d => d.heat_index); const yRange = yExtent[1] - yExtent[0]; const yInterval = yRange < 20 ? 10 : 20; let valueIndexLow = thresholdValues.findIndex(v => v >= yExtent[0]) let valueLow = thresholdValues[valueIndexLow - 1] let valueIndexHigh = thresholdValues.findLastIndex(v => v <= yExtent[1]) let valueHigh = thresholdValues[valueIndexHigh + 1]; const valuesFiltered = thresholdValues.filter(n => n >= valueLow && n <= valueHigh); const valuesFilteredMax = valuesFiltered[valuesFiltered.length - 1]; let tickValues = []; if (!valuesFiltered.length) { tickValues.push(...d3.range( Math.floor(yExtent[0] / yInterval) * yInterval, yExtent[1] + yInterval, yInterval )) } else if (valuesFiltered[0] < thresholdValues[1]) { const R = d3.range( Math.floor(yExtent[0] / yInterval) * yInterval, thresholdValues[1], yInterval ); tickValues.push(...R); } if (valuesFilteredMax > thresholdValues[3]) { tickValues.push(...valuesFiltered.filter(v => v <= thresholdValues[3])); if (yExtent[1] < 110) { tickValues.push(110) } else if (yExtent[1] < 120) { tickValues.push(120) } else { tickValues.push(125) } } else { tickValues.push(...valuesFiltered) } tickValues = removeIfLessThanPrevious(tickValues); return { yInterval, yMin: tickValues[0], yMax: tickValues[tickValues.length - 1], tickValues }; }34:[{"id":"214b701661fa3f067e140cf825c0eaad44a7892b0c67fe3b86ce1d5ecc2e5883f9a0cfbc819345bda4db673c170cb8ebb72c8192a892c43bca8cee822b5b231f","href":"https://static.observableusercontent.com/files/214b701661fa3f067e140cf825c0eaad44a7892b0c67fe3b86ce1d5ecc2e5883f9a0cfbc819345bda4db673c170cb8ebb72c8192a892c43bca8cee822b5b231f","name":"ghs250.json","type":"application/json","lastModified":1717688761009.519,"size":24494},{"id":"23a52cdf9705cfb9d93e1555a819b1ae70992b19112b408d6a8adea498ff7fbf0e6ca082bc81c3416ecd7d80fe222e9a5207b266c4752f972bb0961410098dcb","href":"https://static.observableusercontent.com/files/23a52cdf9705cfb9d93e1555a819b1ae70992b19112b408d6a8adea498ff7fbf0e6ca082bc81c3416ecd7d80fe222e9a5207b266c4752f972bb0961410098dcb","name":"ghs626.json","type":"application/json","lastModified":1717688765764.082,"size":25315},{"id":"ee54c84dd25471031a8e80d033ebdbf7b819a3ed0c62731ae8f6418e24d09fa95ac4be98266f1b9597dd0873a69a04346637984e5c4b08ff69a44dbe94008793","href":"https://static.observableusercontent.com/files/ee54c84dd25471031a8e80d033ebdbf7b819a3ed0c62731ae8f6418e24d09fa95ac4be98266f1b9597dd0873a69a04346637984e5c4b08ff69a44dbe94008793","name":"ghs1910.json","type":"application/json","lastModified":1717688771996.976,"size":25271},{"id":"0b283193fac94487fb1c65831bd06f06f2f3175ca57ac4bf57657cfe0de4c8426438c09b68604742b998adecb402f170cdfb11a4d0b3e2a5d2ed801ebd23b7e8","href":"https://static.observableusercontent.com/files/0b283193fac94487fb1c65831bd06f06f2f3175ca57ac4bf57657cfe0de4c8426438c09b68604742b998adecb402f170cdfb11a4d0b3e2a5d2ed801ebd23b7e8","name":"ghs11498.json","type":"application/json","lastModified":1717688791510.93,"size":25165},{"id":"efbd66bee7239b9bf82fc574a9b2317417eef924275e4020472b0cbbcf89bcb1838b559e050164f148ebb0cc14e96b34abde853697658496449632c303e88b75","href":"https://static.observableusercontent.com/files/efbd66bee7239b9bf82fc574a9b2317417eef924275e4020472b0cbbcf89bcb1838b559e050164f148ebb0cc14e96b34abde853697658496449632c303e88b75","name":"ghs2125.json","type":"application/json","lastModified":1717688775324.357,"size":25157},{"id":"fa6f4c328a18ba39ff489d8204fb1f424244d4a414ec04d225e6c3a2208cfed4781195508252db588bebdf9439433b44145c13c3c8dfeebb429ac27212a0366e","href":"https://static.observableusercontent.com/files/fa6f4c328a18ba39ff489d8204fb1f424244d4a414ec04d225e6c3a2208cfed4781195508252db588bebdf9439433b44145c13c3c8dfeebb429ac27212a0366e","name":"ghs11800.json","type":"application/json","lastModified":1717688796825.155,"size":25311},{"id":"381a77f663c7b854d8f706de431827c9e587bb2b0a08415084c79f440e47a2d0344968f296982caa120deb20a6222bf30fa46d797bca4a5c1ff0b7b4c9b597bb","href":"https://static.observableusercontent.com/files/381a77f663c7b854d8f706de431827c9e587bb2b0a08415084c79f440e47a2d0344968f296982caa120deb20a6222bf30fa46d797bca4a5c1ff0b7b4c9b597bb","name":"ghs9872.json","type":"application/json","lastModified":1717688782300.993,"size":24882},{"id":"b64d322e79f8b7fa913f5389dda4135ea680f0dd03207b5073ff8f45b3f543ce861d67e257df0a6a546e006dfb0204bdfea37e7811d753e82e5e6dd47138e33c","href":"https://static.observableusercontent.com/files/b64d322e79f8b7fa913f5389dda4135ea680f0dd03207b5073ff8f45b3f543ce861d67e257df0a6a546e006dfb0204bdfea37e7811d753e82e5e6dd47138e33c","name":"ghs6845.json","type":"application/json","lastModified":1717688778889.879,"size":25183},{"id":"13965481a76c236ae80df7a70968739b0720012dc9abae276f04814ce15e264bd727193b8be2af055fe8864af1dde279424cc244e669bf9d4da308739add8c96","href":"https://static.observableusercontent.com/files/13965481a76c236ae80df7a70968739b0720012dc9abae276f04814ce15e264bd727193b8be2af055fe8864af1dde279424cc244e669bf9d4da308739add8c96","name":"ghs10715.json","type":"application/json","lastModified":1717688786698.437,"size":25293}] 2f:{"title":"Daily heat index in select global cities in 2024","cells":[{"id":0,"value":"# Daily heat index in select global cities in 2024","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"This notebook contains the data and code to produce a simpler version of the lookup table seen in [“More than 1.5 billion people have faced dangerous heat this year”](https://www.washingtonpost.com/), published in The Washington Post on June 7, 2024.","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"The heat index accounts for temperature and humidity to better capture the [threats heat poses to human health](https://www.washingtonpost.com/world/interactive/2021/climate-change-humidity/) than temperature alone. Exposed to a heat index of 103 degrees, a healthy person will probably suffer heat cramps and heat exhaustion, and prolonged exposure can cause heat stroke, [according to the National Weather Service](https://www.weather.gov/ama/heatindex). Much lower heat indexes have proved deadly for vulnerable people, such as the elderly and those who take medications that inhibit sweating.","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"viewof selected = Inputs.select(cities, { format: d => d.label, label: \"Select a city:\", value: cities[1] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"

${data.label}

${formatPop(data.pop)} people

","pinned":false,"hidden":false,"mode":"html"},{"id":391,"value":"displayBars = bars()","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"

Daily maximum heat index

","pinned":false,"hidden":false,"mode":"html"},{"id":63,"value":"display = chart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"toc({ selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"## Graphics","pinned":false,"hidden":false,"mode":"md"},{"id":375,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"display.resize(width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"displayBars.resize(width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"css = `\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 shape-rendering: crispEdges;\n}\n.axis.x-axis .tick line {\n stroke: #aaaaaa;\n}\n.axis.y-axis .tick line {\n stroke: #d5d5d5;\n}\n.axis.y-axis .tick text {\n text-anchor: start;\n}\n.y-axis-label {\n font-family: ${franklinLight};\n}\n.y-axis-label .threshold {\n font-size: 16px;\n font-weight: bold;\n}\n.y-axis-label .days {\n font-size: 14px;\n}\n.threshold-label {\n font-family: ${franklinLight};\n font-size: 14px;\n font-weight: bold;\n}\n.bars text {\n font-family: ${franklinLight};\n}\n.bars text.value {\n font-weight: bold;\n}\n.bars rect {\n shape-rendering: crispEdges;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"## Bars","pinned":false,"hidden":false,"mode":"md"},{"id":387,"value":"maxWidth = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"barsData = thresholds.map(threshold => {\n let html;\n const words = `${threshold[0].toUpperCase()}${threshold.slice(1)}`.split(\" \");\n if (words.length === 1) html = words.join(\" \");\n else {\n html = `${words.join(\"\")}`\n }\n const days = data.thresholds[threshold];\n return {threshold, html, word_count: words.length, days };\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"## Generators","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"months = [\"Jan.\", \"Feb.\", \"March\", \"April\", \"May\", \"June\", \"July\", \"Aug.\", \"Sept.\", \"Oct.\", \"Nov.\", \"Dec.\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"xaxisGenerator = d3.axisBottom(x)\n .tickFormat(d => months[d.getUTCMonth()])\n .tickSize(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"yaxisGenerator = d3.axisLeft(y)\n .tickFormat((d, i, e) => `${d}°F`)\n .tickValues(yDomain.tickValues)","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"## Color","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"palette = [ \"#fff\", \"#e9e9e9\", \"#d5d5d5\", \"#cc3d00\", \"#6f203d\" ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"paletteText = [ \"#808080\", \"#666666\", \"#494949\", \"#330f00\", \"#280b16\" ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"temps = [80, 90, 103, 125]","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"color = (heat_index, text = false) => {\n // https://www.weather.gov/ama/heatindex\n if (heat_index >= 80 && heat_index < 90) {\n return text ? paletteText[1] : palette[1];\n }\n else if (heat_index >= 90 && heat_index < 103) {\n return text ? paletteText[2] : palette[2];\n }\n else if (heat_index >= 103 && heat_index < 125) {\n return text ? paletteText[3] : palette[3];\n }\n else if (heat_index >= 125) {\n return text ? paletteText[4] : palette[4];\n }\n else {\n return text ? paletteText[0] : palette[0];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"## Scales","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"x = d3.scaleTime().domain(d3.extent(daily, d => d.datetime))","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"yExtent = d3.extent(daily, d => d.heat_index)","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"yRange = yExtent[1] - yExtent[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"yInterval = yRange > 60 ? 20 : 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"yMin = Math.floor(yExtent[0] / yInterval) * yInterval","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"yMax = Math.ceil(yExtent[1] / yInterval) * yInterval","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"y = d3.scaleLinear().domain([yDomain.yMin, yDomain.yMax])","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"threshold = \"danger\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"days = {\n let days = 0;\n T.forEach((t) => {\n days += data.thresholds[t];\n });\n return days;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"T = thresholds.slice(thresholds.findIndex(d => d === threshold))","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"thresholdLabels = thresholds\n .map((threshold, i, e) => {\n const thresholdI = thresholds.indexOf(threshold);\n const minTemp = thresholdValues[thresholdI];\n const maxTemp = thresholdValues[thresholdI + 1]\n \n return {\n threshold,\n color: palette[i],\n minTemp,\n maxTemp\n }\n })\n .filter(d => d.minTemp >= yMin && d.minTemp <= yMax)\n .map(d => {\n const max = Math.min(d.maxTemp, yMax)\n const min = Math.max(d.minTemp, yMin);\n d.y = 0.5 * (y(min) + y(max));\n d.days = data.thresholds[d.threshold];\n return d;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"thresholdValues = [0, 80, 90, 103, 125, Infinity]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"thresholds = Object.keys(data.thresholds)","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"daily = data.daily.map(d => (d.datetime = new Date(d.date), d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"// data = FileAttachment(\"ghs855@1.json\").json()\ndata = selected","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"cities = [\n await FileAttachment(\"ghs250.json\").json(),\n await FileAttachment(\"ghs626.json\").json(),\n await FileAttachment(\"ghs1910.json\").json(),\n await FileAttachment(\"ghs2125.json\").json(),\n await FileAttachment(\"ghs6845.json\").json(),\n await FileAttachment(\"ghs9872.json\").json(),\n await FileAttachment(\"ghs10715.json\").json(),\n await FileAttachment(\"ghs11498.json\").json(),\n await FileAttachment(\"ghs11800.json\").json()\n]\n.sort((a, b) => d3.ascending(a.label, b.label))","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":371,"value":"formatPop = pop => {\n if (pop > 1e6) return `${+(pop / 1e6).toFixed(1)} million`;\n else return d3.format(\",\")(pop);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"function removeIfLessThanPrevious(arr) {\n if (!Array.isArray(arr) || arr.length === 0) {\n return [];\n }\n\n const result = [arr[0]]; // Initialize the result array with the first element of the input array\n\n for (let i = 1; i < arr.length; i++) {\n if (arr[i] >= arr[i - 1]) {\n result.push(arr[i]);\n }\n }\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"import { toc } from \"@climatelab/toc@45\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}