An curious maker & coder from Malaysia, doing fun projects related to Arduino RPi, IoT, PCB, LED, linux, javascript (p5, phaser, Vue), dataviz & art installation
Published
Edited
Dec 11, 2020
md`# Protenga BME680 vs SCD30 Sensors`
url = "https://mqtt.boomgrowfarms.com/protenga/esp32-sensor/_design/sensor/_view/all-sensor?skip=5000"
md `Disable CORS in nginx with
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
`
d3 = require("d3@5")
md `### Load all the json
- key : sensor name
- value: { timestamp, timestamp2, sensor data }
### co2Format is key value pairs for charts
- name : timestamp
- value : sensor data
`
sensor = await d3.json(url)
//bme2 = bme.splice(0,500)
bme_rh = sensor.rows
.map(d => (
{
name: d.value.ts,
value: d.value.rh_bme
})
)
bme_te = sensor.rows
.map(d => (
{
name: d.value.ts,
value: d.value.te_bme
})
)
bme_co2 = sensor.rows
.map(d => (
{
name: d.value.ts,
value: d.value.co2_bme
})
)
scd_rh = sensor.rows
.map(d => (
{
name: d.value.ts,
value: d.value.rh_scd
})
)
scd_te = sensor.rows
.map(d => (
{
name: d.value.ts,
value: d.value.te_scd
})
)
scd_co2 = sensor.rows
.map(d => (
{
name: d.value.ts,
value: d.value.co2_scd
})
)
md ` ## RH Charts`
import {chart as rh_chart} with { rh as data } from '@d3/bar-chart'
md ` ## Temp Charts`
import {chart as te_chart} with { te as data } from '@d3/bar-chart'
md `## Format for multiple series
- series is data points in multiple arrays
- dates is timestamps in an array
`
co2_data = ({series : [
{name : "BME680", values:bme_co2.map(item => item.value)},
{name : "SCD30", values:scd_co2.map(item => item.value)},
],
dates: bme_co2.map(item => item.name*1000 )})
combo_data = ({series : [
{name : "BME680 TE", values:bme_te.map(item => item.value)},
{name : "SCD30 TE", values:scd_te.map(item => item.value)},
{name : "BME680 RH", values:bme_rh.map(item => item.value)},
{name : "SCD30 RH", values:scd_rh.map(item => item.value)},
],
dates: bme_te.map(item => item.name*1000 )})
md `### %Q in d3.timeParse() is epoch data`
parser = d3.timeParse("%Q")
start = bme_te.map(d => parser(d.name*1000) );
//allTS = teFormat.map(d => parser(d.name*1000) );
import {chart as co2_charts} with { co2_data as data } from '@stanleyseow/multi-line-chart'
import {chart as te_charts} with { combo_data as data } from '@stanleyseow/multi-line-chart'
co2chart = co2_charts
te_charts
md`---
## Appendix
`
md `## Requires D3`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
