31:T967,data = { // Bin observations on user-selected granularity var ms_per_s = 1000 var ms_per_m = ms_per_s * 60 var ms_per_h = ms_per_m * 60 var ms_per_d = ms_per_h * 24 var ms_per_w = ms_per_d * 7 var ms_locale_pst_offset = 0 /* ms_per_h * 8 */ const bin_width = binBy === "Hourly" ? ms_per_h : binBy === "Daily" ? ms_per_d : ms_per_w const binsBySensorIdx = new Map(); const getBinsByMs = (idx) => { const binsByMs = binsBySensorIdx.get(idx) if (binsByMs) { return binsByMs } else { binsBySensorIdx.set(idx, new Map()) return binsBySensorIdx.get(idx) } } const getObservationsBin = (timestamp, sensor_idx) => { const binsByMs = getBinsByMs(sensor_idx) const time_ms = new Date(timestamp).getTime() const overshoot = (time_ms - ms_locale_pst_offset) % bin_width const bin_ms = time_ms - overshoot let bin = binsByMs.get(bin_ms) if (bin) { return bin } else { binsByMs.set(bin_ms, []) return binsByMs.get(bin_ms); } }; selected_sensor_datas.forEach((sd, selected_sensor_idx) => { getBinsByMs(selected_sensor_idx); // effect -- hydrate bins sd.data.observation_purpleair.forEach(it => { const { timestamp, ...observation } = it; const bin = getObservationsBin(timestamp, selected_sensor_idx) bin.push(observation) }); }); // aggregate const aggregateBin = (bin) => { const keys = ["pm_1_atm", "pm_2_5_atm", "pm_2_5_cf", "humidity", "temperature_f"]; const summed = bin.reduce((acc, curr) => { for (const key of keys) { acc[key] = curr[key] + (acc[key] || 0) } return acc }, {}) const avgs = {...summed} for (const key of keys) { avgs[key] = summed[key] / bin.length } return avgs } const aggregateSensor = (sensorData, sensor_name) => [...sensorData.entries()] .sort(([msA], [msB]) => msA > msB ? 1 : -1) .map(([ms,bin]) => { return { date: new Date(ms), ...aggregateBin(bin), sensor_name } }); const result = [...binsBySensorIdx.entries()] .map(([selected_sensor_idx, valuesByTimestamp]) => [selected_sensor_idx, aggregateSensor(valuesByTimestamp, selected_sensors[selected_sensor_idx].name)] ) .sort(([i], [j]) => i > j ? 1 : -1) .map(([,aggregatedSensorData]) => aq.from(aggregatedSensorData)) return result }32:T6f5,dropPins = (map) => { // clearAllMarkers() function htmlToElement(html) { var template = document.createElement('template'); html = html.trim(); template.innerHTML = html; return template.content.firstChild; } sensors.map(sensor => { const el = htmlToElement(``); el.style.width = `22px`; el.style.height = `22px`; const path = el.childNodes[0] path.style.strokeWidth = 2; pinsBySensor.set(sensor, el); el.addEventListener('click', () => { const isInSelectedSet = selected_sensors.find(s => s === sensor); togglePinAppearance(sensor); // if (isInSelectedSet) { // selected_sensors = selected_sensors.filter(s => s !== sensor) ; // } else { // selected_sensors = [...selected_sensors, sensor]; // } }); el.addEventListener('mouseover', () => { el.style.cursor = 'pointer' }); el.addEventListener('mouseout', () => { el.style.cursor = '' }); new mapboxgl.Marker({ element: el }) .setLngLat([sensor.longitude, sensor.latitude]) .addTo(map); el.style.opacity = opaque_pin; }); selected_sensors.forEach(sensor => togglePinAppearance(sensor)); }33:[] 2f:{"title":"@legacy PCA - PurpleAir PM2.5","cells":[{"id":0,"value":"# @legacy PCA - PurpleAir PM2.5","pinned":false,"hidden":false,"mode":"md"},{"id":715,"value":"### Welcome\n\nThe PurpleAir multi-site grapher is still being actively developed. Please see the below warnings.\n\n#### Warnings\n\n- Map support is still in active development. clicking it will likely do nothing. please do not interact with the map :)","pinned":false,"hidden":false,"mode":"md"},{"id":394,"value":"viewof selected_sensors = Inputs.select(\n sensors, \n {\n format: s => `${s.name} (id: ${s.id})`, \n multiple: true,\n value: sensors.filter(s => s.name.match(/(Concordia|Council)/)),\n label: \"Select sensors\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"\nviewof 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":3,"value":"viewof start = Inputs.date({label: \"Start Date\", value: \"2022-02-08\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof end = Inputs.date({label: \"End Date\", value: \"2022-03-08\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"{\n const messages = [];\n const err = msg => messages.push(`⚠️ ${msg}`);\n const ok = msg => messages.push(`✅ ${msg}`);\n\n if (selected_sensor_datas.some(sensor_response => sensor_response.data.observation_purpleair.length >= MAX_QUERY_RECORDS_COUNT)) {\n return warning({ title: \"Too much data\", msg: `For at least one sensor, the query exceeded the max of ${MAX_QUERY_RECORDS_COUNT} data points. Charts may be truncated.` })\n }\n \n // date range\n if (start_end_interval_days > 90) {\n err(\"Please select a range of <90 days\");\n } else if (start_end_interval_days < 0) {\n err(\"end date must be after start date\");\n } else {\n ok(`${Math.floor(start_end_interval_days)} day range`);\n }\n\n // available datas\n data.forEach((dt, i) => {\n if (dt.size === 0) {\n err(`Sensor \"${selected_sensors[i]?.name}\" has no data for the specified range`);\n }\n });\n return messages.join(\"\\n\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"viewof binBy = Inputs.radio([\"Hourly\", \"Daily\", \"Weekly\"], {label: \"Group by:\", value: \"Daily\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"viewof metric = Inputs.select(supported_metrics, {label: \"Select metric\", format: f => f.name})","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"html`

${metric.name}, aggregated

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"Plot.plot({\n marginBottom: 140,\n color: {\n legend: true\n },\n y: {\n grid: true,\n label: metric.name\n },\n x: {\n grid: true,\n tickFormat: d3.utcFormat(\"%e %b %y\"),\n tickRotate: -60,\n label: \"Date\"\n },\n marks: [\n Plot.frame(),\n Plot.ruleY([0]),\n ...data.map((sensor_data) => {\n return Plot.line(\n sensor_data,\n {\n y: metric.field,\n x: \"date\",\n stroke: \"sensor_name\",\n // stroke: `#${sensor_idx}${sensor_idx}${sensor_idx}${sensor_idx}${sensor_idx}${sensor_idx}`,\n // thresholds: binBy === \"Daily\" ? d3.utcDay : d3.utcWeek,\n // curve: \"natural\"\n // stroke: \"VOC, ppm\"\n }\n )\n }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"#### Sample","pinned":false,"hidden":false,"mode":"md"},{"id":727,"value":"viewof inspect_sensor = Inputs.select(selected_sensors, {label: \"Inspect data\", format: s => s.name})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"viewof table_input = Inputs.table(data[selected_sensors.findIndex(s => s === inspect_sensor)])","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":true,"hidden":false,"mode":"ojs"},{"id":793,"value":"MAX_QUERY_RECORDS_COUNT = 20_000","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"get_sensor_data_query_string = `\nquery GetObservations($sensor_id: String!, $startDate: timestamptz!, $endDate: timestamptz!) {\n observation_purpleair(\n where: {\n timestamp: {_gte: $startDate, _lte: $endDate}, \n sensor_id: {_eq: $sensor_id}\n },\n limit: ${MAX_QUERY_RECORDS_COUNT}\n ) {\n timestamp\n temperature_f\n sensor_id\n pm_2_5_cf\n pm_2_5_atm\n pm_1_atm\n id\n humidity\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 }\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"graphQL = (\n operationsDoc,\n operationName,\n variables = {},\n) =>\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 })\n .then(r=>r.json())","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 if (start_end_interval_days > 90) {\n throw new Error(\"range too large (>90 days)\");\n }\n return Promise.all(selected_sensors.map(sensor =>\n graphQL(\n get_sensor_data_query_string, \n \"GetObservations\", \n { \n sensor_id: sensor.id, \n startDate: start.toISOString(), \n endDate: end.toISOString() \n }\n )\n ));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"selected_sensor_datas_sample = selected_sensor_datas[0].data.observation_purpleair","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"$31","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 const path = el.childNodes[0]\n const stroke = path.style.stroke\n path.style.stroke = stroke === 'blue' ? '' : 'blue'\n path.style.strokeWidth = path.style.strokeWidth >= 1.5 ? 1.2 : 1.5\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":593,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"start_end_interval_days = {\n \n var interval = end.getTime() - start.getTime();\n return interval / days_ms\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"days_ms = 1000 * 60 * 60 *24;","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":804,"value":"warning = ({ title, msg }) => {\n const {id, href} = DOM.uid(\"banner\");\n return html`\n

\n ${title ? `

${title}

` : undefined}\n ${msg ? `

${msg}

` : undefined}\n

\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}