31:T14b1,map = { const scale = map_width/width const svg = d3.select(DOM.svg(scale*(width), scale*(height+78) )) .attr("viewBox", `0 0 ${ width} ${height+78}`); svg.style("border", "1px solid #888") .style("background-color", "white") .html(stylesheet); // Append the stylesheet directly into the SVG svg.append("style").text(stylesheet); const path = d3.geoPath().projection(projection); svg.on("mouseleave", function() { mutable hover = null }) svg.append("clipPath") .attr("id", "usClipPath") .append("use") .attr("xlink:href","#usPath"); svg.append("clipPath") .attr("id", "clip-bottom") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height-5); svg.append("path") .datum({ type: "Sphere" }) .attr("d", path) .attr("fill", "#00d") .attr("fill-opacity", 0.02) .attr("stroke", "#aaa") .attr("stroke-width", 1.5) .attr("clip-path", "url(#clip-bottom)") .on("mouseover", function() { mutable hover = null }) svg.append("path") .datum(land) .attr("d", path) .attr("fill", "#b0b0b0") .attr("fill-opacity", 0.4) .attr("stroke", "#99988d") .attr("stroke-width", 0.5) .attr("clip-path", "url(#clip-bottom)") .on("mouseover", function() { mutable hover = null }) svg.append("path") .datum(lakes) .attr("d", path) .attr("fill", "#E5EFEF") .attr("fill-opacity", 0.8) .attr("stroke-width", 0) .on("mouseover", function() { mutable hover = null }) svg.append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path) .style("fill", "none") .style("stroke", "#ccc") .style("stroke-width", 0.5) .attr("clip-path", "url(#clip-bottom)") const g = svg.append("g") .selectAll(".contour") .data(contours) .join("g"); g.append("path") .attr("clip-path", "url(#usClipPath)") .attr("class", d => `contour ${(d.value)}`) .attr("d", d3.geoPath()) .attr("stroke-width", (d, i) => i % 5 ? 0.25 : 1) .style("stroke", "white") .attr("fill", d => thresholdColorScale(d.value)) .on("mouseover", function(d) { mutable hover = d.value }) .on("mouseleave", function() { mutable hover = null }) svg.append("path") .datum(statesInner) .attr("class", "inner") .attr("d", path) .style("fill", "none") svg.append("path") .datum(statesOuter) .attr("d", path) .attr("id", "usPath") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 0.5); const labels_g = g.append("g") .attr("clip-path", "url(#usClipPath)") const color_labels = svg.append("g") const color_labels_width = width * 0.85 const color_label_width = color_labels_width / density_thresholds.length const label = color_labels .selectAll('g') .data(density_thresholds) .join("g") color_labels .selectAll('text') .data(['COLDER', 'HOTTER']) .join('text') .attr('class', 'color_label_heading') .text(d => d) .attr('x', (_, i) => width * 0.05 + i * (color_labels_width - 15)) .attr('y', height + 15) label .append("rect") .attr('class', 'color_label') .attr("width", color_label_width) .attr("height", 6) .attr("x", (_,i) => width * 0.05 + ((color_label_width + 1) * i)) .attr("y", height + 32) .attr("fill", d => thresholdColorScale(d)) .style("border", "1px solid white"); // To get rid of Fahrenheit unit!! // https://en.wikipedia.org/wiki/Fahrenheit const tempConversionRatio = useCelsius? 1/1.8 : 1; const symbolUnitTemperature = useCelsius? "°C" : "°F"; label .append("text") .attr('class', 'color_label_text') .attr("x", (_,i) => width * 0.05 + ((color_label_width + 1) * i + color_label_width/2)) .attr("text-anchor", "middle") .attr("y", height + 27) .attr("width", color_label_width) .text(d => `${bins[density_thresholds.indexOf(d)] > 0 ? "+" : ""} ${d3.format(".1f")(bins[density_thresholds.indexOf(d)]*tempConversionRatio / factor_temperature)}${symbolUnitTemperature}`) label .append('circle') .attr('class', d => `color_label_circle`) .attr('cx', (_,i) => width * 0.05 + ((color_label_width + 1) * i) + color_label_width / 2) .attr("cy", height + 45) .attr("r", 2.5) .attr("fill", 'black') .attr("stroke", "white") .attr("stroke-width", 1) .attr("opacity", d => hover === d ? 1 : 0); const title_graph = svg.append("g") title_graph.append("text") .text("Rate of Temperature Change in the United States,") .attr('x', width / 2 - 30) .attr("text-anchor", "middle") .attr('y', height + 65) .attr('class', 'map_title') .attr('font-weight', 600); // Append the second part of the text (bold weight) title_graph.append("text") .text(`${selected_period.name}`) .attr('x', width / 2 + 108) // Position adjusted based on the text length .attr("text-anchor", "middle") .attr('y', height + 65) .attr('class', 'map_title') .attr('font-weight', 800); return svg.node(); } 32:T502,choropleth_map = { const scale = 1.2 const svg = d3.select(DOM.svg(scale*width, scale*(height) )) .attr("viewBox", `0 0 ${ width} ${height}`); svg.style("border", "1px solid #888") const path = d3.geoPath().projection(projection) // Define a color scale based on Temperature Change const colorScale = d3.scaleLinear() .domain([-DeltaT_max*factor_temperature,DeltaT_max*factor_temperature]) .range([0,1]) const linearColorScale = d3.scaleLinear() .domain(d3.range(0,1,1/choropleth_colors.length)) .range(choropleth_colors); // Bind data to the paths and fill each US climate divisions based on the color scale svg.selectAll("path") .data(mergedData) .enter() .append("path") .attr("d", d => path(d)) // Use the path generator to draw the division .attr("fill", d => linearColorScale(colorScale(+d["Temperature Change"]*factor_temperature))) // Fill with color based on Temperature Change .attr("stroke", "#000") .attr("stroke-width", 0.25); const title_graph = svg.append("g") title_graph.append("text") .text(`${selected_period.name}`) .attr('x', width - 70) .attr("text-anchor", "middle") .attr('y', 0.6*height) .attr('font-weight', 600); return svg.node(); }33:T472,{ const scale = 1.2 const svg = d3.select(DOM.svg(scale*width, scale*(height) )) .attr("viewBox", `0 0 ${ width} ${height}`); svg.style("border", "1px solid #888") const path = d3.geoPath().projection(projection) svg.append("path") .datum(land) .attr("d", path) .attr("fill", "none") .attr("stroke", "#000") .style("stroke-width", 0.5); svg.append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path) .style("fill", "none") .style("stroke", "#eee") .style("stroke-width", 0.6); svg.append("path") .datum(statesOuter) .attr("fill", "blue") .attr("fill-opacity", 0.2) .attr("stroke", "#000") .attr("stroke-width", 0.7) .attr("d", path); svg.selectAll(".point") .data(gridPointsGeoJSON) .join("circle") .attr("cx", d => projection(d.geometry.coordinates)[0]) .attr("cy", d => projection(d.geometry.coordinates)[1]) .attr("r", 2) .attr("fill", "green") .attr("fill-opacity", 0.5) .attr("stroke-width", 0); return svg.node(); }34:T9f8,{ const scale = 1.4 const svg = d3.select(DOM.svg(scale*width, scale*(height) )) .attr("viewBox", `0 0 ${ width} ${height}`); svg.style("border", "1px solid #888") const path = d3.geoPath().projection(projection) // Define a color scale based on Temperature Change const colorScale = d3.scaleLinear() .domain([-DeltaT_max*factor_temperature,DeltaT_max*factor_temperature]) .range([0,1]) const linearColorScale = d3.scaleLinear() .domain(d3.range(0,1,1/colors.length)) .range(colors); // Bind data to the paths and fill each US climate divisions based on the color scale svg.selectAll("path") .data(mergedData) .enter() .append("path") .attr("d", d => path(d)) // Use the path generator to draw the division .attr("fill", show_Choropleth? d => linearColorScale(colorScale(+d["Temperature Change"]*factor_temperature)): "none"); svg.append("path") .datum(land) .attr("d", path) .attr("fill", "none") .attr("stroke", "#000") .style("stroke-width", 0.5); svg.append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path) .style("fill", "none") .style("stroke", "#eee") .style("stroke-width", 0.8); svg.append("path") .datum(statesOuter) .attr("fill", "none") .attr("fill-opacity", 0.2) .attr("stroke", "#000") .attr("stroke-width", 0.7) .attr("d", path); svg.append("path") .datum(divisions) .attr("fill", "none") .attr("stroke", "#37AE12") .attr("stroke-width", 0.3) .attr("d", path); svg.selectAll(".point0") .data(gridPointsGeoJSON) .join("circle") .attr("class", "point0") .attr("cx", d => projection(d.geometry.coordinates)[0]) .attr("cy", d => projection(d.geometry.coordinates)[1]) .attr("r", 2) .attr("fill", "green") .attr("fill-opacity", 0.5) .attr("stroke", "black") .attr("stroke-width", 0); svg.selectAll(".point") .data(gridPointsGeoJSON) .enter().append("path") .attr("d", path) .style("stroke", "#000") .style("stroke-width", .1) .style('fill', (d, i) => { const value = get_point_data(d.geometry.coordinates, i) // if the point isn't within our bounds, don't color it if (value === null) return "none" // otherwise, fill with the colorScale (convert to [0,1] through colorScale) return linearColorScale(colorScale(value)) }) return svg.node(); }35:[{"id":"5a35a251f8436ffaf8816bf04e79d4f535c20ede98cc65649fc7b1b4c5583288433695c2a0aa59473846edbcdd9331980eef177e90755557208adf086b3e19e4","href":"https://static.observableusercontent.com/files/5a35a251f8436ffaf8816bf04e79d4f535c20ede98cc65649fc7b1b4c5583288433695c2a0aa59473846edbcdd9331980eef177e90755557208adf086b3e19e4","name":"world-110m_withlakes.topo.json","type":"application/json","lastModified":1727466564808.608,"size":92469},{"id":"ec98caf277dbc5a51041ef2a5f2be23c0f7e3439a96f2e9611f80061de9b6235983647547bc931aae8c3329206d648c8690c20c27e608d5ba04a9fcd233baf49","href":"https://static.observableusercontent.com/files/ec98caf277dbc5a51041ef2a5f2be23c0f7e3439a96f2e9611f80061de9b6235983647547bc931aae8c3329206d648c8690c20c27e608d5ba04a9fcd233baf49","name":"states.json","type":"application/json","lastModified":1727470298405.675,"size":101495},{"id":"8e5a6d5d6ca7cb12d32a8130f34b4abf24cbe90cb9770fa069af28a2c91eff55aac5936c7bf3f4baf24fb225762a41b2aa43d7f03d5073f63963aaaa25a896be","href":"https://static.observableusercontent.com/files/8e5a6d5d6ca7cb12d32a8130f34b4abf24cbe90cb9770fa069af28a2c91eff55aac5936c7bf3f4baf24fb225762a41b2aa43d7f03d5073f63963aaaa25a896be","name":"rate_temperature_change_USA_1901-2023.csv","type":"text/csv","lastModified":1727475765978.813,"size":9110},{"id":"140d08f766717827c1a8b969edbecf3ec4f1dd59a21317954bf4a90542cd65dde2ae439ee16e5e0c9ea1ac5d87765ec0b4eedd18bbb8ea7a1a45287d619ac524","href":"https://static.observableusercontent.com/files/140d08f766717827c1a8b969edbecf3ec4f1dd59a21317954bf4a90542cd65dde2ae439ee16e5e0c9ea1ac5d87765ec0b4eedd18bbb8ea7a1a45287d619ac524","name":"rate_temperature_change_USA_1901-2015.csv","type":"text/csv","lastModified":1727476471428.853,"size":9138},{"id":"b127763bdbb9a5253d60044745900421e7642405893f463dddef6bdfcb375cc95f11188c9b5ff76ecf881f223684b35e85a60d90f817e857e465c65af5e87f4e","href":"https://static.observableusercontent.com/files/b127763bdbb9a5253d60044745900421e7642405893f463dddef6bdfcb375cc95f11188c9b5ff76ecf881f223684b35e85a60d90f817e857e465c65af5e87f4e","name":"USA_temperature_change_1901-2015_vs_1901-2023.jpg","type":"image/jpeg","lastModified":1727478371525.301,"size":309590},{"id":"88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","href":"https://static.observableusercontent.com/files/88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","name":"land-50m.json","type":"application/json","lastModified":1727448079324.07,"size":545534},{"id":"b14bdfd982d58c58567750c77793fdd9a47fdff64e13baae64b479e7528cae0acc284d856ff0c9c5e63cd16cc81ea43e2cc806d35c259dd608ef55749c85117f","href":"https://static.observableusercontent.com/files/b14bdfd982d58c58567750c77793fdd9a47fdff64e13baae64b479e7528cae0acc284d856ff0c9c5e63cd16cc81ea43e2cc806d35c259dd608ef55749c85117f","name":"climate_divisions.topojson","type":"application/octet-stream","lastModified":1727430665962.322,"size":317840},{"id":"a0d4ac2ae8115aee10743ba159953f4f5bc25bbb1dbac4754d50fc4f240b4c0b5cd703d007994833d4d9220c6c85d7efe288822ea4209fc84498e9edb2de1f8b","href":"https://static.observableusercontent.com/files/a0d4ac2ae8115aee10743ba159953f4f5bc25bbb1dbac4754d50fc4f240b4c0b5cd703d007994833d4d9220c6c85d7efe288822ea4209fc84498e9edb2de1f8b","name":"states_buffer.geojson","type":"application/geo+json","lastModified":1727435412062.791,"size":92069}] 2f:{"title":"🌡 Temperature Contour Density Map","cells":[{"id":0,"value":"# 🌡 Temperature Contour Density Map\n\n*This notebook is adapted from the [Temperature Contour Density Map](https://observablehq.com/@efrymire/temperature-contour-density-map) by [@efrymire](https://observablehq.com/@efrymire).*\n","pinned":false,"hidden":false,"mode":"md"},{"id":5903,"value":"

Key enhancements:

For comparison purposes, this notebook also includes data for the period 1901–2023 ...
By default, the temperature differences (ΔT) are displayed in degrees Celsius (°C), rather than Fahrenheit (°F).\n
The map projection is not limited to d3.AlbersUsa().

\nNote: To enhance the comparison of the datasets and effectively highlight temperature variations,\nthe domain for ΔT is set between [-4.0°F, +4.5°F]. This ensures that the color scales remain consistent across the maps.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":5726,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2778,"value":"The data is sourced from EPA and NOAA and includes an aggregation of temperature changes of the continental US climate divisions for the period **${selected_period.name}**. This dataset, paired with shape files for every climate division, is typically used to create choropleth maps. By creating contours, we can see the same data unrestricted by county, state, or climate division borders.","pinned":false,"hidden":false,"mode":"md"},{"id":5200,"value":"viewof selected_projection = Inputs.select(projections, {\n label: \"Select a Projection\",\n format: d => d.name,\n value: projections.find(p => p.name === \"Albers\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5880,"value":"viewof selected_period = Inputs.select(fileMap, {\n label: \"Select a Period\",\n format: d => d.name,\n value: fileMap.find(p => p.name === \"1901-2023\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7569,"value":"viewof color_scale = Inputs.select(new Map([[\"Blue / Grey / Red (NOAA's style)\", \"NOAA\"], [\"Blue / Yellow / Red\", \"BYR\"]]), {value: \"BYR\", label: \"Select a color style\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5848,"value":"viewof useCelsius = Inputs.toggle({label: htl.html`Use °C for ΔT
(instead of °F)`, value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4903,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5446,"value":"viewof map_width = Inputs.range([800, 1100], {value: 1000, step: 50, label: htl.html`Map width
(size in pixels)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6696,"value":"DOM.download(() => serialize(map), \"USA_Rate_Temperature_Change\"+selected_period.name, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6669,"value":"DOM.download(() => rasterize(map), \"USA_Rate_Temperature_Change\"+selected_period.name, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6678,"value":"You can save the currently displayed map in either SVG or PNG format. If you choose to save it as a PNG, please follow these two steps:\n 1. Click on \"Save as PNG\" to initiate the conversion.\n 2. Click on \"Download\" to retrieve the PNG file.\n\nThis process converts the SVG into a canvas format before generating the PNG.","pinned":false,"hidden":false,"mode":"md"},{"id":6013,"value":"---\n## References\nThe maps below illustrate the “Rate of Temperature Change in the United States” for two distinct periods: 1901-2015 (left) and 1901-2023 (right).","pinned":false,"hidden":false,"mode":"md"},{"id":5923,"value":"

Rate of Temperature Change in the United States, 1901-2015 (left) and 1901-2023 (right).\n
[ Sources: NOAA 2016 / NOAA 2024 ]

","pinned":false,"hidden":false,"mode":"html"},{"id":5769,"value":"---\n## Development","pinned":false,"hidden":false,"mode":"md"},{"id":4456,"value":"### Reproduce the map\nWe start by recreating a choropleth map using NOAA's data. We define a color scale that resembles the one displayed in the NOAA maps above.","pinned":false,"hidden":false,"mode":"md"},{"id":6946,"value":"choropleth_colors = [ \"#2D2E80\", \"#363A90\", \"#4143A5\", \"#475CA9\", \"#6273B8\", \"#8E9ACE\", \"#B4BCE0\", \"#BED9EE\", \"#CAEBF9\", \n \"#ccc\", \n \"#FFF5F5\", \"#FFDFE0\", \"#F0C3BE\", \"#EBA299\", \"#E66666\", \"#E31A1C\", \"#BD0026\", \"#800026\", \"#5C0423\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":7361,"value":"swatches(choropleth_colors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6898,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":6895,"value":"### Grid\n#### Create grid points\nCreate grid points that will pull data from its climate zone (${degrees_grid}° × ${degrees_grid}° geographic grid).","pinned":false,"hidden":false,"mode":"md"},{"id":586,"value":"gridPoints = { \n // range longitudes\n const lons = d3.range(longitude_min, longitude_max, degrees_grid)\n\n // range latitudes \n const lats = d3.range(lat_min, lat_max, degrees_grid).reverse()\n \n // long / lat points in order from west to east, then north to south, like a wrap\n return lats.map((lat, i) => lons.map(lon => [lon, lat])).flat()\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":5778,"value":"The coordinates considered here cover the contiguous United States, excluding Alaska. While U.S. climate divisions also include Puerto Rico, it is not considered in this notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":4584,"value":"viewof degrees_grid = Inputs.range([2, 5], {value: 2, step: 1, label: \"Grid size (°)\", disabled: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4601,"value":"viewof lat_min = Inputs.range([-90, 90], {value: 15, step: 1, label: \"Latitude, min (°)\", disabled: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4603,"value":"viewof lat_max = Inputs.range([-90, 90], {value: 52, step: 1, label: \"Latitude, max (°)\", disabled: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4609,"value":"viewof longitude_min = Inputs.range([-180, 180], {value: -130, step: 1, label: \"Longitude, min (°)\", disabled: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4605,"value":"viewof longitude_max = Inputs.range([-180, 180], {value: -62, step: 1, label: \"Longitude, max (°)\", disabled: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"#### Plot the grid points\nPlot the grid points points to view the expansion of coverage.","pinned":false,"hidden":false,"mode":"md"},{"id":380,"value":"gridPointsGeoJSON = {\n return gridPoints.map((d, i) => {\n return {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": d\n },\n \"properties\": {\n \"index\": i\n }\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5118,"value":"//projection = d3.geoAlbersUsa().fitSize([width, height], statesOuter)\nprojection = selected_projection.value.fitSize([width, height], statesOuter).scale(selected_projection.value.scale()*0.97); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":5202,"value":"projections = [\n {name: \"Aitoff\", value: d3.geoAitoff().rotate([100, -40])},\n {name: \"Albers\", value: d3.geoAlbers()},\n {name: \"August\", value: d3.geoAugust().rotate([100, -40])},\n {name: \"Azimuthal equal-area\", value: d3.geoAzimuthalEqualArea().rotate([100, -40])},\n {name: \"Eisenlohr conformal\", value: d3.geoEisenlohr().rotate([100, -40])},\n {name: \"Eckert V\", value: d3.geoEckert5().rotate([100, -40])},\n {name: \"Flat-polar sinusoidal\", value: d3.geoMtFlatPolarSinusoidal().rotate([100, -40])},\n {name: \"Ginzburg V\", value: d3.geoGinzburg5().rotate([100, -40])},\n {name: \"Mercator\", value: d3.geoMercator().rotate([100, -40])}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"### Voronoï\nCreate a voronoï look up temperature change based on the climate features.","pinned":false,"hidden":false,"mode":"md"},{"id":424,"value":"voronoi = d3.geoVoronoi({ type: \"FeatureCollection\", features: features })","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"voronoiLookup = {\n const voronoiPoints = gridPoints.map(d => features[voronoi.find(...d)].properties.CLIMDIV);\n return new Map(voronoiPoints.map((d, i) => [i, d]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"dataLookup = new Map(mergedData.map(d => [d.properties.CLIMDIV, d[\"Temperature Change\"]]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"get_point_data = (d, i) => {\n let data = null\n \n // this limits the data to the regions in or close to the US. \n if (d3.geoContains(statesGeo, d) || d3.geoContains(bufferGeo, d)) { \n data = +dataLookup.get(voronoiLookup.get(i)) * factor_temperature\n }\n \n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7552,"value":"viewof show_Choropleth = Inputs.toggle({label: htl.html`Show the Choropleth map`, value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5063,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"### Contours\nCreate density contours from the data points","pinned":false,"hidden":false,"mode":"md"},{"id":1869,"value":"gridPointsData = gridPoints.map((point,i) => ({ \n 'centroid': projection(point),\n 'data': get_point_data(point, i)\n})).filter(d => d.centroid !== null && d.data !== null)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2629,"value":"// we'd like the valleys of the contours (and, the other end of the color scale) to be the minimum number in the data rather than 0, since some regions have negative values. \noffset = {\n return Math.abs(d3.min(CSV_data.map(d => +d['Temperature Change']))) * factor_temperature\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1867,"value":"contour_data = gridPointsData.reduce((acc, climdiv) => {\n \n // calculate the number of points based on the temp change value, down to 0.1.\n const num_points = Math.floor(Math.abs(climdiv.data + offset))\n \n // create an array of that same value repeated to create stacked points tied to the data value\n const array = new Array(num_points).fill(climdiv.centroid, 0, num_points)\n \n return [...acc, ...array] \n}, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1861,"value":"contour = d3.contourDensity()\n .x(d => d[0])\n .y(d => d[1])\n .size([width, height])\n .cellSize(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2553,"value":"contours = contour(contour_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7754,"value":"---\n## Related Observable Notebooks\n\n- [Creating a Contour Density Map from Choropleth Map](https://observablehq.com/@efrymire/gridding-map-files) by [Ellie Frymire](https://observablehq.com/@efrymire)\n- [Mapping gridded data with a Voronoi diagram](https://observablehq.com/@harrystevens/mapping-gridded-data-with-a-voronoi-diagram) by [Harry Stevens](https://observablehq.com/@harrystevens)\n- [3D Topographical Maps with NYC Open Data + D3](https://observablehq.com/@pstuffa/making-maps-with-nyc-open-data) by [Paul Buffa](https://observablehq.com/@pstuffa)","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":2188,"value":"### Helpful Definitions and Functions","pinned":false,"hidden":false,"mode":"md"},{"id":924,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"height = 290;","pinned":false,"hidden":false,"mode":"ojs"},{"id":6864,"value":"factor_temperature = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":7609,"value":"DeltaT_max = 4.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":4504,"value":"mutable hover = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":6713,"value":"stylesheet = `\n .inner {\n fill: none;\n stroke: #fff;\n stroke-width: .2px;\n }\n .mix {\n mix-blend-mode: multiply;\n }\n .outer {\n fill: none;\n stroke: lightgrey;\n }\n .climate {\n fill: none;\n stroke: #888;\n stroke-width: .5px;\n stroke-dasharray: 3px;\n mix-blend-mode: multiply;\n }\n .point {\n stroke: #ccc;\n stroke-width: .5px;\n fill: none;\n }\n .voronoi {\n stroke: pink;\n stroke-width: 0.5;\n fill: none;\n } \n .scale-me {\n transform: translate(40%, 40%) scale(1.7)\n }\n .color_label_text {\n font-size: 5.5px;\n fill: grey;\n alignment-baseline: bottom;\n }\n .color_label_heading {\n font-size: 9px;\n fill: grey;\n alignment-baseline: bottom;\n }\n .map_title {\n font-size: 10px;\n fill: #053551;\n }\n `;","pinned":false,"hidden":false,"mode":"ojs"},{"id":3828,"value":"### Color Scale","pinned":false,"hidden":false,"mode":"md"},{"id":6090,"value":"// ⚠ To enhance the comparison of the datasets and effectively highlight temperature variations,\n// we should utilize the overall domain derived from both datasets to maintain consistent scales.\n//\n// The adapted color scale intends to utilize the overall domain derived from both datasets.\n// For this purpose, the domain ΔT is defined between [-DeltaT_max°F, +DeltaT_max°F] (DeltaT_max = 4.5°F).","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"colors2 = [\"#023858\", \"#2D2E80\", \"#045a8d\", \"#0570b0\", \"#3690c0\", \"#74a9cf\", \"#a6bddb\", \"#d0d1e6\", \"#eceefa\", \"#ffffff\",\n \"#fef9d4\", \"#fed976\", \"#feb24c\", \"#fd8d3c\", \"#fc4e2a\", \"#e31a1c\", \"#bd0026\", \"#800026\", \"#5C0423\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":7567,"value":"colors = color_scale == \"NOAA\"? choropleth_colors: colors2","pinned":false,"hidden":false,"mode":"ojs"},{"id":6163,"value":"swatches(colors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3366,"value":"linearColorScale = d3.scaleLinear()\n .domain(d3.range(0,1,1/colors.length))\n .range(colors)\n .interpolate(d3.interpolateLab);","pinned":false,"hidden":false,"mode":"ojs"},{"id":5729,"value":"ramp(linearColorScale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1971,"value":"density_thresholds = contours.map(d => Math.floor(+d.value * 100000)/100000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3524,"value":"// dataDomain = d3.extent(CSV_data.map(d => +d['Temperature Change'] * factor_temperature))\ndataDomain = d3.extent(mergedData.map(d => +d['Temperature Change'] * factor_temperature))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4060,"value":"// we use d3.range to make even spaced bins of our temperature values\nbins = d3.range(\n ...dataDomain, // it should span the entire domain\n (dataDomain[1] - dataDomain[0]) / density_thresholds.length) // and be evenly spaced, but the same number as our density thresholds","pinned":true,"hidden":false,"mode":"ojs"},{"id":3725,"value":"zero_estimation_index = d3.bisect(bins, 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6278,"value":"// quantz = d3.quantize(linearColorScale, (density_thresholds.length - zero_estimation_index)*2)\nquantz = {\n \n const domain = [-DeltaT_max*factor_temperature, DeltaT_max*factor_temperature]; // Temperature change range set to [-4.5°F , +4.5°F] \n const minDeltaT = d3.min(domain);\n const maxDeltaT = d3.max(domain);\n const a = maxDeltaT - minDeltaT;\n const b = minDeltaT; \n \n return bins.map(bin => linearColorScale((bin-b)/a))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6171,"value":"// swatches(quantz.slice(-threshold_index_domain.length))\nswatches(quantz)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3911,"value":"threshold_index_domain = d3.range(-zero_estimation_index, density_thresholds.length - zero_estimation_index, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3863,"value":"thresholdColorScale = d3.scaleOrdinal()\n .domain(density_thresholds)\n .range(quantz.slice(-threshold_index_domain.length))","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"### Raw Data\n*See the* ᥫ *files pane*","pinned":false,"hidden":false,"mode":"md"},{"id":5883,"value":"fileMap = [\n {name: \"1901-2023\", file: FileAttachment(\"rate_temperature_change_USA_1901-2023.csv\") },\n {name: \"1901-2015\", file: FileAttachment(\"rate_temperature_change_USA_1901-2015.csv\") },\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"CSV_data = d3.csv(await selected_period.file.url(), function(d) {\n return {\n \"CLIMDIV\": d[\"Climate Division\"],\n \"Temperature Change\": d[\"Temperature Change\"]\n };\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":6845,"value":"mergedData = features.map(feature => {\n const climdivFeature = feature.properties.CLIMDIV.toString();\n const dataMatch = CSV_data.find(d => d.CLIMDIV === climdivFeature);\n\n return {\n ...feature, \n \"Temperature Change\": dataMatch ? dataMatch[\"Temperature Change\"] : null \n };\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"### TopoJSON Mesh and Loaded Files\n*See the* ᥫ *files pane*","pinned":false,"hidden":false,"mode":"md"},{"id":4539,"value":"//d3.json(\"https://gist.githubusercontent.com/efrymire/40006463cad8b7fce053ceb000ad0391/raw/320e1518773ef30330643045500e161659e92d42/climate_divisions.topojson\")\ndivisionsTopoJSON = FileAttachment(\"climate_divisions.topojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6797,"value":"divisions = topojson.mesh(divisionsTopoJSON)","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"features = topojson.feature(divisionsTopoJSON, divisionsTopoJSON.objects.GIS).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":5818,"value":"//import { states } from '@harrystevens/mapping-gridded-data-with-a-voronoi-diagram'\nstates = FileAttachment(\"states.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4250,"value":"continental_us = ({ \n ...states, \n objects: { \n states: { \n ...states.objects.states, \n geometries: states.objects.states.geometries.filter(d => d.properties.STATEFP !== '02' && d.properties.STATEFP !== '15')\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4226,"value":"statesInner = topojson.mesh(continental_us, continental_us.objects.states, (a, b) => a !== b);","pinned":false,"hidden":false,"mode":"ojs"},{"id":4229,"value":"statesOuter = topojson.mesh(continental_us, continental_us.objects.states, (a, b) => a === b);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2203,"value":"// This is a geojson of the buffer space around the US, created with qgis. \n// bufferGeo = d3.json(\"https://gist.githubusercontent.com/efrymire/40006463cad8b7fce053ceb000ad0391/raw/320e1518773ef30330643045500e161659e92d42/states_buffer.geojson\")\nbufferGeo = FileAttachment(\"states_buffer.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2209,"value":"statesGeo = topojson.feature(states, states.objects.states)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5085,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4554,"value":"//world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")\nworld = FileAttachment(\"land-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4556,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5649,"value":"worldWithLakes = FileAttachment(\"world-110m_withlakes.topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5652,"value":"lakes = topojson.feature(worldWithLakes, worldWithLakes.objects.lakes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"### Libraries and Variables","pinned":false,"hidden":false,"mode":"md"},{"id":5740,"value":"//import { ramp } from \"@d3/working-with-color\"\nfunction ramp(color, n = 512) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n canvas.style.margin = \"0 0px\";\n canvas.style.width = \"790px\";\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"-moz-crisp-edges\";\n canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5744,"value":"//import { swatches } from \"@d3/working-with-color\"\nfunction swatches(colors) {\n return html`${colors.map(c => `

`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6672,"value":"// https://observablehq.com/@mbostock/saving-svg\nserialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6681,"value":"// https://observablehq.com/@mbostock/saving-svg\nfunction rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"d3 = require(\"d3@5\", \"d3-geo-voronoi\",\"d3-geo-projection@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}