30:T417,aranetData = (data) => { // Aranet data may come with time and temperature in mm/dd/yyyy or dd/mm/yyyy and °C or °F, // so we need some code to detect which and normalize the processing const [dateField, dateFormat] = 'Time(mm/dd/yyyy)' in data[0] ? ['Time(mm/dd/yyyy)', '%m/%d/%Y %I:%M:%S %p'] : ['Time(dd/mm/yyyy)', '%d/%m/%Y %I:%M:%S %p'] let temperatureC, temperatureF if ('Temperature(°C)' in data[0]) { temperatureC = d => +d['Temperature(°C)'], temperatureF = d => +d['Temperature(°C)'] * 1.8 + 32 } else { temperatureC = d => (+d['Temperature(°F)'] - 32) / 1.8 temperatureF = d => d['Temperature(°F)'] } // Now we just do the simple processing on the remaining fields in the mapping return data.map(d => ({ date: d3.utcParse(dateFormat)(d[dateField]), co2: +d['Carbon dioxide(ppm)'], temperatureF: temperatureF(d), temperatureC: temperatureC(d), relativeHumidity: +d['Relative humidity(%)'] / 100, atmosphericPressure: +d['Atmospheric pressure(hPa)'], })) }31:Tdc2,co2MilestonesChart = (data, milestones, opts) => { const o = Object.assign({}, { thresholds: [400, 800, 1000, 2000, 2500], width: null, height: null, ticks: null, co2domain: [0, 2000], timeDomain: null, }, opts) if(o.width && o.width < 400) throw 'Width must be >400' const data_ = o.timeDomain ? data.filter(d => +d.date > +o.timeDomain[0] && +d.date < +o.timeDomain[1]) : data const periods = milestonesToPeriods(milestones) const gradientId = DOM.uid() const marginRight = 200 const marginLeft = 75 const chartWidth = o.width || width // Default chart height is 1000px per day const chartHeight = o.height || d3.timeSecond.count(...d3.extent(data_, d => d.date)) * 1000 / (24 * 60 * 60) // Returns true for either the last item in the list (in this case the earliest time) and midnight on any day const isNotableTimeTick = (t, i, arr) => i === arr.length - 1 || t.getUTCHours() === 0 // Returns a format like "Fri Jul 8" for notable times and "1:00 AM" for the rest of them const timeTickFormat = (t, i, arr) => { if (isNotableTimeTick(t, i, arr)) return d3.utcFormat('%a %b %-d')(t) return d3.utcFormat('%-I:%M %p')(t) } // This calculation gets the width, in CO2 from 0 to the right edge of the chart const fullWidthDomain = (chartWidth - marginLeft) * o.co2domain[1] / (chartWidth - marginLeft - marginRight) const chart = Plot.plot({ height: chartHeight, width: chartWidth, marginRight, marginLeft, y: { scale: 'utc', domain: d3.extent(data_, d => d.date).reverse(), grid: true, tickFormat: timeTickFormat, }, x: { scale: 'linear', domain: o.co2domain, ticks: o.ticks || [0].concat(o.thresholds), grid: true, axis: 'top', label: 'CO₂ (ppm) →', tickFormat: (t) => { // not enough space to show t=800 on mobile if (width > 400 || t !== 800 ) return d3.format(',d')(t) return null } }, marks: [ // Location background color Plot.rectX(periods, { x: fullWidthDomain, fill: (_, i) => i % 2 == 0 ? '#0001' : '#0000', y1: 'start', y2: 'end', title: d => `${d.event}${d.description ? `: ${d.description}` : ''}` }), // CO2 line Plot.line(data_, { y: 'date', x: 'co2', stroke: '#000', strokeWidth: 3, title: d => 'CO2', stroke: `url(#${gradientId.id})` }), // Location labels Plot.textY(periods, { filter: d => d3.utcMinute.count(d.start, d.end) > 30, y: 'start', text: 'description', dx: 8, dy: 18, x: o.co2domain[1], textAnchor: 'start', stroke: '#FFF', fill: '#000', strokeWidth: 4, lineWidth: 15, frameAnchor: 'top', }), Plot.textY(periods, { filter: d => d3.utcMinute.count(d.start, d.end) > 15, y: 'start', text: 'event', dx: 8, dy: 5, x: o.co2domain[1], textAnchor: 'start', stroke: '#FFF', fill: '#000', strokeWidth: 4, fontWeight: 800, frameAnchor: 'top', }), colorGradient(data_, o.thresholds, gradientId.id) ], }) // Bold the proper ticks on the x axis d3.select(chart) .selectAll('[aria-label="y-axis"] .tick') .filter(isNotableTimeTick) .attr('font-weight', 800) .selectAll('line') // Darken the grid line too .attr('stroke-opacity', 1) return chart }32:T536,colorGradient = (data, thresholds, id, vertical = false) => { if (thresholds.length < 5) throw 'Must have 5 threshold levels' const s = d3.scaleLinear( d3.extent(data, (d) => d.co2), [0, 100] ) return () => htl.svg.fragment` ` }33:[{"id":"b42015e97a2b34c449ecc919c07b1f23607530be40c2b0e45851339a22613175e6e0caef9914b57fafb4d82263552666806e2c254ab625f729883b706733c004","href":"https://static.observableusercontent.com/files/b42015e97a2b34c449ecc919c07b1f23607530be40c2b0e45851339a22613175e6e0caef9914b57fafb4d82263552666806e2c254ab625f729883b706733c004","name":"aranet4.jpg","type":"image/jpeg","lastModified":1659411578606.873,"size":68199},{"id":"e871f0bba45454e8da8c9e5bdcb1a4409417a73794efae9950a39b31cfce519773163ceddf50803c82e078c01b06576c2f45d132307aa0c47358e8ba39944874","href":"https://static.observableusercontent.com/files/e871f0bba45454e8da8c9e5bdcb1a4409417a73794efae9950a39b31cfce519773163ceddf50803c82e078c01b06576c2f45d132307aa0c47358e8ba39944874","name":"SampleAranetData.csv","type":"text/csv","lastModified":1659412970270.288,"size":243868}] 2e:{"title":"Aranet4 Data Utilities","cells":[{"id":0,"value":"# Aranet4 Data Utilities\n\nAranet4 is an indoor environment monitor that can measure and track CO₂, relative humidity, and temperature. These utilities assist in charting data from a device.\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"## Quick Start\n\nImport the necessary functions from this notebook:\n\n~~~js\nimport { aranetData, co2Chart, co2MilestonesChart, utc } from '@harrislapiroff/aranet'\n~~~\n\nThen, process your data (in this case I have uploaded it to the notebook as a CSV file attachment):","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"data = aranetData(await FileAttachment(\"SampleAranetData.csv\").csv())","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"Make a chart:","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"co2Chart(data, {\n timeDomain: [utc(2022, 6, 4), utc(2022, 6, 5)],\n thresholds: [450, 800, 1000, 2500, 2500],\n ticks: [0, 450, 800, 1000, 2000]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"Or define some milestones and make a milestone chart:","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"milestones = [\n [utc(2022, 6, 4, 14, 45), 'Car to camp', '2 people'],\n [utc(2022, 6, 4, 16, 20), 'Cabin', '2 people, windows open'],\n [utc(2022, 6, 4, 18, 0), 'Dining hall', 'Moving both indoors and outdoors'],\n [utc(2022, 6, 4, 19, 10), 'Cabin', '2 people'],\n [utc(2022, 6, 4, 19, 30), 'Dance in C♯', 'In pocket'],\n [utc(2022, 6, 4, 23, 0), 'Party in C♯m'],\n [utc(2022, 6, 5, 2, 0)]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"co2MilestonesChart(data, milestones, { timeDomain: [utc(2022, 6, 4, 14, 45), utc(2022, 6, 5, 2, 0)] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"## Function Documentation","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"## `aranetData`\n\nFormats data from an Aranet CSV in a clean, usable fashion.\n\nUsage:\n\n~~~js\nimport { aranetData } from '@harrislapiroff/aranet'\n\ndata = aranetData(await FileAttachment(\"SampleAranetData.csv\").csv())\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"## `co2Chart`","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"Usage\n\n~~~js\nimport { co2Chart } from '@harrislapiroff/aranet'\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"co2Chart(data, {\n timeDomain: [utc(2022, 6, 4), utc(2022, 6, 5)],\n thresholds: [450, 800, 1000, 2500, 2500],\n ticks: [0, 450, 800, 1000, 2000]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"co2Chart = (data, opts) => {\n const o = Object.assign({}, {\n thresholds: [400, 800, 1000, 2000, 2500],\n width: 600,\n height: 300,\n ticks: null,\n co2domain: [0, 2500],\n timeDomain: null,\n }, opts)\n\n const data_ = o.timeDomain ? data.filter(d => +d.date > +o.timeDomain[0] && +d.date < +o.timeDomain[1]) : data\n\n const gradientId = DOM.uid()\n \n return Plot.plot({\n width: o.width,\n height: o.height,\n x: { \n scale: 'utc',\n grid: true,\n domain: o.timeDomain || d3.extent(data, d => d.date)\n },\n y: {\n ticks: o.ticks || [0].concat(o.thresholds),\n grid: true,\n domain: o.co2domain,\n label: 'CO₂ (ppm) ↑'\n },\n marks: [\n Plot.line(data_, { x: 'date', y: 'co2', stroke: '#000', strokeWidth: 3, title: d => 'CO2', stroke: `url(#${gradientId.id})` }),\n Plot.frame({ stroke: '#CCC' }),\n colorGradient(data_, o.thresholds, gradientId.id, true)\n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"## `co2MilestonesChart`\n\nThe most complicated chart provided, it displays a full-width annotated vertical timeline of CO₂ measurements over time. Milestones are expected to be provided with their start times in UTC. We provide a convenience utility `utc` below for declaring UTC times. Their end time is assumed to be the start of the next milestone.\n\nUsage:\n\n~~~js\nimport { co2MilestonesChart, utc } from '@harrislapiroff/aranet'\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":161,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"## `utc`\n\nNot really Aranet specific, but sometimes it's useful to create dates that are in UTC.\n\nUsage:\n\n~~~js\nimport { utc } from '@harrislapiroff/aranet'\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"utc(2022, 7, 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"utc = (...args) => new Date(Date.UTC(...args))","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"***\n\n## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"milestonesToPeriods = ms => ms.map((d, i, arr) => ({\n start: d[0],\n end: arr.length > i + 1 ? arr[i+1][0] : null,\n event: d[1],\n description: d[2],\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"aranetImageUrl = FileAttachment(\"aranet4.jpg\").url()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}