31:T4dd,// this is a function because we want to show the map at the top of the page. map = (width) => Plot.plot({ width, projection: "albers", color: { ...color, legend: true }, marks: [ // this creates a path to clip the contour mark. Plot.geo(nation, { render: (i, s, v, d, c, next) => { const g = next(i, s, v, d, c).children[0]; return svg`${g}`; } }), Plot.contour(recent, { x: "lon", y: "lat", fill: "PM2.5", interpolate: "random-walk", blur: 3, thresholds: [0, ...color.domain], stroke: "currentColor", render: (i, s, v, d, c, next) => { const g = next(i, s, v, d, c); g.setAttribute("clip-path", "url(#nation)"); // add clip return g; } }), Plot.geo(nation, { stroke: "currentColor" }), Plot.dot(recent, { x: "lon", y: "lat", fill: "PM2.5", stroke: "currentColor", strokeOpacity: 0.8, strokeWidth: 0.75, tip: true }), Plot.text([timestamp], { frameAnchor: "top-right", fontSize: 16, fontVariant: "tabular-nums" }) ] })32:[{"id":"e34d00a1441938da12b88603d3f2f6012369d8f1bec25ed9fb6db16c0d16d5ea4861bd6066275b8de9cc4ea3db735741008c4245e8142cd10c13ffa4c9741873","href":"https://static.observableusercontent.com/files/e34d00a1441938da12b88603d3f2f6012369d8f1bec25ed9fb6db16c0d16d5ea4861bd6066275b8de9cc4ea3db735741008c4245e8142cd10c13ffa4c9741873","name":"us-counties-10m.json","type":"application/json","lastModified":1686143128010.602,"size":842143},{"id":"c0eda2ac13f456ab9c74050eb1ce08846d15290d09bd849a3c0469f6b3130ae05b7989806a19d64878ddee6359245da4b7494d48d4c2de0b28e8b2aa4d310304","href":"https://static.observableusercontent.com/files/c0eda2ac13f456ab9c74050eb1ce08846d15290d09bd849a3c0469f6b3130ae05b7989806a19d64878ddee6359245da4b7494d48d4c2de0b28e8b2aa4d310304","name":"air.csv","type":"text/csv","lastModified":1686144596566,"size":90888}] 2f:{"title":"DIY live map of Air quality in the US","cells":[{"id":0,"value":"# DIY live map of Air quality in the US\n\nGiven the [news today](https://www.nytimes.com/live/2023/06/07/us/canada-wildfires-air-quality-smoke) I wanted to see how quickly one can find live air quality data and create a DIY map.\n\n**Please check [official resources](https://gispub.epa.gov/airnow/) for any health-related guidance.**\n\nFirst, the map. Below, I’ll walk through the steps to create it with [Observable Plot](/plot/).","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"viewof date = Inputs.date({\n value: new Date(Date.UTC(2023, 5, 7)),\n label: \"Date\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"viewof hour = Inputs.range([0, 23], {\n label: \"hour (UTC)\",\n value: 20,\n step: 1,\n format: d3.format(\"02d\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"map(width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"### 1. Data\n\nI went to airnow.gov, created an account, [read the documentation](https://www.airnow.gov/aqi/aqi-basics/), then generated a URL for a query of active PM2.5 monitors in CSV format, which we can load directly from this URL:","pinned":false,"hidden":false,"mode":"md"},{"id":349,"value":"timestamp = d3.min([\n `${date.toISOString().slice(0, 11)}${d3.format(\"02d\")(hour)}`,\n new Date(+new Date() - 3600 * 1000).toISOString().slice(0, 13)\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"// Note: initially I had a unique URL (a fixed datetime), but for a live map it's better to check\n// the API against the _current_ time. Once you do that, it’s a simple change to add a date picker\n// and a range slider for the hour. The line below ensures that we don’t look “in the future”. And\n// indeed we don’t want the current time precisely, because the API can be a few minutes late—so\n// we’ll check one hour before the current time.\nurl = `https://www.airnowapi.org/aq/data/?startDate=${timestamp}&endDate=${timestamp}¶meters=PM25&BBOX=-130,25,-65,55&dataType=A&format=text/csv&API_KEY=${key}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"function getData(url) {\n return d3\n .text(url)\n .then((d) =>\n d3.csvParse(\"lat,lon,date,indicator,PM2.5,??\\n\" + d, d3.autoType)\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"air = cachedData(url)","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"// This function wraps the logic that fetches & parses the data with a cache, to animate the map\n// a bit faster when we play with the date/time controls.\ncachedData = {\n const M = new Map();\n return async function (url) {\n if (M.has(url)) return Promise.resolve(M.get(url));\n const c = await getData(url);\n M.set(url, c);\n return c;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"// Here’s a copy, in case the API stops working\n// air = FileAttachment(\"air.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"### 2. colors\n\nThere is a usual color index for AQI, from green to orange to purple, with specific ranges:","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"color = ({\n label: \"PM2.5\",\n type: \"threshold\",\n domain: [50, 100, 150, 200, 300],\n range: [\n \"rgb(156, 216, 78)\", // Good\n \"rgb(250, 207, 57)\", // Moderate\n \"rgb(249, 144, 73)\", // Unhealthy for Sensitive Groups\n \"rgb(246, 94, 95)\", // Unhealthy\n \"rgb(160, 112, 182)\", // Very Unhealthy\n \"rgb(160, 106, 123)\" // Hazardous\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"A bit of jargon: the parameter **PM2.5** is the level of fine particles in the air (in μg/m3)—tiny particles or droplets smaller than 2.5 microns. **AQI** is the Air quality index, computed from this and other parameters. It is considered:\n* Good when in the 0—50 range\n* Moderate: 51—100\n* Unhealthy for Sensitive Groups: 101—150\n* Unhealthy: 151—200\n* Very Unhealthy: 201—300\n* Hazardous when over 300.","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"### 3. Make a map of the samples\n","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"Plot.plot({\n color,\n marks: [\n Plot.dot(air, {\n x: \"lon\",\n y: \"lat\",\n fill: \"PM2.5\",\n r: 4,\n stroke: \"white\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"Faceting by date to double check, I realized that the dataset contained two timestamps with different values. This is not the case anymore, now that I’ve added a variable datetime in the URL—but a good reminder to make sure to use only the most recent information, which I do in the “recent” cell, below.","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"// Plot.dot(air, { x: \"lon\", y: \"lat\", fill: \"PM2.5\", fx: \"date\" }).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"// Group by date, and return the group with the largest key.\nrecent = d3\n .greatest(\n d3.group(air, (d) => d.date),\n (d) => d[0]\n )[1]\n .filter((d) => d[\"PM2.5\"] > 0) // remove the points with value -999","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"### 4. make a better map\n\nI'm adding contours, and the shape of the (contiguous) US. I also use that shape to clip the contours (a bit of a hack for now, but I hope that it’ll soon be a supported feature in Plot). I also add interactive tips. And I believe… that’s it. Stay safe! And let me know if you have questions or suggestions.","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"visibility().then(() => map(width))","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"key = \"62F6D106-6781-4DC5-8A63-005044B666E2\" // API key","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"---\n*Thanks to Bill Mill and Paul Murray for suggestions!*","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}