2f:T457, ${` ${date_options[selected_date_idx].toLocaleString()} `} 30:T2200,scale_values = { // https://observablehq.com/d/6f7159f1fd15c1c9 // obtained from clicking the gradient (see linked notebook), which javascript copies all the color values! lazy, but effective. :shrug: return [ "#6e40aa", "#6d41ab", "#6d41ad", "#6d42ae", "#6c43af", "#6c43b0", "#6b44b2", "#6b45b3", "#6a46b4", "#6a46b5", "#6a47b7", "#6948b8", "#6849b9", "#684aba", "#674abb", "#674bbd", "#664cbe", "#664dbf", "#654ec0", "#654fc1", "#6450c2", "#6350c3", "#6351c4", "#6252c5", "#6153c6", "#6154c7", "#6055c8", "#5f56c9", "#5f57ca", "#5e58cb", "#5d59cc", "#5c5acd", "#5c5bce", "#5b5ccf", "#5a5dd0", "#595ed1", "#595fd1", "#5860d2", "#5761d3", "#5662d4", "#5663d5", "#5564d5", "#5465d6", "#5366d7", "#5267d7", "#5168d8", "#5169d9", "#506ad9", "#4f6bda", "#4e6cda", "#4d6ddb", "#4c6edb", "#4b70dc", "#4b71dc", "#4a72dd", "#4973dd", "#4874de", "#4775de", "#4676df", "#4577df", "#4479df", "#447adf", "#437be0", "#427ce0", "#417de0", "#407ee0", "#3f80e1", "#3e81e1", "#3d82e1", "#3d83e1", "#3c84e1", "#3b86e1", "#3a87e1", "#3988e1", "#3889e1", "#378ae1", "#378ce1", "#368de1", "#358ee1", "#348fe1", "#3390e1", "#3292e1", "#3293e1", "#3194e0", "#3095e0", "#2f96e0", "#2e98e0", "#2e99df", "#2d9adf", "#2c9bdf", "#2b9cde", "#2b9ede", "#2a9fdd", "#29a0dd", "#29a1dd", "#28a2dc", "#27a4dc", "#26a5db", "#26a6db", "#25a7da", "#25a8d9", "#24aad9", "#23abd8", "#23acd8", "#22add7", "#22aed6", "#21afd5", "#21b1d5", "#20b2d4", "#20b3d3", "#1fb4d2", "#1fb5d2", "#1eb6d1", "#1eb8d0", "#1db9cf", "#1dbace", "#1dbbcd", "#1cbccc", "#1cbdcc", "#1cbecb", "#1bbfca", "#1bc0c9", "#1bc2c8", "#1ac3c7", "#1ac4c6", "#1ac5c5", "#1ac6c4", "#1ac7c2", "#1ac8c1", "#19c9c0", "#19cabf", "#19cbbe", "#19ccbd", "#19cdbc", "#19cebb", "#19cfb9", "#19d0b8", "#19d1b7", "#19d2b6", "#19d3b5", "#1ad4b4", "#1ad5b2", "#1ad5b1", "#1ad6b0", "#1ad7af", "#1bd8ad", "#1bd9ac", "#1bdaab", "#1bdbaa", "#1cdba8", "#1cdca7", "#1cdda6", "#1ddea4", "#1ddfa3", "#1edfa2", "#1ee0a0", "#1fe19f", "#1fe29e", "#20e29d", "#20e39b", "#21e49a", "#22e599", "#22e597", "#23e696", "#24e795", "#24e793", "#25e892", "#26e891", "#27e98f", "#27ea8e", "#28ea8d", "#29eb8c", "#2aeb8a", "#2bec89", "#2cec88", "#2ded87", "#2eed85", "#2fee84", "#30ee83", "#31ef82", "#32ef80", "#33f07f", "#34f07e", "#35f07d", "#37f17c", "#38f17a", "#39f279", "#3af278", "#3bf277", "#3df376", "#3ef375", "#3ff374", "#41f373", "#42f471", "#43f470", "#45f46f", "#46f46e", "#48f56d", "#49f56c", "#4bf56b", "#4cf56a", "#4ef56a", "#4ff669", "#51f668", "#52f667", "#54f666", "#55f665", "#57f664", "#59f664", "#5af663", "#5cf662", "#5ef661", "#5ff761", "#61f760", "#63f75f", "#64f75f", "#66f75e", "#68f75d", "#6af75d", "#6bf65c", "#6df65c", "#6ff65b", "#71f65b", "#73f65a", "#74f65a", "#76f659", "#78f659", "#7af659", "#7cf658", "#7ef658", "#80f558", "#81f558", "#83f557", "#85f557", "#87f557", "#89f557", "#8bf457", "#8df457", "#8ff457", "#91f457", "#93f457", "#94f357", "#96f357", "#98f357", "#9af357", "#9cf257", "#9ef258", "#a0f258", "#a2f258", "#a4f158", "#a6f159", "#a8f159", "#aaf159", "#abf05a", "#adf05a", "#aff05b" ]; // oranges // return [ // "#fff5eb", // "#fff5ea", // "#fff4e9", // "#fff4e8", // "#fff3e7", // "#fff3e6", // "#fff2e6", // "#fff2e5", // "#fff1e4", // "#fff1e3", // "#fff0e2", // "#fff0e1", // "#ffefe0", // "#ffefdf", // "#ffeede", // "#ffeedd", // "#feeddc", // "#feeddb", // "#feecda", // "#feecd9", // "#feebd8", // "#feebd7", // "#feead6", // "#feead5", // "#fee9d4", // "#fee9d3", // "#fee8d2", // "#fee8d1", // "#fee7d0", // "#fee6cf", // "#fee6ce", // "#fee5cc", // "#fee5cb", // "#fee4ca", // "#fee4c9", // "#fee3c8", // "#fee2c7", // "#fee2c5", // "#fee1c4", // "#fee1c3", // "#fee0c2", // "#fedfc0", // "#fedfbf", // "#fedebe", // "#feddbd", // "#feddbb", // "#fedcba", // "#fedbb9", // "#fedab7", // "#fddab6", // "#fdd9b4", // "#fdd8b3", // "#fdd8b2", // "#fdd7b0", // "#fdd6af", // "#fdd5ad", // "#fdd4ac", // "#fdd4aa", // "#fdd3a9", // "#fdd2a7", // "#fdd1a6", // "#fdd0a4", // "#fdd0a3", // "#fdcfa1", // "#fdcea0", // "#fdcd9e", // "#fdcc9d", // "#fdcb9b", // "#fdca99", // "#fdc998", // "#fdc896", // "#fdc795", // "#fdc693", // "#fdc591", // "#fdc490", // "#fdc38e", // "#fdc28d", // "#fdc18b", // "#fdc089", // "#fdbf88", // "#fdbe86", // "#fdbd84", // "#fdbc83", // "#fdbb81", // "#fdba7f", // "#fdb97e", // "#fdb87c", // "#fdb77a", // "#fdb679", // "#fdb577", // "#fdb475", // "#fdb374", // "#fdb272", // "#fdb171", // "#fdb06f", // "#fdaf6d", // "#fdae6c", // "#fdad6a", // "#fdac69", // "#fdab67", // "#fdaa65", // "#fda964", // "#fda762", // "#fda661", // "#fda55f", // "#fda45e", // "#fda35c", // "#fda25b", // "#fda159", // "#fda058", // "#fd9f56", // "#fd9e55", // "#fd9d53", // "#fd9c52", // "#fd9b50", // "#fd9a4f", // "#fc994d", // "#fc984c", // "#fc974a", // "#fc9649", // "#fc9548", // "#fc9346", // "#fc9245", // "#fc9143", // "#fc9042", // "#fb8f40", // "#fb8e3f", // "#fb8d3e", // "#fb8c3c", // "#fb8b3b", // "#fa8a3a", // "#fa8938", // "#fa8837", // "#fa8736", // "#fa8534", // "#f98433", // "#f98332", // "#f98230", // "#f8812f", // "#f8802e", // "#f87f2c", // "#f77e2b", // "#f77d2a", // "#f77b29", // "#f67a27", // "#f67926", // "#f57825", // "#f57724", // "#f57623", // "#f47522", // "#f47420", // "#f3731f", // "#f3721e", // "#f2701d", // "#f26f1c", // "#f16e1b", // "#f16d1a", // "#f06c19", // "#f06b18", // "#ef6a17", // "#ef6916", // "#ee6815", // "#ed6714", // "#ed6614", // "#ec6513", // "#ec6312", // "#eb6211", // "#ea6110", // "#ea6010", // "#e95f0f", // "#e85e0e", // "#e85d0e", // "#e75c0d", // "#e65b0c", // "#e55a0c", // "#e4590b", // "#e4580b", // "#e3570a", // "#e25609", // "#e15509", // "#e05408", // "#df5308", // "#de5208", // "#dd5207", // "#dc5107", // "#db5006", // "#da4f06", // "#d94e06", // "#d84d05", // "#d74c05", // "#d64c05", // "#d54b04", // "#d44a04", // "#d24904", // "#d14804", // "#d04804", // "#cf4703", // "#cd4603", // "#cc4503", // "#cb4503", // "#c94403", // "#c84303", // "#c74303", // "#c54203", // "#c44103", // "#c24102", // "#c14002", // "#bf3f02", // "#be3f02", // "#bd3e02", // "#bb3e02", // "#ba3d02", // "#b83d02", // "#b73c02", // "#b53b02", // "#b43b02", // "#b23a03", // "#b13a03", // "#af3903", // "#ae3903", // "#ac3803", // "#ab3803", // "#aa3703", // "#a83703", // "#a73603", // "#a53603", // "#a43503", // "#a33503", // "#a13403", // "#a03403", // "#9f3303", // "#9d3303", // "#9c3203", // "#9b3203", // "#993103", // "#983103", // "#973003", // "#953003", // "#942f03", // "#932f03", // "#922e04", // "#902e04", // "#8f2d04", // "#8e2d04", // "#8d2c04", // "#8b2c04", // "#8a2b04", // "#892b04", // "#882a04", // "#862a04", // "#852904", // "#842904", // "#832804", // "#812804", // "#802704", // "#7f2704" // ]; }31:T6d6,dropPins = (map) => { // clearAllMarkers() function htmlToElement(html) { var template = document.createElement("template"); html = html.trim(); template.innerHTML = html; return template.content.firstChild; } selected_sensors.map((sensor, i) => { const rawValue = data[i]?.[metric.field]; const metricValue = is_log_mode ? Math.log(rawValue) : rawValue; const hasData = Number.isFinite(metricValue); const scalePercentage = hasData ? Math.min(metricValue / max_value, 1) : null; const color_idx = Math.min( Math.max(0, Math.floor(scalePercentage * 256)), 255 ); const color = scalePercentage ? scale_values[color_idx] : "none"; const d = radius * 2; const el = htmlToElement(` `); el.addEventListener("mouseover", () => { el.style.cursor = "pointer"; }); el.addEventListener("mouseout", () => { el.style.cursor = ""; }); new mapboxgl.Marker({ element: el }) .setLngLat([sensor.longitude, sensor.latitude]) .setPopup( new mapboxgl.Popup({ offset: 25 }) // add popups .setHTML(`

${metric.name}	${metricValue ? metricValue.toFixed(2) : "NO DATA"}
sensor	${sensor.name}

`) ) .addTo(map); }); }32:[] 2d:{"title":"PCA - PurpleAir Aggregated Snapshots","cells":[{"id":0,"value":"# PCA - PurpleAir Aggregated Snapshots","pinned":false,"hidden":false,"mode":"md"},{"id":1132,"value":"viewof sensor_filter = Inputs.select([\"All\", \"Outdoor Only\", \"Indoor Only\"], {\n label: \"Sensor Filter\",\n value: \"Outdoor Only\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"viewof selected_sensors = Inputs.select(\n sensors.filter((s) =>\n sensor_filter === \"All\"\n ? true\n : sensor_filter === \"Outdoor Only\"\n ? s.is_outdoor\n : !s.is_outdooor\n ),\n {\n format: (s) =>\n `${s.name} (id: ${s.id} / ${s.is_outdoor ? \"outdoor\" : \"indoor\"})`,\n multiple: true,\n value: sensors.filter((s) =>\n s.name.match(/(Clark College|Concordia|Council)/)\n ),\n label: \"Select sensors\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"viewof map = {\n const center_portland = [-122.66155, 45.54846];\n let container = html`

`;\n yield container;\n let map = new mapboxgl.Map({\n container,\n center: center_portland,\n zoom: 10,\n style: \"mapbox://styles/mapbox/light-v10\"\n });\n map.on(\"load\", () => {\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n dropPins(map);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"levels_indicator = ramp(\n \"Cool\",\n `${metric.name} 0 - ${max_value.toFixed(1)}${\n is_log_mode ? \" [log(value)]\" : \"\"\n }`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"$2f","pinned":false,"hidden":false,"mode":"html"},{"id":278,"value":"viewof binBy = Inputs.radio([\"Yearly\", \"Monthly\", \"Weekly\", \"Daily\", \"Hourly\"], {\n label: \"Group by:\",\n value: \"Daily\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"**warning**: Data is fetched in 14 day intervals. Expect holes in data as recent as the last two weeks.","pinned":false,"hidden":false,"mode":"md"},{"id":766,"value":"viewof metric = Inputs.select(supported_metrics, {label: \"Select metric\", format: f => f.name})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"viewof is_dynamic_range_mode = Inputs.toggle({\n label: \"Use dynamic range color scale\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"viewof is_log_mode = Inputs.toggle({label: \"Logarithmic scaling\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"viewof max_value_slider = Inputs.range([0, 200], {\n label: \"Max legend value\",\n step: 1,\n value: 100,\n disabled: is_dynamic_range_mode\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"viewof radius = Inputs.range([1, 100], { label: \"Radius\", step: 1, value: 6 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"# Appendix\n","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"table_name = `observation_purpleair_${binBy.toLowerCase()}_agg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"get_sensor_data_query_string = `\nquery GetObservations(\n $sensor_id: Int!, \n $startDate: timestamptz!, \n $endDate: timestamptz!,\n $isPm1: Boolean = false,\n $isPm2: Boolean = false\n) {\n ${table_name}(\n where: {\n timestamp: {_gte: $startDate, _lt: $endDate}, \n sensor_id: {_eq: $sensor_id}\n },\n limit: 500000,\n order_by: {timestamp: asc}\n ) {\n timestamp\n sensor_id\n pm_1_atm: avg_pm_1_atm @include(if: $isPm1)\n pm_2_5_atm: avg_pm_2_5_atm @include(if: $isPm2)\n # temperature_f: avg_temperature_f\n # pm_2_5_cf: avg_pm_2_5_cf\n # humidity: avg_humidity\n }\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"get_sensors_query_string = `\nquery GetSensors {\n sensor(distinct_on: name, order_by: {name: asc}) {\n name\n id\n latitude\n longitude\n description\n is_outdoor\n }\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"graphQL = (operationsDoc, operationName, variables) =>\n fetch(\"https://pca.cdaringe.com/v1/graphql\", {\n method: \"POST\",\n body: JSON.stringify({\n query: operationsDoc,\n variables,\n operationName\n }),\n headers: {\n \"content-type\": \"application/json\"\n }\n }).then(async (r) => {\n if (r.ok) {\n const json = await r.json();\n const errors = json.error || json.errors;\n if (errors) {\n throw new Error(JSON.stringify(errors));\n }\n return json;\n }\n throw new Error(r.statusText);\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"sensors = await graphQL(get_sensors_query_string).then(r => {\n if (r.errors?.length) throw new Error(JSON.stringify(r.errors))\n return r.data.sensor\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"selected_sensors","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"selected_sensor_datas = {\n const startDate = date_options[selected_date_idx].toISOString();\n const endDateRaw = date_options[selected_date_idx + 1];\n const endDate = endDateRaw\n ? endDateRaw.toISOString()\n : new Date().toISOString();\n return Promise.all(\n selected_sensors.map((sensor) =>\n graphQL(get_sensor_data_query_string, \"GetObservations\", {\n sensor_id: sensor.id,\n startDate:\n binBy === \"Hourly\" ? startDate : startDate.replace(/T.*/, \"\"),\n endDate: binBy === \"Hourly\" ? endDate : endDate.replace(/T.*/, \"\"),\n isPm1: metric.field.includes(\"pm_1\"),\n isPm2: metric.field.includes(\"pm_2\")\n })\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"selected_sensor_datas_sample = {\n return selected_sensor_datas[0].data[table_name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"data = {\n return selected_sensor_datas.reduce((acc, sd, i) => {\n const [agg_value, ...rest] = sd.data[table_name] ?? [];\n if (rest?.length > 1) {\n throw new Error(\"too many agg values!\");\n }\n acc.push(agg_value);\n return acc;\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1154,"value":"max_value_observations = Math.max(...data.map((it) => {\n const value = it?.[metric.field] ?? 0\n return is_log_mode ? Math.log(value) : value; \n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":" opaque_pin = 0.3","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"pinsBySensor = new Map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"togglePinAppearance = (sensor) => {\n const el = pinsBySensor.get(sensor);\n el.style.opacity = el.style.opacity < 1 ? 1 : opaque_pin;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.7.0\");\n if (!gl.accessToken) {\n gl.accessToken = \"pk.eyJ1IjoicGR4Y2xlYW5haXIiLCJhIjoiY2t6dXB0NGFwMXEzeDJ3cngwOGthN3NqdCJ9.6x1IBZCKr2TwzoKJ9sJGfQ\";\n const href = await require.resolve(\"mapbox-gl@2.7.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"supported_metrics = [\n { name: \"PM2.5 (atm)\", field: \"pm_2_5_atm\" },\n { name: \"PM1 (atm)\", field: \"pm_1_atm\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"dateFns = {\n const mod = await import(\"https://cdn.skypack.dev/date-fns@v1.9.0\").then(\n (mod) => {\n return mod.default;\n }\n );\n return mod;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"date_options = {\n const now = new Date();\n const numYears = 5; // max years to generate\n const numMonths = numYears * 36;\n const numWeeks = numMonths * 4;\n const numDays = numWeeks * 30;\n const { n, start } =\n binBy === \"Yearly\"\n ? { n: numYears, start: dateFns.startOfYear(now) }\n : binBy === \"Monthly\"\n ? { n: numMonths, start: dateFns.startOfMonth(now) }\n : binBy === \"Weekly\"\n ? { n: numWeeks, start: dateFns.startOfWeek(now) }\n : binBy === \"Daily\"\n ? { n: numDays, start: dateFns.startOfDay(now) }\n : { n: numDays, start: dateFns.startOfHour(now) };\n\n return [...new Array(n)]\n .map((_, i) => {\n const d = new Date(start);\n return binBy === \"Yearly\"\n ? dateFns.subYears(d, i + 1)\n : binBy === \"Monthly\"\n ? dateFns.subMonths(d, i + 1)\n : binBy === \"Weekly\"\n ? dateFns.subWeeks(d, i + 1)\n : binBy === \"Daily\"\n ? dateFns.subDays(d, i + 1)\n : dateFns.subHours(d, i + 1);\n })\n .reverse();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"mutable selected_date_idx = date_options.length - 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"last_date_idx = Math.max(0, date_options.length - 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"import { Oranges, Cool, ramp } from \"6f7159f1fd15c1c9\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"max_value = is_dynamic_range_mode ? max_value_observations : max_value_slider","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1179,"value":"nav_scalars = {\n return {\n Yearly: [1,1,1],\n Monthly: [1, 2, 12],\n Weekly: [1, 4, 12 * 4],\n Daily: [1, 7, 30 * 2],\n Hourly: [1, 24, 24 * 30]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}