31:T454,viewof mapmercimage = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); let node = svg.node() node.value = "" svg.append("path") .datum(westCoast) .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("d", d3.geoPath(mercator)); svg.append("circle") .attr("transform", `translate(${nw})`) .attr("r", 5) svg.append("circle") .attr("transform", `translate(${ne})`) .attr("r", 5) svg.append("circle") .attr("transform", `translate(${se})`) .attr("r", 5) svg.append("circle") .attr("transform", `translate(${sw})`) .attr("r", 5) // svg.append("rect") // .attr("width", ne[0] - nw[0]) // .attr("height", sw[1] - nw[1]) // .attr("x", nw[0]) // .attr("y", nw[1]) // .style("fill", "none") // .style("stroke", "orange") svg.append("image") .attr("xlink:href", testImageUrl) .attr("width", ne[0] - nw[0]) .attr("x", nw[0]) .attr("y", nw[1]) .style("stroke", "orange") return node }32:T418,testPixels = { let img = await d3.image(cors(testImageUrl), {crossOrigin: "anonymous"}) let w = img.width let h = img.height let canvas = DOM.canvas(w,h) canvas.width = w canvas.height = h let ctx = canvas.getContext("2d") ctx.drawImage(img,0,0,w,h) let imgData = ctx.getImageData(0,0,w,h).data let pixels = [] console.log(w,h, w*h, imgData.length) let i = 0; for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { // x + y*width is the position for point (x, y) in a flat array of pixel data // multiply by 4 for imageData position as each pixel is 4 (rgba) values i = (x+y*w)*4 // we only need one channel, since R,G and B should all be the same value at each pixel if(imgData[i+3]) { // we check the alpha channel, since that will be 0 if no smoke pixels.push({x, y, v:imgData[i]}) } } } // lets keep the original image size around (though we should know this for all images ahead of time anyway... pixels.width = w pixels.height = h return pixels }33:T445,mapbaytest2canvas = { const canvas = d3.create("canvas").node() canvas.width = width canvas.height = height const ctx = canvas.getContext("2d") let projection = d3.geoAlbersUsa() .fitSize([width, height], california) let path = d3.geoPath(projection) .context(ctx) ctx.strokeStyle = "#111" ctx.lineWidth = 1 ctx.beginPath() path(westCoast) ctx.stroke() let sx = (ne[0] - nw[0]) / testPixels.width let sy = (sw[1] - ne[1]) / testPixels.height // testGeoPoints.forEach(d => { hexdata2.forEach(d => { // ctx.fillStyle = `rgb(${[d.v,d.v,d.v]})` ctx.fillStyle = colorPM1(d.v) // let p = projection([d.lng, d.lat]) let lnglat = mercator.invert([d.x * sx + nw[0], d.y * sy + nw[1]]) // let p = projection([lnglat[0], lnglat[1]]) let a = projection([round(lnglat[0]), round(lnglat[1])]) let p = alb([round(lnglat[0]), round(lnglat[1])]) // if(p) if(p[0] > 0 && p[0] < width && p[1] > 0 && p[1] < height) ctx.fillRect(a[0], a[1], 5, 5) // ctx.fillRect(d.x, d.y, 1,1) }) return canvas }34:[{"id":"6ef5a4c8470bbdb568ce3252fb0d7960a18a128dc7c8bcc32b1f976deb52416083a87b83d145a6652dfb6d0d64922bcf30f5ef3081d292dd94685d0942c8830c","href":"https://static.observableusercontent.com/files/6ef5a4c8470bbdb568ce3252fb0d7960a18a128dc7c8bcc32b1f976deb52416083a87b83d145a6652dfb6d0d64922bcf30f5ef3081d292dd94685d0942c8830c","name":"hexbin-2020082812.csv@2.zip","type":"application/zip","lastModified":1598774319286.668,"size":4960648},{"id":"e95e1ee8da4f81dfff5d512672121e6965d0fe5dd3a21f59bd05d76576fcefd045c8858f142359bc85e998009ff208fdc899278ad223a9a2f84a9cfc05df906d","href":"https://static.observableusercontent.com/files/e95e1ee8da4f81dfff5d512672121e6965d0fe5dd3a21f59bd05d76576fcefd045c8858f142359bc85e998009ff208fdc899278ad223a9a2f84a9cfc05df906d","name":"hexbin-2020083000@2.csv","type":"text/csv","lastModified":1598847413206.378,"size":7080150},{"id":"39e02eaa1d7ceb40f578a9cdf9b82dc7f53e468cede0b505c0ab86a0bbbeed70473373f11145b4b8a61109704f3a898bb12f61b325a11e39a25d933855effdf2","href":"https://static.observableusercontent.com/files/39e02eaa1d7ceb40f578a9cdf9b82dc7f53e468cede0b505c0ab86a0bbbeed70473373f11145b4b8a61109704f3a898bb12f61b325a11e39a25d933855effdf2","name":"hexbin-2020082812.csv","type":"text/csv","lastModified":1598770150090.021,"size":1680762},{"id":"8a5f10da8f8275107ee6858bb0c1ac351290afd479155edd58bcf6b58dc03bf7b4dc69220a015dc81955eb7a1e4680bed7be6b278103f646f98ea7fe85b71b44","href":"https://static.observableusercontent.com/files/8a5f10da8f8275107ee6858bb0c1ac351290afd479155edd58bcf6b58dc03bf7b4dc69220a015dc81955eb7a1e4680bed7be6b278103f646f98ea7fe85b71b44","name":"100m_hourly_202008281200.csv","type":"text/csv","lastModified":1598770616634.687,"size":2323825}] 2f:{"title":"Smoke Forecast Workbook","cells":[{"id":0,"value":"md`# Smoke Forecast Workbook\nTrying to build alternative visualizations based on the [BlueSky air quality models](https://sites.google.com/firenet.gov/wfaqrp-airfire-tools/). The [Websky viewer](https://tools.airfire.org/websky/v2/run/standard/CANSAC-1.33km/2020081800/#viewer) shows the forecast, however I would like to be able to build custom views.\n\nOne idea is to be able to specify a point and look at the projected air quality over the next 24 hours based on the forecast. Another idea would be to get a sense of past forecasts by playing it back over [historical air quality data](https://observablehq.com/@enjalot/purpleair-historical-data).\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`## The data\nThe goal is to turn an image like this: \n

\ninto a programatically accessible array, where each pixel also has a latitude and longitude coordinate we can use.\n\nLooking in the network tab of the Websky viewer I noticed a few requests that seem like they will be helpful. I can tell from the UI that there are multiple \\`runs\\`, one each day at either at midnight or noon. These then have a 72 hour forecast.\n\nSo we want to get the latest available run for California (CANSAC-1.33km).\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"// this can take a while to respond, it gives us a list of URLs where the first is the latest\nbsky = d3.json(cors(\"https://tools.airfire.org/websky/v2/api/runs/standard/CANSAC-1.33km/?\"+new Date()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"forecastUrl = bsky.run_urls[1] // for some reason the latest run often doesn't load, so we use the second most recent","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"// this gives us important metadata about the model and its output\nmetadata = d3.json(cors(`https://tools.airfire.org/websky/v2/api/run/?url=${forecastUrl}`))\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`The first thing I want to do is verify that I can orient myself with the data. The \\`region\\` key looks like a promising way to know where the image is located geospatially. I'll draw points at each corner and the center.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"region = metadata.region","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof mapmercregion = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n let node = svg.node()\n node.value = \"\"\n \n let proj = mercator\n \n svg.append(\"path\")\n .datum(westCoast)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#777\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", d3.geoPath(proj));\n\n svg.append(\"circle\")\n .attr(\"transform\", `translate(${proj([region.west_lon, region.north_lat])})`)\n .attr(\"r\", 5)\n svg.append(\"circle\")\n .attr(\"transform\", `translate(${proj([region.east_lon, region.north_lat])})`)\n .attr(\"r\", 5)\n svg.append(\"circle\")\n .attr(\"transform\", `translate(${proj([region.east_lon, region.south_lat])})`)\n .attr(\"r\", 5)\n svg.append(\"circle\")\n .attr(\"transform\", `translate(${proj([region.west_lon, region.south_lat])})`)\n .attr(\"r\", 5)\n\n \n return node\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"hourly = metadata.overlays[\"100m\"].hourly.GrayColorBar","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"hourly.root_url + \"/\" + hourly.images[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"testImageUrl = hourly.root_url + \"/\" + hourly.images[36]","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`I need to find the real way to project these images on to the map, but for now I will try to naively rescale the image assuming it is projected with Mercator.\n\nThe raw image: \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`Attempting to draw it on the map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"nw = mercator([region.west_lon, region.north_lat])","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"ne = mercator([region.east_lon, region.north_lat])","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"se = mercator([region.east_lon, region.south_lat])","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"sw = mercator([region.west_lon, region.south_lat])","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`## Image processing\nFor my next trick, I'd like to turn each pixel into a PM2.5 value by reverse lookup of the included legend image: \n

\n\nLearned a lot referencing this [diy hillshade](https://observablehq.com/@awoodruff/diy-hillshade) notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"md`Let's scale our image down to the region in our current map projection, and then we can invert the projection to get back lat,lon coordinates.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"pixScale = d3.scaleLinear()\n .domain([0, testPixels.width])\n .range([0, ne[0] - nw[0]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"smallWidth = ne[0] - nw[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"sx = smallWidth / testPixels.width","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"sy = (se[1] - ne[1]) / testPixels.height","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`So each small pixel will be about a quarter of the width of the original pixel, or a sixteenth the size of the original pixel.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"smallTestPixels = testPixels.map(d => {\n // we use the same x and y scale since the image should be preserving its aspect ratio when scaled down\n return {v:d.v, x: sx * d.x, y: sy * d.y }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"testGeoPoints = smallTestPixels.map(d => {\n // invert after translating the image to the north west corner\n let lnglat = mercator.invert([d.x + nw[0],d.y + nw[1]])\n return {v: d.v, lng: lnglat[0], lat: lnglat[1] }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`Ok, so lets render a canvas map and see if the smoke makes sense!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"mapmerccanvas = {\n const canvas = d3.create(\"canvas\").node()\n canvas.width = width\n canvas.height = height\n const ctx = canvas.getContext(\"2d\")\n \n\n let path = d3.geoPath(mercator)\n .context(ctx)\n \n ctx.strokeStyle = \"#111\"\n ctx.lineWidth = 1\n \n ctx.beginPath()\n path(westCoast)\n ctx.stroke()\n \n // ctx.fillStyle = \"grey\"\n // smallTestPixels.forEach(d => {\n // ctx.fillRect(d.x, d.y, 1,1)\n // })\n testGeoPoints.forEach(d => {\n ctx.fillStyle = `rgb(${[d.v,d.v,d.v]})`\n let p = mercator([d.lng, d.lat])\n ctx.fillRect(p[0], p[1], 1,1)\n })\n \n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`Still looks good to my eyeballs! But let's use a different projection since we all know Mercator is evil.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"mapalberscanvas = {\n const canvas = d3.create(\"canvas\").node()\n canvas.width = width\n canvas.height = height\n const ctx = canvas.getContext(\"2d\")\n\n let projection = d3.geoAlbersUsa()\n .fitSize([width, height], california)\n \n let path = d3.geoPath(projection)\n .context(ctx)\n \n ctx.strokeStyle = \"#111\"\n ctx.lineWidth = 1\n \n ctx.beginPath()\n path(westCoast)\n ctx.stroke()\n \n testGeoPoints.forEach(d => {\n ctx.fillStyle = `rgb(${[d.v,d.v,d.v]})`\n let p = projection([d.lng, d.lat])\n ctx.fillRect(p[0], p[1], 1,1)\n })\n \n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"md`Let's remap the colors to use the same PurpleAir color scheme around unhealthy.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"values = testGeoPoints.map(d => d.v)","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"binner = d3.bin()","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"binner(values)","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"md`Cool, it looks like the data only uses a single color per bin in the legend: \n

\nSo we can get a PM2.5 value for each color, then we can use the color scale from the [other notebook](https://observablehq.com/@enjalot/purpleair-historical-data-d3) to use.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"pmLookup = new Map([\n [201, 12], // the first value is the grayscale color, the second is the PM2.5\n [200, 12], \n [175, 35],\n [150, 55],\n [125, 150],\n [100, 250],\n [74, 350],\n [75, 350],\n [24, 500],\n [25, 500]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"testGeoPM = testGeoPoints.map(d => {\n let ret = {...d}\n ret.v = pmLookup.get(d.v)\n return ret\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"colorPM1 = d3.scaleLinear()\n .domain([0,50, 100, 150, 200, 250])\n .range([\"green\", \"yellow\", \"orange\", \"red\", \"maroon\", \"maroon\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"legend({color: colorPM1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"md`Let's also zoom in to the bay like I do [here](https://observablehq.com/@enjalot/purpleair-historical-data)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"mapbaycanvas = {\n const canvas = d3.create(\"canvas\").node()\n canvas.width = width\n canvas.height = height\n const ctx = canvas.getContext(\"2d\")\n\n let projection = d3.geoAlbersUsa()\n .fitSize([width, height], countyExtent)\n \n let path = d3.geoPath(projection)\n .context(ctx)\n \n ctx.strokeStyle = \"#111\"\n ctx.lineWidth = 1\n \n ctx.beginPath()\n path(westCoast)\n ctx.stroke()\n \n // testGeoPoints.forEach(d => {\n testGeoPM.forEach(d => {\n // ctx.fillStyle = `rgb(${[d.v,d.v,d.v]})`\n ctx.fillStyle = colorPM1(d.v)\n let p = projection([d.lng, d.lat])\n ctx.fillRect(p[0], p[1], 1,1)\n })\n \n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"md`OK! Now just to get the processed data for each hourly forecast and play it back...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"hexdata = d3.csvParse(await FileAttachment(\"hexbin-2020082812.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"hexbyhour = d3.group(hexdata, d => d.img)","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"hexhours = Array.from(hexbyhour.keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"viewof hexhour = Scrubber(hexhours, { delay: 100, format: d => d })","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"mapbayhexhourcanvas = {\n const canvas = d3.create(\"canvas\").node()\n canvas.width = width\n canvas.height = height\n const ctx = canvas.getContext(\"2d\")\n\n let projection = d3.geoAlbersUsa()\n .fitSize([width, height], california)\n \n let path = d3.geoPath(projection)\n .context(ctx)\n \n ctx.strokeStyle = \"#111\"\n ctx.lineWidth = 1\n \n ctx.beginPath()\n path(westCoast)\n ctx.stroke()\n \n // testGeoPoints.forEach(d => {\n hexbyhour.get(hexhour).forEach(d => {\n // ctx.fillStyle = `rgb(${[d.v,d.v,d.v]})`\n ctx.fillStyle = colorPM1(d.v)\n let p = projection([d.lng, d.lat])\n ctx.fillRect(p[0], p[1], 1,1)\n })\n \n return canvas\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"testdata = d3.csvParse(await FileAttachment(\"100m_hourly_202008281200.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"binner(testdata.map(d => d.v))","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"mapbaytestcanvas = {\n const canvas = d3.create(\"canvas\").node()\n canvas.width = width\n canvas.height = height\n const ctx = canvas.getContext(\"2d\")\n\n let projection = d3.geoAlbersUsa()\n .fitSize([width, height], california)\n \n // let path = d3.geoPath(projection)\n let path = d3.geoPath(mercator)\n .context(ctx)\n \n ctx.strokeStyle = \"#111\"\n ctx.lineWidth = 1\n \n ctx.beginPath()\n path(westCoast)\n ctx.stroke()\n \n \n let sx = (ne[0] - nw[0]) / testPixels.width\n let sy = (sw[1] - ne[1]) / testPixels.height\n\n \n // testGeoPoints.forEach(d => {\n testdata.forEach(d => {\n // ctx.fillStyle = `rgb(${[d.v,d.v,d.v]})`\n ctx.fillStyle = colorPM1(pmLookup.get(d.v))\n // let p = projection([d.lng, d.lat])\n \n let lnglat = mercator.invert([d.x * sx + nw[0], d.y * sy + nw[1]])\n // let p = projection([lnglat[0], lnglat[1]])\n let p = mercator([lnglat[0], lnglat[1]])\n if(p)\n ctx.fillRect(p[0], p[1], 1, 1)\n // ctx.fillRect(d.x, d.y, 1,1)\n })\n \n return canvas\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"sxx = (ne[0] - nw[0]) / width\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"syy = (sw[1] - ne[1]) / height","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"hexbin2 ={\n let sx = (ne[1] - nw[1]) / width\n let sy = (se[1] - ne[1]) / height\n let hexbin2 = d3.hexbin()\n .extent([[0, 0], [width, height]])\n .radius(1)\n .x(d => d.x)\n .y(d => d.y)\n return hexbin2\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"hexdata2 = hexbin2(testdata).map(d => ({x:d.x, y: d.y, v: d3.median(d, a => a.v)}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"round = function(n) {\n let prec = 1000\n return Math.floor(n * prec) / prec\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":464,"value":"import {zip} from \"@fil/hello-zip-unzip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"// files = zip(await FileAttachment(\"hexbin-2020082812.csv@2.zip\").arrayBuffer(), {\n// base64: false,\n// checkCRC32: true\n// }).files","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"// hexdata3 = d3.csvParse(files[\"data/hexbin-2020082812.csv\"].asText(), d3.autoType)\nhexdata3 = d3.csvParse(await FileAttachment(\"hexbin-2020083000@2.csv\").text(), d3.autoType)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"hexbyhour3 = d3.group(inside3, d => d.i)","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"inside3 = hexdata3.filter(d => {\n let p = alb([d.lng, d.lat])\n return p[0] > 0 && p[0] < width && p[1] > 0 && p[1] < height\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":557,"value":"alb = d3.geoAlbersUsa()\n .fitSize([width, height], countyExtent)","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"viewof hexhour3 = Scrubber(hexbyhour3.keys(), { delay: 200, format: d => d })","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"mapbayhex2canvas = {\n const canvas = d3.create(\"canvas\").node()\n canvas.width = width\n canvas.height = height\n const ctx = canvas.getContext(\"2d\")\n\n let projection = alb\n // let projection = d3.geoAlbersUsa()\n // .fitSize([width, height], california)\n \n let path = d3.geoPath(projection)\n .context(ctx)\n \n ctx.strokeStyle = \"#111\"\n ctx.lineWidth = 1\n \n ctx.beginPath()\n path(westCoast)\n ctx.stroke()\n \n \n hexbyhour3.get(hexhour3).forEach(d => {\n ctx.globalAlpha = 0.5\n ctx.fillStyle = colorPM1(d.pm1)\n let p = projection([d.lng, d.lat])\n // if(p[0] > 0 && p[0] < width && p[1] > 0 && p[1] < height)\n ctx.fillRect(p[0], p[1], 5, 5)\n })\n \n return canvas\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":570,"value":"mapbayhex3canvas = {\n const canvas = d3.create(\"canvas\").node()\n canvas.width = width\n canvas.height = height\n const ctx = canvas.getContext(\"2d\")\n\n let projection = alb\n \n let path = d3.geoPath(projection)\n .context(ctx)\n \n ctx.strokeStyle = \"#111\"\n ctx.lineWidth = 1\n \n ctx.beginPath()\n path(westCoast)\n ctx.stroke()\n \n Array.from(hexbyhour3.keys()).slice(0,10).forEach(i => {\n ctx.globalAlpha = 0.1\n ctx.fillStyle = \"white\"\n ctx.fillRect(0,0,width,height)\n hexbyhour3.get(i).forEach(d => {\n ctx.globalAlpha = 0.5\n ctx.fillStyle = colorPM1(d.pm1)\n let p = projection([d.lng, d.lat])\n // if(p[0] > 0 && p[0] < width && p[1] > 0 && p[1] < height)\n ctx.fillRect(p[0] + i*5, p[1] + i*5, 5, 5)\n })\n })\n \n return canvas\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"alb.scale()","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"alb.translate()","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"import {fullhexbin} from \"@enjalot/purpleair-historical-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"mercator = d3.geoMercator()\n .fitSize([width, height], california)\n// .fitSize([width, height], [[region.west_lon, region.north_lat], [region.east_lon, region.south_lat]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"mercator.scale()","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"mercator.translate()","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"california = statesByName.get(\"California\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"westCoast = ({type: \"FeatureCollection\", features: [ \n statesByName.get(\"California\"), \n statesByName.get(\"Oregon\"), \n statesByName.get(\"Arizona\"),\n statesByName.get(\"Nevada\")\n]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"// Choose a couple counties that define the extent I care about\ncountyExtent = ({\n type: \"FeatureCollection\", \n features: countyShapes.features.filter(d => (\n d.properties.name == \"Marin\" || \n d.properties.name == \"Santa Clara\") && d.id.slice(0,2) == \"06\") \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"countyShapes = topojson.feature(us, us.objects.counties)//.features","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"stateShapes = topojson.feature(us, us.objects.states)//.features","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"statesByName = new Map(stateShapes.features.map(d => [d.properties.name, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"us = d3.json(\"https://unpkg.com/us-atlas@3/counties-10m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"function cors(url) {\n return \"https://cors-anywhere.herokuapp.com/\" + url\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"turf = require('@turf/turf')","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@6\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}