DataVでグラフィカルなダッシュボードを作ろう #2 フライングラインレイヤー編

こんちには。クラウドソリューションアーキテクトの安齋です。

DataV でグラフィカルなダッシュボードを作ろう第2弾です!

第1弾はこちら

完成図

今回のお題

気象庁で公開されている最大風速を完成図右上のフライングラインレイヤーで描画してみます。

1. 基本平面マップを複製

調節したサイズや中心点をそのまま使えるため、第1弾で作成した基本平面マップを複製します。

アイソサーフェスレイヤーは削除します。

2. フライングラインレイヤーを作成

2-1. 設定の編集その1

2-1-1. 共通の設定

青枠は風速の強さごとに色分けするための設定です。赤枠は全風速共通の設定です。

3. フライングラインレイヤーを複製

風速を5[m/s]ごとに色分けするため、フライングラインレイヤーを6つ複製します。

4. 風向きの数値化

最大風速のデータには観測地点、時刻、最大風速、風向きがあります。

風向きは東西南北の16方位で記されているため、フライングラインレイヤーのデータ構造である

どこからどこへを記す緯度経度に変換する必要があります。

例えば新宿における5[m/s]の南東の風向きを表す場合、

新宿の南にx°、東にy°の位置から新宿に向かって、両地点のなす角から求めた長さを描画します。

5. フライングラインレイヤーの編集

5-1. 設定の編集その2

5-1-1. 風速の強さごとの設定

フライングラインレイヤー5からフライングラインレイヤー30それぞれのフライングラインのスタイルを編集します。

風速0~5[m/s]

風速5~10[m/s]

風速10~15[m/s]

風速15~20[m/s]

風速20~25[m/s]

風速25[m/s]~

5-2. データの取り込み

フライングラインレイヤー5からフライングラインレイヤー30それぞれにデータを取り込みます。

風速0~5[m/s]

風速5~10[m/s]

風速10~15[m/s]

風速15~20[m/s]

風速20~25[m/s]

風速25[m/s]~

6. ステータスカードの作成

凡例をつけます。

6-1. 設定の編集

6-1-1. ステータスタイプ

風速の強さごとに凡例の色を分けます。

風速0~5[m/s]

風速5~10[m/s]

風速10~15[m/s]

風速15~20[m/s]

風速20~25[m/s]

風速25[m/s]~

6-2. データの取り込み

7. できあがり

まとめ

本来は飛行機の軌道や物流量を可視化することが強みのフライングラインレイヤーで風速を描画してみました。

わかりやすく矢印を描画できるように調節することがもう少しできたらと思います。

Tags: