2e:null 2f:["$","title",null,{"children":"Sentinel-2 True Color GeoTIFF Foliage Histogram | Corey Guastini | Observable"}] 34:Td17,c = { let destWidth = 500; let destHeight = 500; const canvas = document.createElement('canvas'); const svg = d3.create("svg") .attr("width",chartw) .attr("height",charth); var binsr = bins(rasters[0][0]); var binsg = bins(rasters[0][1]); var binsb = bins(rasters[0][2]); var binsr1 = bins(rasters[1][0]); var binsg1 = bins(rasters[1][1]); var binsb1 = bins(rasters[1][2]); var yr = y(binsr); var yg = y(binsg); var yb = y(binsb); const histogramr = svg.append("g") .attr("id","gr") .attr("fill", "#db0400") .selectAll("rect") .data(binsr) .join("rect") .style("opacity",0.4) .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => yr(d.length)) .attr("height", d => yr(0) - yr(d.length)); const histogramg = svg.append("g") .attr("id","gg") .attr("fill", "#00cc03") .selectAll("rect") .data(binsg) .join("rect") .style("opacity",0.4) .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => yg(d.length)) .attr("height", d => yg(0) - yg(d.length)); const histogramb = svg.append("g") .attr("id","gb") .attr("fill", "#0084d1") .selectAll("rect") .data(binsb) .join("rect") .style("opacity",0.4) .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => yb(d.length)) .attr("height", d => yb(0) - yb(d.length)); svg.append("g") .call(xAxis); canvas.width = destWidth; canvas.height = destHeight; let ctx = canvas.getContext("2d"); ctx.strokeStyle = "white"; function render(t) { let imageData = ctx.createImageData(500, 500); // Iterate through every pixel let count = 0; for (let i = 0; i < imageData.data.length; i += 4) { // Modify pixel data imageData.data[i + 0] = rasters[0][0][count] + t*(rasters[1][0][count]-rasters[0][0][count]); // R value imageData.data[i + 1] = rasters[0][1][count] + t*(rasters[1][1][count]-rasters[0][1][count]); // G value imageData.data[i + 2] = rasters[0][2][count] + t*(rasters[1][2][count]-rasters[0][2][count]); // B value imageData.data[i + 3] = 255; // A value count+=1; } // Draw image data to the canvas ctx.putImageData(imageData, 0, 0); ctx.rect(rect.x0, rect.y0, rect.h, rect.w); ctx.stroke(); } var center=0; var loopCount = 0; var t0 = Date.now(); let time = d3.timer(function() { ctx.clearRect(0, 0, canvas.width, canvas.height); let velocity=0.001; if (loopCount == 0 && center == 0) { render(center/3); trans(1); } else if (loopCount%2 == 0) { render(center/3); } else { render(1-center/3); } center = velocity*(Date.now() - t0); if (center >= 3) { // New roundtrip loopCount+=1; center = 0; t0 = Date.now(); if (loopCount%2==0) { trans(1); } else { trans(0); } } }); invalidation.then(() => time.stop()); return html`${Object.assign(canvas, {style: "display: inline-block;vertical-align:bottom;"})} ${Object.assign(svg.node(),{style:"display:inline-block;vertical-align:bottom;"})}` }35:T4af,trans = function(el) { var binsr1 = bins(rasters[el][0]); var binsg1 = bins(rasters[el][1]); var binsb1 = bins(rasters[el][2]); var yr = y(bins(rasters[0][0])); var yg = y(bins(rasters[0][1])); var yb = y(bins(rasters[0][2])); let gr = d3.select("#gr") .selectAll("rect").data(binsr1) .transition().duration(3000) .style("opacity",0.4) .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => yr(d.length)) .attr("height", d => yr(0) - yr(d.length)); let gg = d3.select("#gg") .selectAll("rect").data(binsg1) .transition().duration(3000) .style("opacity",0.4) .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => yg(d.length)) .attr("height", d => yg(0) - yg(d.length)); let gb = d3.select("#gb") .selectAll("rect").data(binsb1) .transition().duration(3000) .style("opacity",0.4) .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => yb(d.length)) .attr("height", d => yb(0) - yb(d.length)); }36:T778,canvases = { const canvas0 = document.createElement('canvas') const canvas1 = document.createElement('canvas') let destWidth = 500; let destHeight = 500; canvas0.width = destWidth; canvas0.height = destHeight; canvas1.width = destWidth; canvas1.height = destHeight; let ctx0 = canvas0.getContext("2d"); let ctx1 = canvas1.getContext("2d"); let imageData0 = ctx0.createImageData(destWidth, destHeight); let imageData1 = ctx1.createImageData(destWidth, destHeight); let count = 0; for (let i = 0; i < imageData0.data.length; i += 4) { // Modify pixel data imageData0.data[i + 0] = rasters[0][0][count]; // R value imageData0.data[i + 1] = rasters[0][1][count]; // G value imageData0.data[i + 2] = rasters[0][2][count]; // B value imageData0.data[i + 3] = 255; // A value imageData1.data[i + 0] = rasters[1][0][count]; // R value imageData1.data[i + 1] = rasters[1][1][count]; // G value imageData1.data[i + 2] = rasters[1][2][count]; // B value imageData1.data[i + 3] = 255; // A value count+=1; } ctx0.putImageData(imageData0, 0, 0); ctx1.putImageData(imageData1,0,0); const r0 = new Uint16Array(257); const g0 = new Uint16Array(257); const b0 = new Uint16Array(257); const r1 = new Uint16Array(257); const g1 = new Uint16Array(257); const b1 = new Uint16Array(257); const data0 = ctx0.getImageData(rect.x0, rect.y0, rect.w, rect.h).data; for (let i = 0, k = -1; i < rect.w; ++i) { for (let j = 0; j < rect.h; ++j, ++k) { ++r0[data0[++k]], ++g0[data0[++k]], ++b0[data0[++k]]; } } const data1 = ctx1.getImageData(rect.x0, rect.y0, rect.w, rect.h).data; for (let i = 0, k = -1; i < rect.w; ++i) { for (let j = 0; j < rect.h; ++j, ++k) { ++r1[data1[++k]], ++g1[data1[++k]], ++b1[data1[++k]]; } } return [[r0,g0,b0], [r1,b1,g1]]; }37:[{"id":"9d2c2d45fa87038cabbe4c459a5938318facd59383cd0ae0004a17e7ffe580d3b655a2349e85b7899f43840e22ce3541ca1fb53b1fd9c609588fd338991511ac","href":"https://static.observableusercontent.com/files/9d2c2d45fa87038cabbe4c459a5938318facd59383cd0ae0004a17e7ffe580d3b655a2349e85b7899f43840e22ce3541ca1fb53b1fd9c609588fd338991511ac","name":"truecolor0.tiff","type":"image/tiff","lastModified":1600025670754.068,"size":751172},{"id":"c18483d4074867fe9e008c7595bed03309b9f577eb5295870f56c426ed5af307849890320b4ab5102b1258e0a5278354cf38ae51b06a3869d52fd788b7638d6d","href":"https://static.observableusercontent.com/files/c18483d4074867fe9e008c7595bed03309b9f577eb5295870f56c426ed5af307849890320b4ab5102b1258e0a5278354cf38ae51b06a3869d52fd788b7638d6d","name":"truecolor2.tiff","type":"image/tiff","lastModified":1600025670670.024,"size":751172}] 32:{"id":"0768f099982e5f56","slug":"sentinel-2-true-color-geotiff-foliage-histogram","title":"Sentinel-2 True Color GeoTIFF Foliage Histogram","thumbnail":"cfb1439b76c02673ddff8af19a96106b0ebe9b8a4fa20b202fceea9a67bbf3db","access_level":"public","create_time":"$D2020-09-13T00:55:29.895Z","update_time":"$D2020-09-14T02:46:00.219Z","view_time":null,"first_public_time":"$D2020-09-14T01:56:14.529Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"da36068e9c88f131","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":"starter_2024"},"version":395,"publish_version":395,"role":null,"authored":false,"authors":[{"type":"individual","id":"56bb3b86bffb2836","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":null}],"members":[{"type":"individual","id":"56bb3b86bffb2836","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Sentinel-2 True Color GeoTIFF Foliage Histogram","cells":[{"id":0,"value":"md`# Sentinel-2 True Color GeoTIFF Foliage Histogram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"md`Sentinel-2 is a satellite constellation with 10-m resolution that scans the earth every 5 days. The true color image animating above transitions between two 5 by 5-km scenes in the Adirondacks in Upstate New York: one on 18 September 2019 when the foliage was still green and the other on 13 October 2019 when the autumn foliage was near its peak color. The histograms animating along with the satellite imagery represent the pixel counts of each RGB channel within the white box. Notably, values of the red channel increase substantially as the leaves turn. While the temporal resolution of Sentinel-2 is good, the ability to monitor the leaf color depends on a cloud-free scene. In the Northeast US in the fall, odds are pretty good some clouds will be around, which results in the scene frequently being obscured.

The [Mona Lisa Histogram](https://observablehq.com/@d3/mona-lisa-histogram) notebook was leveraged heavily in creating this notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`

Code cells

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"loadRaster = \n async function load(blob) {\n let tiff = await gt.fromBlob(blob);\n let image = await tiff.getImage();\n return image.readRasters();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"rect = {\n return {\n x0:165,\n y0:10,\n w:100,\n h:100\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"rasters = {\n let files = [loadRaster(await FileAttachment(\"truecolor0.tiff\").blob()),\n loadRaster(await FileAttachment(\"truecolor2.tiff\").blob())]\n \n let outFiles = await Promise.all(files)\n \n return outFiles;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"x = d3.scaleLinear()\n .domain(d3.extent([0,128])).nice()\n .range([10, chartw-10])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"bins = function(data) {\n return d3.bin()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (data)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"y = function(bins) {return d3.scaleLinear()\n .domain([0, d3.max(bins, d => d.length)]).nice()\n .range([chartw-20,10])\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${charth-20})`)\n .call(d3.axisBottom(x).ticks(width / 80 ).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", chartw-20)\n .attr(\"y\", -4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"RGB value\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"chartw=d3.max([width-500-10,300]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"charth=d3.max([width-500-10,300]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"gt = require(\"geotiff\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"d3=require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"