壱圓慶ロボット研究所: Vega-liteで温度測定グラフを描いてみた

ここ数日はVegaにハマっています。
IoTシステムでよく使う稼働状況グラフは表示できたので次に測定結果をグラフにすることにチャレンジしました。Node-REDのDashboardを使えば簡単に表示できますが、同じことをVega-liteで出来るようにしてみました。

mark: lineのTips

折れ線グラフはVega-liteのサンプルにもあるので簡単に表示できましたが、以下2点がちょっと不満なのであれこれと格闘してみました。

表示範囲にちょっと余白を持ちたい

Vegaではデータからグラフの表示範囲（domain）を自動的に計算してくれるのですが、数値軸の場合は0から最大値までとなり、時間軸の場合はデータの時間範囲になります。
domainを指定することでその範囲を指定することが可能ですが、データの値を元に指定したい。さらに、domainを最小値と最大値に設定すると上下（あるいは左右）に余白がなくなってグラフとしてちょっと見辛いという問題がありました。

時間軸の表示方法をHH:MMとしたい

時間軸の場合timeUnitをhoursminutesに設定すると軸ラベルはHH:MMで表示してくれるようになりますが、データも分単位に集約されてジャギーなグラフになってしまいます。測定が１秒毎のデータを表示しつつラベル表示はHH:MMとしたい時にどうしたら良いかでちょっとハマリました。

Dashboardでは何気に配慮してくれているので見やすいグラフに仕上がっています。

結果は以下のようになりました、Vega-Editorで確認してください。
ポイントはtransformのcalculateを使って軸データから上下（あるいは左右）の余白分を加減算した列を追加してdomainで指定することです。

{
    "description": "Line Chart Sample",
    "width": 600,
    "height": 600, 
    "data": {
		"values": [
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.35,"P":980.094,"H":33.53},"sensed_at":"2021-04-21T01:35:38.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.35,"P":980.096,"H":33.53},"sensed_at":"2021-04-21T01:35:43.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.35,"P":980.105,"H":33.53},"sensed_at":"2021-04-21T01:35:48.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.35,"P":980.116,"H":33.531},"sensed_at":"2021-04-21T01:35:53.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.36,"P":980.099,"H":33.531},"sensed_at":"2021-04-21T01:35:58.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.36,"P":980.138,"H":33.52},"sensed_at":"2021-04-21T01:36:03.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.36,"P":980.133,"H":33.52},"sensed_at":"2021-04-21T01:36:08.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.36,"P":980.152,"H":33.52},"sensed_at":"2021-04-21T01:36:13.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.36,"P":980.138,"H":33.52},"sensed_at":"2021-04-21T01:36:18.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.37,"P":980.143,"H":33.509},"sensed_at":"2021-04-21T01:36:23.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.37,"P":980.118,"H":33.509},"sensed_at":"2021-04-21T01:36:28.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.124,"H":33.51},"sensed_at":"2021-04-21T01:36:33.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.14,"H":33.509},"sensed_at":"2021-04-21T01:36:38.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.126,"H":33.51},"sensed_at":"2021-04-21T01:36:43.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.16,"H":33.51},"sensed_at":"2021-04-21T01:36:48.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.126,"H":33.51},"sensed_at":"2021-04-21T01:36:53.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.116,"H":33.51},"sensed_at":"2021-04-21T01:36:58.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.144,"H":33.51},"sensed_at":"2021-04-21T01:37:03.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.39,"P":980.128,"H":33.486},"sensed_at":"2021-04-21T01:37:08.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.11,"H":33.51},"sensed_at":"2021-04-21T01:37:13.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.11,"H":33.51},"sensed_at":"2021-04-21T01:37:18.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.094,"H":33.497},"sensed_at":"2021-04-21T01:37:23.000Z"}
		]
    },
    "transform": [
        {"calculate": "datum.data.T-0.01", "as": "minY"},
        {"calculate": "datum.data.T+0.01", "as": "maxY"}
    ],
    "mark": {"type":"line", "clip": true},
    "encoding": {
        "x": {
            "field": "sensed_at",
            "timeUnit": "hoursminutesseconds",
            "axis": { "format": "%H:%M" }
        },
        "y": {
            "field": "data.T",
            "type": "quantitative",
            "scale": {
                "domain": {"data": "data_0", "fields": ["minY", "maxY"]}
            }
        }
    }
  }

壱圓慶ロボット研究所

2021年4月22日木曜日

Vega-liteで温度測定グラフを描いてみた

mark: lineのTips

0 件のコメント:

コメントを投稿

Edisonが故障した一件