An curious maker & coder from Malaysia, doing fun projects related to Arduino RPi, IoT, PCB, LED, linux, javascript (p5, phaser, Vue), dataviz & art installation
md`# Compare Sensor Data`
urltemp = "https://mqtt.boomgrowfarms.com/sensor/temp-view"
urlrh = "https://mqtt.boomgrowfarms.com/sensor/rh-view"
urlco2 = "https://mqtt.boomgrowfarms.com/sensor/co2-view"
urleco2 = "https://mqtt.boomgrowfarms.com/sensor/eco2-view"
md `Disable CORS in nginx with
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
Get json
response2 = await d3.json(url)
Slice and format for charts with .map
name : id
value : co2 values
`
d3 = require("d3@5")
co2 = await d3.json(urlco2)
eco2 = await d3.json(urleco2)
rh = await d3.json(urlrh)
te = await d3.json(urltemp)
co2format = co2.rows.map(function(d) {
return {
name: d.key,
value: d.value.co2
}
})
eco2format = eco2.rows.map(function(d) {
return {
name: d.key,
value: d.value.co2
}
})
import {chart as co2_chart} with { co2format as data } from '@d3/bar-chart'
import {chart as eco2_chart} with { eco2format as data } from '@d3/bar-chart'
md `## SCD30 CO2 Charts`
co2_chart
md `## SGP30 eCO2 charts`
eco2_chart
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.
