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

PUBLIC SCHOOLS EXPOSED TO URBAN HEAT IN NEWARK, NJ

Urban Heat Island Intensity (°F)

${viewof legend}

${viewof schools}

Urban heat island intensity (UHII) is an estimate of how much the built urban environment boosts local temperatures (°F). Data is shown at the census block level and was assessed by Climate Central. Public K-12 schools are represented as black dots on the map. Hover over a school for more information. Public school characteristics are from the 2022-23 school year and were obtained from the National Center for Education Statistics (NCES) Education Demographic and Geographic Estimates.

${viewof logo}

`33:T615,viewof schools = { const mycontainer = html`

`; const tooltip = mycontainer.querySelector(".tooltip"); yield mycontainer; const map = new maplibregl.Map({ interactive: true, container: mycontainer, center: [lon, lat + 0.0075], minZoom: 11.1, maxZoom: 12, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json" }); const deckOverlay = new deck.MapboxOverlay({ interleaved: false, depthTest: false, layers: [ new deck.GeoJsonLayer({ id: "blocks", data: newark_uhi.features, filled: true, getFillColor: (d) => getColor(d.properties.indx__F), opacity: 0.5, stroked: false, pickable: false }), new deck.ScatterplotLayer({ id: "city-schools", data: newark_schools, getPosition: (d) => [+d.properties.LONCOD, +d.properties.LATCOD], getRadius: 150, getFillColor: [0, 0, 0], //(d) => getColor(+d.properties.indx__F), pickable: true, onHover: (info) => updateTooltip(info, tooltip) // <-- pass the local tooltip }) ] }); map.addControl(deckOverlay); map.addControl(new maplibregl.NavigationControl()); invalidation.then(() => deckOverlay.finalize()); }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:T12a6,function Legend( color, { textColor, title, tickSize = 6, width = 320, height = 40 + tickSize, marginTop = 5, 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("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) .attr("fill", "white") .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", 160) .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(); }36:[{"id":"d0f474d3e85d20fd6388ceedade0ebbaec5fd35e12b597e7ddff298e80364507b1643953643f263e5f5618f128e9144ba4cfa78ca73c524be15eb8d4b2f9e402","href":"https://static.observableusercontent.com/files/d0f474d3e85d20fd6388ceedade0ebbaec5fd35e12b597e7ddff298e80364507b1643953643f263e5f5618f128e9144ba4cfa78ca73c524be15eb8d4b2f9e402","name":"2024ClimateCentralLogo_WhiteHorizontal.png","type":"image/png","lastModified":1759334510616.616,"size":46532},{"id":"b3b81b58de3bf719544076f0c0b7ddf07bf0fd9b738224b6f091764de20573707d97ae6b60b2a43ba3d657e16633666b6c35374b0ace56b67558fe3a9a169f9c","href":"https://static.observableusercontent.com/files/b3b81b58de3bf719544076f0c0b7ddf07bf0fd9b738224b6f091764de20573707d97ae6b60b2a43ba3d657e16633666b6c35374b0ace56b67558fe3a9a169f9c","name":"public_schools.geojson","type":"application/geo+json","lastModified":1759334510616.616,"size":10675196},{"id":"4bfe308356c78910659b729aa403f6cbfc23ff458d90da766cd9e28ced9e386b9abed4d22869f4ff6e69e5f45ff17ea5e4c3833dc427dc7010645154faf72391","href":"https://static.observableusercontent.com/files/4bfe308356c78910659b729aa403f6cbfc23ff458d90da766cd9e28ced9e386b9abed4d22869f4ff6e69e5f45ff17ea5e4c3833dc427dc7010645154faf72391","name":"Newark_UHI.geojson","type":"application/geo+json","lastModified":1759334694428.358,"size":105951},{"id":"49d9cc736d90acb3c768745bec6b35762311b7731bd062090ed7220a439bfe1359c1809ce3626d212c441b55556b683717413c2831ef21142d566428dcc980e7","href":"https://static.observableusercontent.com/files/49d9cc736d90acb3c768745bec6b35762311b7731bd062090ed7220a439bfe1359c1809ce3626d212c441b55556b683717413c2831ef21142d566428dcc980e7","name":"City_list.csv","type":"text/csv","lastModified":1759334510616.616,"size":4580}] 30:{"id":"ee222d14a5646840","slug":"public-schools-and-urban-heat-newark-nj","title":"Urban Heat and Schools in Newark","thumbnail":"f9cc8ad59f12bd05265d17b6e0aa8e7b228db23981be24bb26aec457d32585d4","access_level":"public","create_time":"$D2025-10-01T16:01:50.616Z","update_time":"$D2025-10-03T18:11:52.667Z","view_time":null,"first_public_time":"$D2025-10-03T18:10:49.104Z","fork":true,"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":1601,"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":0,"collection":{"id":"e8f8be89c7b5445e","slug":"urban-heat-islands","title":"Urban Heat Islands","owner":{"id":"1b16cfac8e47ddf9","login":"climatecentral","name":"Climate Central"}},"type":"notebook","body":{"title":"Urban Heat and Schools in Newark","cells":[{"id":0,"value":"

Urban Heat and Schools in Newark

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":324,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1591,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1593,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1595,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1597,"value":"## PAGE CODE BELOW ## ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":795,"value":"cities = FileAttachment(\"City_list.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":801,"value":"public_schools = FileAttachment(\"public_schools.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":962,"value":"newark_schools = public_schools.features.filter((d) => d.properties.LCITY === \"Newark\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1396,"value":"function updateTooltip({ object, x, y }, tooltip) {\n if (object) {\n const p = object.properties ?? object;\n const gradeLow = p.lowest_grade;\n const gradeHigh = p.highest_grade;\n const freeReduced = p.TOTFRL;\n const gradeSpan =\n gradeLow === \"M \" || gradeHigh === \"M \"\n ? \"Missing data\"\n : `${gradeLow}-${gradeHigh}`;\n\n tooltip.style.visibility = \"visible\";\n tooltip.style.left = `${x + 12}px`; // use deck.gl’s canvas-relative coords\n tooltip.style.top = `${y + 12}px`;\n tooltip.textContent = `School: ${p.SCH_NAME}\nTotal students: ${p.MEMBER}\nTotal eligible for free/reduced lunch: ${\n freeReduced === -2\n ? \"Not applicable\"\n : freeReduced === -1\n ? \"Missing data\"\n : +freeReduced\n }\nGrades: ${gradeSpan}\nUHI Intensity: ${(+p.indx__F).toFixed(1)}°F`;\n } else {\n tooltip.style.visibility = \"hidden\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":823,"value":"lat = cities.filter((d) => d.JB_name === \"Newark\")[0].lat","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":825,"value":"lon = cities.filter((d) => d.JB_name === \"Newark\")[0].lon","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":827,"value":"zoomLevel = 11","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":484,"value":"viewof logo = await FileAttachment(\n \"2024ClimateCentralLogo_WhiteHorizontal.png\"\n).image({ width: 250, height: 32 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":812,"value":"function hexToRgb(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? [\n parseInt(result[1], 16),\n parseInt(result[2], 16),\n parseInt(result[3], 16)\n ]\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":814,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":916,"value":"newark_uhi = FileAttachment(\"Newark_UHI.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1020,"value":"viewof legend = Legend(\n d3.scaleThreshold(\n [\n `1°`,\n `3°`,\n `5°`,\n `5.5°`,\n `6°`,\n `6.5°`,\n `7°`,\n `7.5°`,\n `8°`,\n `8.5°`,\n `9°`,\n `9.5°`,\n `10°+`\n ],\n colors\n ),\n {\n tickSize: 0,\n textColor: \"white\",\n paddingTop: 0,\n paddingBottom: 15,\n width: width - 40\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1022,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"maplibregl = require(\"maplibre-gl@2.1.9\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"deck = require.alias({\n h3: {}\n})(\"deck.gl@latest/dist.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":897,"value":"import { embed } from \"@observablehq/auto-resizing-embed\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"