はじめに

前回、「Node-Redを利用して基本的なデータ分析をやってみました」において、弊社デモ環境から出力したCSVファイル（オフィスのCO2濃度と気温を測定）を読み込み、折れ線グラフ、ヒストグラム、散布図などを作成してみました。
今回はその続編で「箱ひげ図」の表示に挑戦してみました。

　※２０２２年１月頃の寒い時期のデータを使用しています。

基本的なデータ分析　今回の表示目標

　　CO2濃度の箱ひげ図　
　　　1日の時間帯を以下の４つに分けての表示が今回の表示目標となります。
　　　早朝　00-05　00:00-05:59
　　　午前　06-11　06:00-11:59
　　　午後　12-17　12:00-17:59
　　　夜間　18-23　18:00-23:59

　vegaノードを使用して、縦軸に時間帯、横軸にCO2濃度をとり、箱ひげ図を表示します
　完成形は以下となりました

　＜少し考えてみました＞
　　〇時間帯別に見ると以下がわかりました。
　　　早朝　00-05　00:00-5:59
　　　　　　中央値は603、第一四分位が599、第三四分位が606
　　　　　　　中央値は他の時間帯と比較して高め
　　　　　　　ばらつきがかなり小さい
　　　午前　06-11　06:00-11:59
　　　　　　中央値は552、第一四分位が506、第三四分位が580
　　　　　　　中央値は午後、夜間と同程度
　　　　　　　ばらつきが大きい
　　　午後　12-17　12:00-17:59
　　　　　　中央値は545、第一四分位が532、第三四分位が569
　　　　　　　中央値は午前、夜間と同程度
　　　　　　　ばらつきが小さい
　　　夜間　18-23　18:00-23:59
　　　　　　中央値は559、第一四分位が535、第三四分位が609
　　　　　　　中央値は午前、午後と同程度
　　　　　　　ばらつきが大きい

　　＜ご参考＞前回の「Co2濃度の折れ線グラフ」
　　　早朝は600ppm前後で一定値、朝９時前後で450ppmくらいまで下降、
　　　お昼にかけて550ppmくらいまで上昇、午後は少し下降し、夕方にかけて上昇。
　　　夕方から夜間は650ppmくらいまで上昇　　といった様子が読み取れます。

Node-Redで構築　フローの全体図

　当方環境はNode-Red　ver2.2.2をWindows上で動かしております。
　フローの全体は以下となります。ノードは７つでシンプルですが、Functionノード２つにJavaScriptのロジックを入れております。

Node-Redで構築　CSVファイル読込

前回　「Node-Redを利用して基本的なデータ分析をやってみました」と同じ内容です。
https://qiita.com/tota_nissho/items/f6d6d94eb23cd4d9240d

　読み込むCSVファイルはヘッダがなく、以下のような形式です。
　１列目がタイムスタンプ、２列目がCO2濃度（整数）、３列目が温度となっております。
　＝＝＝
　2022/01/04 00:01:19,527,21.1625
　・・・
　2022/01/04 23:59:19,605,22.2250
　＝＝＝

　まず、injectノード（file）ではfilenameをセットします
　次に、read fileノード　出力は文字列、文字コードはデフォルトです
　最後にCSVノード　区切り文字はコンマ、数値を変換するにチェックを入れます

　これでCSVデータをNode-Red上に持ってくる設定ができました。　

Node-Redで構築　箱ひげ図　ファイルを時間帯別に分割

　
　まず、Functionノード(文字列変換CO2変形)で、データを分割します。
　「１列目がタイムスタンプ、２列目がCO2濃度、３列目が温度」のデータから、
　以下の４つのファイルを作成し、CO2濃度順にＳＯＲＴします。
　　・早朝　00-05　00:00-05:59　のデータ
　　・午前　06-11　06:00-11:59　のデータ
　　・午後　12-17　12:00-17:59　のデータ
　　・夜間　18-23　18:00-23:59　のデータ
　
　ChangeロールでjSONataなどで設定したかったのですが、方法がわからず、
　JavaScriptで実装することといたしました。もう少しシンプルにしたかったのですが、少々冗長なロジックとなり、恐縮です。

　
　ご参考：Functionノード(文字列変換CO2変形)のロジックとなります

以下は変数設定

var file_old = msg.payload;
var v = []; var w = [];var x = [];var y = [];var z = [];
var values01 = [];var values02 = [];var values03 = [];var values04 = [];
var ix=0;

次に、読み込んだCSVファイルを４つの時間帯に分割します。

for (ix = 0; ix < file_old.length; ix ++) {
    if ('00' <= file_old[ix].col1.substr( 11, 2 )  && file_old[ix].col1.substr( 11, 2 ) <= '05') {
      v[ix] = '00-05'; x[ix] = Number(file_old[ix].col2); values01.push({  Time: v[ix], Co2: x[ix]  }) 
    }  else if ('06' <= file_old[ix].col1.substr( 11, 2 )  && file_old[ix].col1.substr( 11, 2 ) <= '11') {
      v[ix] = '06-11'; x[ix] = Number(file_old[ix].col2); values02.push({  Time: v[ix], Co2: x[ix]  }) 
    }  else if ('12' <= file_old[ix].col1.substr( 11, 2 )  && file_old[ix].col1.substr( 11, 2 ) <= '17') {
      v[ix] = '12-17'; x[ix] = Number(file_old[ix].col2); values03.push({  Time: v[ix], Co2: x[ix]  }) 
    } else if ('18' <= file_old[ix].col1.substr( 11, 2 )  && file_old[ix].col1.substr( 11, 2 ) <= '23') {
      v[ix] = '18-23'; x[ix] = Number(file_old[ix].col2); values04.push({  Time: v[ix], Co2: x[ix]  }) 
    }     
    }

最後に分割した４ファイルをCO2の濃度順にSORTします

msg.dataco2_01 = values01;
msg.dataco2_01.sort(function (e, f) {
  if(e.Time < f.Time) { return -1 } 
    else if(e.Time > f.Time) { return 1;  }
  if(e.Co2 < f.Co2) { return -1 } 
    else if(e.Co2 > f.Co2) { return 1;  }// Co2 を比較
      return 0;});  // いずれにも当てはまらなければ 0 を返す

//以下　msg.dataco2_02からmsg.dataco2_04も同様に処理

return msg;

Node-Redで構築　箱ひげ図　Vegaの設定

templateノードでVegaの設定をします。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": "CO2 時間帯別箱ひげ図",
  "width": 800,
  "height": 300,
  "data": {
    "values": []
  },
  "encoding": {"y": {"field": "Species", "type": "nominal", "title": null}},
  "layer": [
    {
      "mark": {"type": "rule"},
      "encoding": {
        "x": {"field": "lower", "type": "quantitative","scale": {"zero": false}, "title": null},
        "x2": {"field": "upper"}
      }
    },
    {
      "mark": {"type": "bar", "size": 30},
      "encoding": {
        "x": {"field": "q1", "type": "quantitative"},
        "x2": {"field": "q3"},
        "color": {"field": "Species", "type": "nominal", "legend": null}
      }
    },
    {
      "mark": {"type": "tick", "color": "white", "size": 30},
      "encoding": {
        "x": {"field": "median", "type": "quantitative"}
      }
    },
    {
      "transform": [{"flatten": ["outliers"]}],
      "mark": {"type": "point", "style": "boxplot-outliers"},
      "encoding": {
        "x": {"field": "outliers", "type": "quantitative"}
      }
    }
  ]
}

上記の設定手順は以下となります。
・以下をCopyしtemplateノードに貼り付けします。
　　https://vega.github.io/vega-lite/examples/boxplot_preaggregated.html
・以下５か所を変更
　　・　titleの変更
　　・ "width": 800, "height": 300,　を追加
　　・ "values": []　への変更　　中身のデータを消去
　　・　"mark": {"type": "bar", "size": 14}　を　
　　　　"mark": {"type": "bar", "size": 30}　に変更（２か所）

Node-Redで構築　箱ひげ図　数値編集とVegaノード

１．Functionノード(数値変換)は以下となります。

・以下のValue値の部分と同様になるように数値を編集します。
　　https://vega.github.io/vega-lite/examples/boxplot_preaggregated.html

    "values": [{
      "Species": "Adelie",
      "lower": 2850,
      "q1": 3350,
      "median": 3700,
      "q3": 4000,
      "upper": 4775,
      "outliers": []
    }

以下は変数設定

//変数設定
var file_old_01 = msg.dataco2_01;
var x = [];var y = [];var z = [];var values = [];
var ix1=0;var ix2=0;var ix3=0;var ix0=0;

次に、時間帯で４つに分割したファイルのそれぞれについて、種別（時間帯）と最小値(lower)、第一四分位（q1）、中央値(median)、第三四分位（q3）、最大値(upper)を抽出し、セットします。

for (ix0 = 0; ix0 < 4; ix0 ++) {
//種別（時間帯）と最小値(lower)
    if(ix0==0){file_old_01 = msg.dataco2_01; y[0] = '00-05';}
    else if(ix0==1){file_old_01 = msg.dataco2_02; y[0] = '06-11';}
    else if(ix0==2){file_old_01 = msg.dataco2_03; y[0] = '12-17';}
    else if(ix0==3){file_old_01 = msg.dataco2_04; y[0] = '18-23';}
     y[1] = Number(file_old_01[0].Co2) ; 
// 第一四分位（q1）    
     ix1 = Number(file_old_01.length-1) / 4;
     if (ix1 == Math.floor(ix1)){     
        y[2] = Number(file_old_01[ix1].Co2) ;
     }else{
         ix1 = Math.floor(ix1)
         y[2] = Number(file_old_01[ix1].Co2) + (Number(file_old_01[ix1+1].Co2) - Number(file_old_01[ix1].Co2)) / 2
     }     
//中央値(median)
     ix2 = Number(file_old_01.length-1) / 2;
     if (ix2 == Math.floor(ix2)){     
        y[3] = Number(file_old_01[ix2].Co2) 
     }else{
          ix2 = Math.floor(ix2)
          y[3] = Number(file_old_01[ix2].Co2) + (Number(file_old_01[ix2+1].Co2) - Number(file_old_01[ix2].Co2))/ 2
      }
//第三四分位（q3）
     ix3 = Number(file_old_01.length-1) * 3 / 4;
     if (ix3 == Math.floor(ix3)){     
        y[4] = Number(file_old_01[ix3].Co2) ; 
     }else{
         ix3 = Math.floor(ix3)
        y[4] = Number(file_old_01[ix3].Co2) + (Number(file_old_01[ix3+1].Co2) - Number(file_old_01[ix3].Co2)) / 2
     }
//最大値(upper)
     y[5] = Number(file_old_01[file_old_01.length-1].Co2) ;

    values.push ({ "Species": y[0], "lower": y[1], "q1": y[2], "median": y[3], "q3": y[4], "upper": y[5], "outliers": []})
}
// 出力設定:
msg.payload.data.values = values;
return msg;

２．最後にVegaノードをセットし、Group,Size,Nameをセットします

おわりに、続編に向けて

　　　今回は「箱ひげ図」にチャレンジしてみました。
　　　Vegaノードでは各種可視化がまだまだ可能なようですので、引き続き試していきたいと考えています。
　　　

参考資料