40:null 41:["$","title",null,{"children":"UTCI July 2022 - New York, New Jersey, Connecticut | Gabriel Aldana | Observable"}] 47:T7ed,chart = { const n = image.getWidth(); const m = image.getHeight(); const width = n; const height = m; const path = d3.geoPath()//.projection(projection); const contours = d3.contours().size([n, m]); // const color = d3.scaleSequential(d3.interpolateTurbo).domain(d3.extent(values // .filter(d => d >= d1.range[0] * 100 && d <= d1.range[1] * 100) // )).nice() const samples = d3.quantize(d3.interpolateTurbo, 20) const customColor = "#F4F7F4" const customInterpolator = d3.piecewise(d3.interpolateRgb, [...samples, customColor]) const minVal = d1.range[0] * 100 const maxVal = d1.range[1] * 100 const domain = d3.extent(values.filter(d => d >= minVal && d <= maxVal)) const color = d3.scaleSequential(customInterpolator).domain(domain).nice() const addColor = color.ticks(20) const thresholds = color//.filter(t => t < maxVal) const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); const tiles = tile() svg.append('g') .attr('class', 'basemap-tiles') .selectAll(".basemap-tiles") .data(tiles, d => d) .join('image') .attr("xlink:href", d => url(...d3.tileWrap(d))) .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale) .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale) .attr("width", tiles.scale) .attr("height", tiles.scale); svg.append("g") .attr('class', 'geotiff-contours') .selectAll('.geotiff-contours') .data(addColor) .join("path") .attr("d", d => path(contours.contour(values, d))) .attr("fill", thresholds) // .attr("fill-opacity", d => { // if (d > (d1.range[0] * 100) && d <= (d1.range[1] * 100)) { return 1 } // else return 0 // }); return svg.node() }48:T1b13,utci = [{"degrees":15.4,"total_count":1},{"degrees":15.6,"total_count":2},{"degrees":15.7,"total_count":1},{"degrees":15.8,"total_count":4},{"degrees":16.0,"total_count":1},{"degrees":16.1,"total_count":6},{"degrees":16.2,"total_count":4},{"degrees":16.3,"total_count":2},{"degrees":16.4,"total_count":6},{"degrees":16.5,"total_count":11},{"degrees":16.6,"total_count":2},{"degrees":16.7,"total_count":8},{"degrees":16.9,"total_count":14},{"degrees":17.0,"total_count":11},{"degrees":17.1,"total_count":5},{"degrees":17.2,"total_count":10},{"degrees":17.3,"total_count":5},{"degrees":17.4,"total_count":7},{"degrees":17.5,"total_count":11},{"degrees":17.6,"total_count":2},{"degrees":17.7,"total_count":15},{"degrees":17.8,"total_count":7},{"degrees":17.9,"total_count":22},{"degrees":18.0,"total_count":35},{"degrees":18.1,"total_count":44},{"degrees":18.2,"total_count":34},{"degrees":18.3,"total_count":54},{"degrees":18.4,"total_count":51},{"degrees":18.5,"total_count":39},{"degrees":18.6,"total_count":89},{"degrees":18.7,"total_count":70},{"degrees":18.8,"total_count":79},{"degrees":18.9,"total_count":101},{"degrees":19.0,"total_count":100},{"degrees":19.1,"total_count":103},{"degrees":19.2,"total_count":148},{"degrees":19.3,"total_count":115},{"degrees":19.4,"total_count":179},{"degrees":19.5,"total_count":202},{"degrees":19.6,"total_count":210},{"degrees":19.7,"total_count":379},{"degrees":19.8,"total_count":407},{"degrees":19.9,"total_count":438},{"degrees":20.0,"total_count":422},{"degrees":20.1,"total_count":697},{"degrees":20.2,"total_count":486},{"degrees":20.3,"total_count":786},{"degrees":20.4,"total_count":703},{"degrees":20.5,"total_count":944},{"degrees":20.6,"total_count":808},{"degrees":20.7,"total_count":1122},{"degrees":20.8,"total_count":1029},{"degrees":20.9,"total_count":880},{"degrees":21.0,"total_count":1172},{"degrees":21.1,"total_count":1258},{"degrees":21.2,"total_count":1341},{"degrees":21.3,"total_count":1366},{"degrees":21.4,"total_count":1442},{"degrees":21.5,"total_count":1325},{"degrees":21.6,"total_count":1524},{"degrees":21.7,"total_count":1659},{"degrees":21.8,"total_count":1667},{"degrees":21.9,"total_count":1418},{"degrees":22.0,"total_count":1557},{"degrees":22.1,"total_count":1756},{"degrees":22.2,"total_count":1753},{"degrees":22.3,"total_count":1653},{"degrees":22.4,"total_count":1763},{"degrees":22.5,"total_count":1974},{"degrees":22.6,"total_count":2376},{"degrees":22.7,"total_count":2257},{"degrees":22.8,"total_count":2402},{"degrees":22.9,"total_count":2488},{"degrees":23.0,"total_count":2389},{"degrees":23.1,"total_count":2633},{"degrees":23.2,"total_count":2845},{"degrees":23.3,"total_count":2912},{"degrees":23.4,"total_count":2892},{"degrees":23.5,"total_count":2790},{"degrees":23.6,"total_count":2892},{"degrees":23.7,"total_count":2984},{"degrees":23.8,"total_count":2979},{"degrees":23.9,"total_count":2916},{"degrees":24.0,"total_count":3015},{"degrees":24.1,"total_count":3033},{"degrees":24.2,"total_count":3268},{"degrees":24.3,"total_count":3411},{"degrees":24.4,"total_count":3396},{"degrees":24.5,"total_count":3223},{"degrees":24.6,"total_count":2991},{"degrees":24.7,"total_count":3024},{"degrees":24.8,"total_count":3430},{"degrees":24.9,"total_count":3120},{"degrees":25.0,"total_count":3175},{"degrees":25.1,"total_count":2828},{"degrees":25.2,"total_count":2678},{"degrees":25.3,"total_count":2786},{"degrees":25.4,"total_count":2785},{"degrees":25.5,"total_count":2644},{"degrees":25.6,"total_count":2646},{"degrees":25.7,"total_count":2502},{"degrees":25.8,"total_count":2385},{"degrees":25.9,"total_count":2454},{"degrees":26.0,"total_count":2505},{"degrees":26.1,"total_count":2397},{"degrees":26.2,"total_count":2271},{"degrees":26.3,"total_count":2405},{"degrees":26.4,"total_count":2545},{"degrees":26.5,"total_count":2656},{"degrees":26.6,"total_count":2495},{"degrees":26.7,"total_count":2407},{"degrees":26.8,"total_count":2441},{"degrees":26.9,"total_count":2500},{"degrees":27.0,"total_count":2285},{"degrees":27.1,"total_count":2318},{"degrees":27.2,"total_count":2140},{"degrees":27.3,"total_count":1706},{"degrees":27.4,"total_count":1663},{"degrees":27.5,"total_count":1472},{"degrees":27.6,"total_count":1397},{"degrees":27.7,"total_count":1127},{"degrees":27.8,"total_count":995},{"degrees":27.9,"total_count":913},{"degrees":28.0,"total_count":887},{"degrees":28.1,"total_count":811},{"degrees":28.2,"total_count":822},{"degrees":28.3,"total_count":875},{"degrees":28.4,"total_count":913},{"degrees":28.5,"total_count":1008},{"degrees":28.6,"total_count":997},{"degrees":28.7,"total_count":1040},{"degrees":28.8,"total_count":1069},{"degrees":28.9,"total_count":1092},{"degrees":29.0,"total_count":1177},{"degrees":29.1,"total_count":1090},{"degrees":29.2,"total_count":1155},{"degrees":29.3,"total_count":1071},{"degrees":29.4,"total_count":961},{"degrees":29.5,"total_count":990},{"degrees":29.6,"total_count":870},{"degrees":29.7,"total_count":818},{"degrees":29.8,"total_count":660},{"degrees":29.9,"total_count":579},{"degrees":30.0,"total_count":572},{"degrees":30.1,"total_count":489},{"degrees":30.2,"total_count":545},{"degrees":30.3,"total_count":666},{"degrees":30.4,"total_count":612},{"degrees":30.5,"total_count":445},{"degrees":30.6,"total_count":472},{"degrees":30.7,"total_count":463},{"degrees":30.8,"total_count":515},{"degrees":30.9,"total_count":615},{"degrees":31.0,"total_count":605},{"degrees":31.1,"total_count":560},{"degrees":31.2,"total_count":521},{"degrees":31.3,"total_count":576},{"degrees":31.4,"total_count":533},{"degrees":31.5,"total_count":485},{"degrees":31.6,"total_count":530},{"degrees":31.7,"total_count":492},{"degrees":31.8,"total_count":542},{"degrees":31.9,"total_count":430},{"degrees":32.0,"total_count":359},{"degrees":32.1,"total_count":307},{"degrees":32.2,"total_count":332},{"degrees":32.3,"total_count":266},{"degrees":32.4,"total_count":267},{"degrees":32.5,"total_count":173},{"degrees":32.6,"total_count":169},{"degrees":32.7,"total_count":124},{"degrees":32.8,"total_count":131},{"degrees":32.9,"total_count":105},{"degrees":33.0,"total_count":74},{"degrees":33.1,"total_count":83},{"degrees":33.2,"total_count":48},{"degrees":33.3,"total_count":46},{"degrees":33.4,"total_count":53},{"degrees":33.5,"total_count":25},{"degrees":33.6,"total_count":21},{"degrees":33.7,"total_count":12},{"degrees":33.8,"total_count":10},{"degrees":33.9,"total_count":9},{"degrees":34.0,"total_count":8},{"degrees":34.1,"total_count":9},{"degrees":34.2,"total_count":5},{"degrees":34.3,"total_count":14},{"degrees":34.4,"total_count":24},{"degrees":34.5,"total_count":12},{"degrees":34.6,"total_count":10},{"degrees":34.7,"total_count":7},{"degrees":34.8,"total_count":6},{"degrees":34.9,"total_count":7},{"degrees":35.0,"total_count":5},{"degrees":35.1,"total_count":3},{"degrees":35.2,"total_count":2},{"degrees":35.3,"total_count":1},{"degrees":35.4,"total_count":1}]49:T4f7,viewof d2 = { // Compute aggregated data for stacked marks const aggregated = d3.rollups( utci, group => d3.sum(group, d => d.total_count), d => d.degrees ); // Set domain extents const [minDeg, maxDeg] = d3.extent(utci, d => d.degrees); // Interactive slider component const slider = Inputs.range([minDeg, maxDeg], { step: 1, value: [minDeg, maxDeg], label: "UTCI Range" }); // Stacked marks overlay plot const plot = Plot.plot({ height: 80, width: 500, margin: 0, x: { domain: [minDeg, maxDeg], axis: null }, y: { axis: null }, marks: [ Plot.rectY(utci, { x: "degrees", y: "total_count", fill: "cluster", mixBlendMode: "multiply" }) ] }); // Container styling to layer stacked marks directly above slider track const container = htl.html`

${plot}

${slider}

`; // Forward slider value as cell value return Object.defineProperty(container, "value", { get: () => slider.value, set: (v) => { slider.value = v; } }); }4a:[{"id":"98a41847f532bce49e7a16bb26999f21d4d49ee8c36936b593cfc7d950dfe030601fe9e81bb878e8738a444b0e78872a31b624b09725e5b600bbafbf26a9971c","href":"https://static.observableusercontent.com/files/98a41847f532bce49e7a16bb26999f21d4d49ee8c36936b593cfc7d950dfe030601fe9e81bb878e8738a444b0e78872a31b624b09725e5b600bbafbf26a9971c","name":"reprojected.tif","type":"image/tiff","lastModified":1785480782315.569,"size":1246123}] 45:{"id":"3fdcd0fd24d5a634","slug":null,"title":"UTCI July 2022 - New York, New Jersey, Connecticut","thumbnail":"1037a63e499f8f2c25a30f6ff7a3c448f2be2034430aa425d7905a63ccf7a457","access_level":"public","create_time":"$D2025-01-31T20:00:19.475Z","update_time":"$D2026-09-01T12:46:30.697Z","view_time":null,"first_public_time":"$D2026-07-31T07:27:11.057Z","has_unpublished_edits":null,"fork":{"id":"2131bc2dd3ddab08","slug":"volcano-contours/2","title":"Volcano contours","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"370369ceafbfaed1","login":"4db860c59da3ff48","name":"Gabriel Aldana","avatar_url":"https://avatars-next.observableusercontent.com/6388fdd2c4c8cf5d6cca9d5237f9eba5a211ac3a8a881684a5c976011fd6fd70","tier":"starter_2024","bio":"","following":false},"version":939,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4db860c59da3ff48","login":"4db860c59da3ff48","name":"Gabriel Aldana","avatar_url":"https://avatars-next.observableusercontent.com/6388fdd2c4c8cf5d6cca9d5237f9eba5a211ac3a8a881684a5c976011fd6fd70","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"370369ceafbfaed1","login":"4db860c59da3ff48","name":"Gabriel Aldana","avatar_url":"https://avatars-next.observableusercontent.com/6388fdd2c4c8cf5d6cca9d5237f9eba5a211ac3a8a881684a5c976011fd6fd70","tier":"starter_2024","role":"editor"},{"type":"individual","id":"4db860c59da3ff48","login":"4db860c59da3ff48","name":"Gabriel Aldana","avatar_url":"https://avatars-next.observableusercontent.com/6388fdd2c4c8cf5d6cca9d5237f9eba5a211ac3a8a881684a5c976011fd6fd70","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"UTCI July 2022 - New York, New Jersey, Connecticut","cells":[{"id":0,"value":"

UTCI July 2022 - New York, New Jersey, Connecticut

D3 › Gallery

\n\n# UTCI July 2022 - New York, New Jersey, Connecticut\n\nmade with [d3-contour](https://d3js.org/d3-contour) and Copernicus [Global Monthly 1 km Universal Thermal Climate Index](https://zenodo.org/records/8310513).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":375,"value":"## Temperatures between ${ d3.format(\".2f\")(d1.range[0]) }°C and ${ d3.format(\".2f\")(d1.range[1]) }°C","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"viewof d1 = rangeSlider(utci,d => d.degrees, \n group => d3.sum(group.values, d => d.total_count) )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"Using [Observable Plot](https://observablehq.com/plot)’s concise API, you can create a contour plot with the [contour mark](https://observablehq.com/plot/marks/contour), here using the **fill** channel to encode elevation as color.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"projection = \nd3.geoEquirectangular()\n .scale(5575) \n .center([-73.85, 46.417337011274]) \n .translate([width / 2, image.getHeight() / 2]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"tile = d3.tile()\n .size([image.getWidth(), image.getHeight() ])\n .tileSize(600)\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"tiles = tile//.zoomDelta([-100, -4, -1, 0]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"url = (x, y, z) => `https://a.basemaps.cartocdn.com/light_all/${z}/${x}/${y}.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"image = tiff.getImage()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"tiff = FileAttachment(\"reprojected.tif\").arrayBuffer().then(buffer => GeoTIFF.fromArrayBuffer(buffer))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"values = (await image.readRasters())[0]//.filter(d => d > d )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":" contours = d3.contours().size([image.getWidth(), image.getHeight()]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"GeoTIFF = require('geotiff@2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"d1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"bb = tiff.getImage().then((d) => d.getBoundingBox())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"d3 = require(\"d3@7\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"height = image.getHeight();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"import {rangeSlider} from \"@bumbeishvili/utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 46:"$45:body"