2c:null 2d:["$","title",null,{"children":"Urban Heat and Schools in Detroit | Climate Central | Observable"}] 32:T589,embedMap = htl.html`

${viewof logo}

${viewof legend}

${viewof detroit}

The map above highlights Climate Central's Urban Heat Hot Spots data with public elementary and secondary schools in Detroit (black circles) layered on top. Public school data was obtained from the National Center of Education Statistics' (NCES) Education Demographic and Geographic Estimates program.

`33:T710,viewof detroit = { let mycontainer = html`

`; yield mycontainer; const map = new maplibregl.Map({ interactive: true, container: mycontainer, center: [-83.08, 42.358], zoom: 10.5, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json" }); const layers = new MapboxOverlay({ interleaved:false, depthTest: false, layers: [ new GeoJsonLayer({ id: `blocks`, data: uhi, filled: true, getFillColor: d => getColor(d.properties.indx__F), opacity: 0.4, stroked: true, getLineColor: [0,0,0], getLineWidth: 1, lineWidthUnits: 'pixels', pickable: true, onHover: updateTooltip, }), new ScatterplotLayer({ id: `city-schools`, data: schools.features, getPosition: (d) => [d.properties.LON, d.properties.LAT], getRadius: d => 150, getFillColor: [0,0,0], stroked: true, getLineColor: [255,255,255], getLineWidth: 0.5, lineWidthUnits: 'pixels', pickable:true, onHover: updateSchool, })], }); map.addControl(layers); map.addControl(new maplibregl.NavigationControl()); // clean up if this code re-runs invalidation.then(() => { layers.finalize(); const container = mycontainer; container.innerHTML = ""; }); }34:T492,getColor = function(d) { function hexToRgb(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? [ parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16) ] : null; }; if (d < 1) { return hexToRgb(colors[0]); } else if (d >= 1 & d < 3) { return hexToRgb(colors[1]); } else if (d >= 3 & d < 5) { return hexToRgb(colors[2]); } else if (d >= 5 & d < 5.5) { return hexToRgb(colors[3]); } else if (d >= 5.5 & d < 6) { return hexToRgb(colors[4]); } else if (d >= 6 & d < 6.5) { return hexToRgb(colors[5]); } else if (d >= 6.5 & d < 7) { return hexToRgb(colors[6]); } else if (d >= 7 & d < 7.5) { return hexToRgb(colors[7]); } else if (d >= 7.5 & d < 8) { return hexToRgb(colors[8]); } else if (d >= 8 & d < 8.5) { return hexToRgb(colors[9]); } else if (d >= 8.5 & d < 9) { return hexToRgb(colors[10]); }else if (d >= 9 & d < 9.5) { return hexToRgb(colors[11]); }else if (d >= 9.5 & d < 10) { return hexToRgb(colors[12]); }else if (d >=10) { return hexToRgb(colors[13]); } else { return [210,210,210]; } };35:[{"id":"55a2751b84ea12c44f265268783a2724a29e49ec12ecd3f547e0c00059fdfed6e05d631aa89653c3df45dc6cd567f1c0a5ab2fa82eb9618c790d4dcfa4524cea","href":"https://static.observableusercontent.com/files/55a2751b84ea12c44f265268783a2724a29e49ec12ecd3f547e0c00059fdfed6e05d631aa89653c3df45dc6cd567f1c0a5ab2fa82eb9618c790d4dcfa4524cea","name":"detroit_uhi.geojson","type":"application/geo+json","lastModified":1724952939902.219,"size":279353},{"id":"902b8da67489ee61dab22d29b5fd60bf535eb5558a7dc7b3745edfbfcdcf9e89d85567cd02909cedee56d395dadd18b2830163f2edfabac303d21665e40d454c","href":"https://static.observableusercontent.com/files/902b8da67489ee61dab22d29b5fd60bf535eb5558a7dc7b3745edfbfcdcf9e89d85567cd02909cedee56d395dadd18b2830163f2edfabac303d21665e40d454c","name":"detroit_public_schools.geojson","type":"application/geo+json","lastModified":1724960264718.029,"size":167403},{"id":"5a9fadd5c85c0c14f9849886a66dbd03ed67662ead98114cbe633072026e41eec8c0d8ee22bd3c3b0bffb441bf8e8b1964c6861973c9dc3f5f160324feead694","href":"https://static.observableusercontent.com/files/5a9fadd5c85c0c14f9849886a66dbd03ed67662ead98114cbe633072026e41eec8c0d8ee22bd3c3b0bffb441bf8e8b1964c6861973c9dc3f5f160324feead694","name":"CC_LongLogo-2 (1).png","type":"image/png","lastModified":1724962376863.068,"size":199924},{"id":"808aa835b03724d2a9c8142036ec7c38a3894ccbadd33aa4d7fbdb5065795731248ccbbf1eccf649bde14628b0902717a1bb90572cf8449065dd4051cabc4492","href":"https://static.observableusercontent.com/files/808aa835b03724d2a9c8142036ec7c38a3894ccbadd33aa4d7fbdb5065795731248ccbbf1eccf649bde14628b0902717a1bb90572cf8449065dd4051cabc4492","name":"detroit_public_schools2.geojson","type":"application/geo+json","lastModified":1724984447312.336,"size":303},{"id":"fbf83abf759f895ce4c725e7ce19f0d866aee1073df95bf73e723dffb0f55db07b50c260d20e353ea15f288ad954980c05a1b145129bc7a5fc0202660f29db2a","href":"https://static.observableusercontent.com/files/fbf83abf759f895ce4c725e7ce19f0d866aee1073df95bf73e723dffb0f55db07b50c260d20e353ea15f288ad954980c05a1b145129bc7a5fc0202660f29db2a","name":"detroit_public_schools2@1.geojson","type":"application/geo+json","lastModified":1724984882104.688,"size":155549}] 30:{"id":"42b43ac17bfa1ba0","slug":"urban-heat-and-schools-in-detroit","title":"Urban Heat and Schools in Detroit","thumbnail":"a3a5ac167fa9069ab4dbd32c368485d15890b6e1e22a5579f20ef0238f75734f","access_level":"public","create_time":"$D2024-08-29T17:34:57.129Z","update_time":"$D2026-09-11T16:42:45.095Z","view_time":null,"first_public_time":"$D2024-10-22T20:53:18.296Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"1b16cfac8e47ddf9","login":"climatecentral","name":"Climate Central","avatar_url":"https://avatars-next.observableusercontent.com/b8d84fbc6265f9a7c731e62fc076af7c84c7be3a9be06e52da319786d6b129dd","tier":"pro_2024"},"version":959,"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"e8f8be89c7b5445e","slug":"urban-heat-islands","title":"Urban Heat Islands","owner":{"id":"1b16cfac8e47ddf9","login":"climatecentral","name":"Climate Central"}},"type":"notebook","body":{"titling":"auto","title":"Urban Heat and Schools in Detroit","cells":[{"id":0,"value":"# Urban Heat and Schools in Detroit","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"function titleCase(str) {\n str = str.toLowerCase().split(' ');\n for (var i = 0; i < str.length; i++) {\n str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1); \n }\n return str.join(' ');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"viewof legend = Legend(\n d3.scaleThreshold([`1°`, `3°`, `5°`, `5.5°`, `6°`, `6.5°`, `7°`, `7.5°`, `8°`, `8.5°`, `9°`, `9.5°`, `10°+`], colors),\n {\n title: \"Urban Heat Island Intensity (°F)\",\n tickSize: 0,\n paddingTop: 5,\n paddingBottom: 15,\n width: width\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"updateTooltip = function ({ object, x, y }) {\n const tooltip = document.querySelector(\".tooltip\");\n \n if (object) {\n tooltip.style.visibility = \"visible\";\n tooltip.style.left = `${x+1}px`;\n tooltip.style.top = `${y+1}px`;\n\n tooltip.innerText = \n `Block Group: ${object.properties.blockid}\n City: ${object.properties.city}\n UHI Index: ${object.properties.indx__F.toFixed(1)}°F\n `\n\n } else {\n tooltip.style.visibility = 'hidden';\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"updateSchool = function ({object, x, y}) {\n const tooltip = document.querySelector(\".tooltip\");\n\n if (object) {\n tooltip.style.visibility = \"visible\";\n tooltip.style.left = `${x+1}px`;\n tooltip.style.top = `${y+1}px`;\n tooltip.innerText = \n `School: ${object.properties.NAME}\n Address: ${titleCase(object.properties.STREET)}`\n\n } else {\n tooltip.style.visibility = 'hidden';\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"viewof logo = await(FileAttachment(\"CC_LongLogo-2 (1).png\")).image({width: 250, height:18})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"colors = ['#C0DB9E', '#FBFADB', '#FCEBA6', '#FFDC89', '#FDC97D', '#F8AC68', '#F68E54', '#F3704F', '#EE4836', '#E1222C', '#AF1F29', '#951F62', '#722267', '#54154F'];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"schools = FileAttachment(\"detroit_public_schools2@1.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"uhi = FileAttachment(\"detroit_uhi.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import maplibregl from \"npm:maplibre-gl@2.1.9\";","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import { Deck } from \"npm:@deck.gl/core\";","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"import {MapboxOverlay} from 'npm:@deck.gl/mapbox';","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"import {GeoJsonLayer, ScatterplotLayer } from 'npm:@deck.gl/layers';","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"import { Legend } from \"observable:@d3/color-legend\"","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"2"}} 31:"$30:body"