前々回、前回に引き続き、Raspberry Piでセンサーデータを取得して、Milkcocoaを使ってリアルタイムにブラウザ上にグラフ化する方法を紹介していきます。 弊社オフィスの玄関の明るさをリアルタイムで表示しているデモはこちらです 今回は以下の流れで、保存されたセンサーデータのリアルタイムなグラフの描画について説明していきます。 D3.jsで折れ線グラフを表示する際に必要な知識 Milkcocoaのデータストアからデータを取り出して、入出力の範囲を指定する グラフを描画する リアルタイムアニメーション D3.jsで折れ線グラフを表示する際に必要な知識 D3.jsの基礎知識については以下で学習すると良いかと思います。 D3.js入門 (全17回) - プログラミングならドットインストール D3 入門 | スコット・マレイ | alignedleft 面倒な人は、最低でも以下を頭に入れて
![Raspberry Piで取得したセンサーデータをリアルタイムに可視化する(グラフ編) | Milkcocoa Engineers' Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/a199b5586f1a95323c10a2fc07f86c19b610a299/height=288;version=1;width=512/http%3A%2F%2Fblog.mlkcca.com%2Fimg%2Fpost%2Fblg-realtime-data-visualization-with-raspberry-pi.png)