DataV より桜前線のシミュレーション実現

Tags : AlibabaCloud DataV Develop


目的

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

11.11

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

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

イメージ

上記実現するために、DataV上必要なwidgetは下記だけ: * タイムライン * 3D地図

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

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

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

前提知識

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

1.DataVの基本紹介

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

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

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

2.Callback IDの紹介

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

callback

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

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

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

3.SpringBootの基本知識

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

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

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 をできる限り綺麗に表現するため、今回は下記データを用意する必要があります。

今回こちら用意したデータは下記です: https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/init.json

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

今回こちら用意したデータは下記です。 https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/japanmap.json

road

上記ツールで https://sb-datav-sample.oss-ap-northeast-1.aliyuncs.com/sakura/road.json データを作成しました。

EXCELファイルはこちらからダウンロード可能です。

 最後は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は下記を参照(流暢にDashboardを見るために、できれば性能高いPCを使ってください):

effect

以上です。