2b:null 2c:["$","title",null,{"children":"DIY live map of Air quality in the US | denisfitz57 | Observable"}] 31:T47e,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: * Good when in the 0—50 range * Moderate: 51—100 * Unhealthy for Sensitive Groups: 101—150 * Unhealthy: 151—200 * Very Unhealthy: 201—300 * Hazardous when over 300.32:T457,// 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 }) ] })33:[{"id":"e34d00a1441938da12b88603d3f2f6012369d8f1bec25ed9fb6db16c0d16d5ea4861bd6066275b8de9cc4ea3db735741008c4245e8142cd10c13ffa4c9741873","href":"https://static.observableusercontent.com/files/e34d00a1441938da12b88603d3f2f6012369d8f1bec25ed9fb6db16c0d16d5ea4861bd6066275b8de9cc4ea3db735741008c4245e8142cd10c13ffa4c9741873","name":"us-counties-10m.json","type":"application/json","lastModified":1686152287532.17,"size":842143}] 2f:{"id":"cdddf6e37da312b8","slug":null,"title":"DIY live map of Air quality in the US","thumbnail":"08d7bb8d70884834cbc74744542fee741c77cbdc1690d6c25b0d1a65fd3cf9da","access_level":"public","create_time":"$D2023-06-07T15:38:07.532Z","update_time":"$D2023-06-07T15:38:07.532Z","view_time":null,"first_public_time":"$D2023-06-07T15:38:07.532Z","has_unpublished_edits":null,"fork":{"id":"a5ce19c757b2ab37","slug":"diy-live-map-of-air-quality-in-the-us","title":"DIY live map of Air quality in the US","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d9aa7e4a48c19e3f","login":"denisfitz57","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2bb1e23c7fef7ee8fb4ee47de058385102cbab27c39acea91bd27c5947942a82","tier":"starter_2024","bio":""},"version":234,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c8a94e75163c4c04","login":"denisfitz57","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2bb1e23c7fef7ee8fb4ee47de058385102cbab27c39acea91bd27c5947942a82","tier":null,"bio":""}],"members":[{"type":"individual","id":"c8a94e75163c4c04","login":"denisfitz57","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2bb1e23c7fef7ee8fb4ee47de058385102cbab27c39acea91bd27c5947942a82","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"map(width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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 page:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"air = d3\n .text(\n \"https://www.airnowapi.org/aq/data/?startDate=2023-06-07T12&endDate=2023-06-07T13¶meters=PM25&BBOX=-130,25,-75,55&dataType=A&format=text/csv&verbose=0&monitorType=0&includerawconcentrations=0&API_KEY=62F6D106-6781-4DC5-8A63-005044B666E2\"\n )\n .then((d) =>\n d3.csvParse(\"lat,lon,date,indicator,PM2.5,??\\n\" + d, d3.autoType)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"### 2. colors\n\nThere is a usual color index for AQI, from green to orange to purple, let’s use it:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"### 3. Make a map of the samples\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"Faceting by date to double check, I realize that the dataset contains two dates with different values; I'll make sure to use only the most recent information.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"Plot.plot({\n projection: \"albers\",\n color,\n marks: [\n Plot.dot(air, {\n x: \"lon\",\n y: \"lat\",\n fill: \"PM2.5\",\n stroke: \"white\",\n fx: \"date\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"visibility().then(() => map(width))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"