桜前線シミュレーション

作成日:2021-06-01

目的

データ可視化の魅了の一つは、分かりづらい生データを生き生きで表現させて、誰でもすぐ分かるようにすることです。でも、データの表現力を豊かにするため、いつもプロのデザインナーに頼まないと行けないことで、普通のエンジニアにとってなかなか難しです。DataVの使命の一つは、まさにエンジニア達はこんな悩みから救えたいです。DataVを使えば、プロなデザインナーを頼らず、誰でも綺麗なDashboardを作れます。

11.11

今回はアリババ が11 月 11 日に行われた「独身の日」セールの際の使われたライブダッシュボードをベスに、簡単に日本の桜前線をシミュレーションすることを挑戦します。

実現したい効果は:

  • 日本地図上で、桜はいつどこで咲いてるか可視化したい
  • 日付ごとに桜前提の推移状況を動的に表現したい

イメージ

上記実現するために、DataV上必要なwidgetは下記だけ:

要注意:3D地図 Widget はDataVのエンタプライズ版しか使えないです。

本ガイドの全体的な流れは下記の通りです。

セクションTopic説明
前提知識DataV 基本紹介DataV 基本機能の紹介
-Callback IDの紹介DataV Callback IDの説明
-SpringBootの基本知識SpringBootを使ってAPIサーバ構築の方法を紹介
準備作業データの準備必要な桜データと地図データの準備方法を紹介
-APIサーバの構築APIサーバの構築方法を紹介
設定開始DataVの設定DataV各Widget設定方法の紹介
-効果を検証実現したシミュレーション効果を検証

前提知識

本ガイドを理解するために、下記の前提知識が必要になります。

1.DataVの基本紹介

DataV は、豊富なグラフパターンや地図と融合した視覚化機能などを兼ね備えた、高機能なデータ可視化ツールです。

DataV重要な特徴は下記の通り:

  • 豊富なテンプレート 管理センター、地域別分析、リアルタイムモニタリング、運用画面などのさまざまなテンプレートが用意されており、簡単にカスタマイズすることができます。プロのデザイナーが作成したように高品質な画面が表示されます。 template

  • 各種ウィジェット 基本的なグラフのほかに、DataV は、2D および 3D マップに基づいた経路図、ヒートマップ、散布図などの地理的な情報とデータを組み合わせたグラフを作成する機能を備えています。ECharts や AntV-G2 などのサードパーティ製グラフライブラリも、DataV とスムーズに統合できます。 widget

  • 使いやすいインターフェイス グラフィックインターフェイスと設定ウィジェットを使用して、簡単なドラッグアンドドロップ操作でダッシュボードを作成できます。 interface

今回は11.11のテンプレートをベースに桜前線を実現する予定です。 11.11

2.Callback IDの紹介

ウィジェットにコールバック ID を関連付けることで、相互に作用する機能があります。コールバック ID を使用することで、あるウィジェットをクリックすると、該当するコールバック ID を持つウィジェットのデータが適宜変更することができます。

callback

プログラミング言語の言い方にすると、 Callback ID = グローバル変数

詳しい紹介ドキュメントはこちらのリンクへご参照ください。

今回はタイムライン上にコールバック IDを有効にすることで、日付変更度に日付のValueを3D地図へ渡し、3D地図からその日の桜前線情報を取得するように設定します。

3.SpringBootの基本知識

サンプルを JavaのSpringBootフレームワークを使ってAPIサーバを構築するので、環境構築方法と使い方について簡単に紹介します。 springboot

APIサーバを実現したい要件は:

  • HTTP サーバ作成
  • 事前に作った5日間のJSONデータをrootフォルダの下に置く
  • 日付のパラメータを受けて、この日のJsonデータを返す

SpringBootを使う場合は、複雑なサーバ設定なしで 簡単ににAPIサーバを立ち上げすることが可能です。もちろん、NodeJSのExpressフレームワークを使って、同じことが簡単にできます。どちらにするかはお好み次第です。

下記リンクから簡単なデモプロジェクトを作れます。細かい説明はここで省略します。 https://start.spring.io/

今回のソースコードはこれだけです。

@RestController
public class HelloController {
private static final Logger logger = LoggerFactory.getLogger(HelloController.class);
ObjectMapper mapper = new ObjectMapper();
@RequestMapping("/hello")
public JsonNode Hello(@RequestParam(value="date",defaultValue = "0325") String date) throws IOException {
String filepath = "/root/"+date+".json";
JsonNode root = mapper.readTree(new File(filepath));
return root;
}
}

準備作業

1.データの準備

3D地図 Widget をできる限り綺麗に表現するため、今回は下記データを用意する必要があります。

[
{
"id": "全国",
"name": "nationwide",
"position": {
"fov": 25.4083,
"lat": 38.2392,
"lng": 136.62,
"distance": 440.36
},
"duration": 3000,
"delay": 3000
}
]

 最後はEXCELのデータをJSONフォマットに変換します。オンライン変換ツールはこちらのものを利用しました。

最後は日付毎に桜開花のJSONデータを作成しました。 https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/0325.json https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/0331.json https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/0410.json https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/0420.json https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/0430.json 

2.APIサーバの構築

今回のAPIサーバはデモから簡単に修正するだけです。Intellij IDEAを使って、MavenプロジェクトをCompileして最後はPackageするだけです。

deploy

要注意: 使うポートは一応[8081]にしますので、クラウド上ディプロイの場合は、セキュリティグループにポートの開放を忘れないようにしてください。

プロジェクトをPackageした後のDeploy手順をここで共有します。

# ログイン
ssh root@47.91.20.94
#javaインストール
yum install java-1.8.0-openjdk
wget https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/springboot-helloworld-1.0-SNAPSHOT.jar   
wget https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/0325.json
wget https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/0331.json
wget https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/0410.json
wget https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/0420.json
wget https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/0430.json
chmod 755 *
# サーバをバックエンド側で動けるようにするため、下記コマンドを利用
nohup java -jar springboot-helloworld-1.0-SNAPSHOT.jar >log.out &
# backendプロセスを確認
jobs

ブラウザから http://47.91.20.94:8081/hello?date=0325 をアクセスしてみて、Jsonデータを表示したら成功。

test

設定開始

Widget毎の設定方法を紹介します。

まず、最初に11.11のダッシュボードをベースに新しいプロジェクトをつくってください。 プロジェクト作成終わったら、3D地図とタイトル以外のWidgetを削除しても構いません。

ここからは設定手順です:

上記設定全部終わりましたら、一回右上の「プレビュー」ボタンで効果をチェックしてください。問題なかったら、プロジェクトの公開設定をオンにします。 open

まとめ

以上となります。実際の録画GIFは下記を参照いただければ幸いです。

effect

Close

Alibaba Cloudを始めてみましょう

ソフトバンクは、Alibaba Cloudのアカウント開設から、サービス展開までをお手伝いします。
Hatena