2b:null 2c:["$","title",null,{"children":"Pennsylvania Air Quality Index | Paul Walker | Observable"}] 31:T66b,map = { let state = { active: "Philadelphia" } const width = 960; const height = 500; const scale_thousand = 1000; const centre_county = [-77.82, 40.91]; const projection = d3.geoMercator() .scale([scale_thousand * 8]) .center(centre_county); const path = d3.geoPath() .projection(projection); const json = await d3.json("https://data.pjwalker.net/datasets/pa_counties.json") const svg_map_pa = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("z-index", "-1") .style("width", "100%") .style("height", "auto"); svg_map_pa.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .attr("fill", "#ADADAD") .attr("stroke-width", .5) .attr("stroke", "#f5f5f5") const points = svg_map_pa.selectAll('.points') .data(aqData) .enter() .append("g") .attr('class', '.points') .append("circle") .attr("r", d => (d.city === selection) ? 24 : 14) .attr("opacity", d => (d.city === selection) ? ".85" : ".5") .attr("style", "cursor:pointer") .attr("fill", d => aqScale(d.current.pollution.aqius)) .attr("stroke", d => (d.city === selection) ? 'white' : '') .attr("stroke-width", d => (d.city === selection) ? '3px' : '') .attr("transform", d => { return `translate(${projection(d.location.coordinates)})` }) .on('click', e => { console.log("EEE", e) mutable selection = e.city }) return svg_map_pa.node(); }32:[] 2f:{"id":"624db165edd9d31b","slug":"pa-daily-air-quality-map","title":"Pennsylvania Air Quality Index","thumbnail":"036b670dbfe139abddc8235461a66f3fbc5da507c8c2b72aba7af61681d2c7af","access_level":"public","create_time":"$D2019-03-23T19:23:40.376Z","update_time":"$D2019-04-14T14:17:07.343Z","view_time":null,"first_public_time":"$D2019-03-24T14:03:15.096Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b43200430bc7c31d","login":"starsinmypockets","name":"Paul Walker","avatar_url":"https://avatars-next.observableusercontent.com/b153f9b42706eec90529d92742648d119b77f3ef13b1ff692ee2f323bc737e77","tier":"starter_2024"},"version":491,"publish_version":491,"role":null,"authored":false,"authors":[{"type":"individual","id":"56621cae8067d7a9","login":"starsinmypockets","name":"Paul Walker","avatar_url":"https://avatars-next.observableusercontent.com/b153f9b42706eec90529d92742648d119b77f3ef13b1ff692ee2f323bc737e77","tier":null}],"members":[{"type":"individual","id":"56621cae8067d7a9","login":"starsinmypockets","name":"Paul Walker","avatar_url":"https://avatars-next.observableusercontent.com/b153f9b42706eec90529d92742648d119b77f3ef13b1ff692ee2f323bc737e77","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Pennsylvania Air Quality Index","cells":[{"id":0,"value":"md`# Pennsylvania Air Quality Index`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":287,"value":"html`

Sampled ${new Date().toDateString()}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":413,"value":"html`(Data from https://www.airvisual.com/air-pollution-data-api)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"{\n const data = aqData.find(d => d.city === selection);\n const aqius = data.current.pollution.aqius\n const color = aqScale(aqius)\n //return data\n return html`\n

${aqius}

\n AQI (US)\n

Primary Pollutant: ${data.current.pollution.mainus}

${selection}

\n \n`\n //, MAINUS: ${data.current.pollution.maincn}, AQICN: ${data.current.pollution.aqicn}, MAINCN: ${data.current.pollution.maincn}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":484,"value":"md`## Notes / Disclaimer: \nI built this a as a toy implementation to try out some of the observablehq functionality including loading libraries, third-party data, and accessing external APIs. The data is loaded once daily from an API. If you need real-time weather data please consider using another service. If you have any comments or suggestions, leave them here. If you want to see more oh my work visit https://pjwalker.net`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":283,"value":"md`Following are variables used to build the map, above. To view the code for the map, or the other variables in this appendix, click the elipsis and press edit.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":305,"value":"mutable selection = \"Philadelphia\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":464,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"aqData = {\n const raw = await d3.json(\"https://data.pjwalker.net/paq/data\")\n return raw.map(row => JSON.parse(row).data)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"aqScale = (n) => {\n if (n >= 0 && n <= 50) return 'green';\n if (n >= 51 && n <= 100) return 'yellow';\n if (n >= 101 && n <= 150) return 'orange';\n if (n >= 151 && n <= 200) return 'red';\n if (n >= 201 && n <= 300) return 'purple';\n if (n > 300) return 'black'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"