Help us understand the problem. What is going on with this article?

Node-REDダッシュボードを用いたデータ可視化

Node-REDダッシュボードを用いたデータ可視化

by HiroyasuNishiyama
1 / 2

株式会社日立製作所 西山博泰

はじめに

Node-REDはコーディングレスでプログラムを作成できるプログラミングツールです。さまざまな機能を提供するノードをつなぎ合わせることで、とても簡単にプログラムを作成することができます。

Node-REDの特徴の一つとしてUI部品を実現するノードの組み合わせでダッシュボード画面を簡単に作成できることがあげられます。Node-RED Dashboardダッシュボード提供された基本UI部品しか利用できませんでしたが、バージョン2.10.0からは新しいUI部品を定義するためのAPIを整備しました。この開発には筆者参加しました。

このUI部品定義のためのAPIを用いることで、基本部品に加えて、UI部品を新しく作成し公開できるようになりました。リスト、テーブル、SVG図形、メディア、地図表示など、さまざまなUI部品がコミュニティで活発に作成され公開されています。

この記事では、そのようなノードの一例として、筆者が開発に参加したデータ可視化のためのUI部品であるVegaノードを紹介します。

Vegaノード

Vegaは可視化文法(Visualization Grammar)と呼ばれるデータ可視化を行うための仕様定義とそれを解釈する可視化ライブラリであり、ワシントン大学のInteractive Data Labを中心に開発されています。VegaではJSONを用いてる宣言的な記法によって多様なデータ可視化を指定することができます。VegaライブラリはJavaScriptによって実装されていますが、PythonやRといった言語のバインディングも利用できます。

Vegaノード(node-red-node-ui-vega)
はNode-REDダッシュボード上でVegaによるデータ可視化を行えるようにするためのノードです。Vegaノードは、Vega(もしくは簡易版のVega-Lite)による可視化記述を受け付け、それをNode-REDダッシュボード上に出力します。

以下にVegaノードによるデータ可視化の例を示します。

vega-example.png

これらの例は、Vegaノードと一緒に配布されており、Vegaノードをインストールすると、Node-REDの「読み込みサンプルnod-red-node-ui-vega」から参照できます。

VegaノードはJSONによる可視化記述をノードの設定パネル、もしくは、入力メッセージから与えます。次の図は、Vegaノードの設定パネルの例です。

vega-config.png

Vegaノードによる可視化の例

Vegaでは入力データに対して、それを可視化表現に変換するための定義をJSONによって記述します。以下では、折れ線グラフと棒グラフを一つのグラフ上に重ねて表示するフローをVegaノードによる可視化の例として紹介します。以下は、そのNode-REDフローです。

vega-flow.png

このフローでは、指定したデータをJSONオブジェクトに変換できるtemplateノードを用いてVegaの可視化仕様を定義しています。また、可視化対象のデータも同様にtemplateノードで定義し後で合成しています。このように可視化定義とデータを分けることで、可視化定義の再利用性を高めることができます。

具体的には、2つ目のノードでJSONによる可視化定義を行い、3つ目のノードで可視化定義中に可視化対象のデータを埋め込んでいます。データは、以下の形式のオブジェクトを要素とする配列です。

{
    "year": <<年>>,
    "population": <<人口>>,
    "GDP": <<GDP>>
}

データを埋め込んだ可視化定義をVegaノードに入力するとダッシュボードにグラフが表示されます。

それでは、Vegaによる可視化定義を順に見ていきましょう。

{
    "width": "360",
    "height": "250",
    "data": {
        "values": []
    },

まずは、表示領域の大きさをwidth, heightで定義します。valuesは3つ目のノードで設定するデータ配列です。

    "layer": [
        {
            "mark": "line",
            "encoding": {
                "x": {
                    "field": "year",
                    "type": "temporal"
                },
                "y": {
                    "field": "population",
                    "type": "quantitative",
                    "scale": {
                        "zero": false
                    }
                }
            }
        },

layerで複数のグラフ(棒グラフと折れ線グラフ)を重ねます。
グラフの種別はmarkで指定します。ここでは、折れ線グラフ(line)を指定しています。encodingx及びyはグラフの縦軸および横軸の定義です。対応するデータ配列要素のフィールド名(year/population)、軸の種類(temporal(時間), quantitative(数量))を指定します。これだけの定義で折れ線グラフの表示を指示することができます。

続いて棒グラフの定義です。

        {
            "mark": "bar",
            "encoding": {
                "x": {
                    "field": "year",
                    "type": "temporal"
                },
                "y": {
                    "field": "GDP",
                    "type": "quantitative"
                },
                "color": {
                    "value": "#080"
                },
                "fillOpacity": {
                    "value": 0.5
                }
            }
        }

棒グラフの種別としてmarkbarを指定します。encodingxおよびyは折れ線グラフと同じです。棒グラフでは、棒の色と透明度をcolorおよびfillOpacityで指定しています。

    ],
    "resolve": {
        "scale": {
            "y": "independent"
        }
    }
}

最後に折れ線グラフと棒グラフの縦軸が独立したものであることを定義します。結果は以下のグラフになります。

vega-graph.png

おわりに

この記事では、Node-REDダッシュボードでデータ可視化を行うUI部品であるVegaノードを紹介しました。

Vega/Vega-Lite構文は独特で最初はとっつきにくいと思いますが、Node-REDと組み合わせてうまく活用すれば高度なデータ可視化を行うプログラムを簡単に作成することが可能となります。ぜひ試してみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした