DataV

プロダクト紹介

DataVとは

DataV は、Alibaba Cloud のデータ可視化サービスで、膨大な量の複雑なデータを視覚的なダッシュボードとして分析および表示できます。 DataV は、データ可視化エクスペリエンスをより多くのユーザーに提供することを目的としており、経験の浅いエンジニアがグラフィカルユーザーインターフェイスを介して高度な可視化アプリケーションを簡単に構築できるよう支援します。 DataV は、展示会、ビジネスモニタリング、リスク警告、地理情報分析などのシナリオで、データ表現の要件を満たすことができます。

背景情報

DataV は、複雑で動きのあるビジネスデータを、従来のグラフやデータダッシュボードよりも鮮明かつわかりやすく表示するほか、リアルタイムの洞察を引き出すことで、十分な情報に基づく素早い決定を促します。 DataV は、小売、輸送、物流、電力、水保存、環境保護など、さまざまな業界で使用できます。 DataV のインタラクティブなデータダッシュボードでは、ビジネス上の問題を簡単に特定および診断することができ、ビッグデータソリューションの重要な部分となっています。
可視化プロジェクトを作成する際、次の課題に直面することがあります。

  • データ可視化ツールの使用方法に慣れておらず、経験が不足している。
  • グラフや視覚効果の作成に多くの時間と作業を必要とする。
  • 時空間データやリレーショナルデータなど、非従来型データの表示と分析に必要なウィジェットやツールを利用できない。
  • 使用しているツールには、大画面でデータを表示するときに解像度の問題がある。
  • 使用しているツールでは、ビッグデータ分析用のデータ可視化を適切に表現できない。

事前準備

クイックスタートの場合：春節前後の中国大気の変化を確認するにはDataVを使用してください

背景

画面を作成するときは、次の機能を使用する必要があります。

  • 空間補間
  • アイソサーフェスコンポーネント
  • タイムラインコンポーネント
空間補間

空間補間は、通常、離散点の測定データを連続したデータ曲線に変換し、他の空間現象の分布モードと比較するために使用されます。

換言すれば、既知の測定サイトで測定されたデータに基づいて他の任意の空間位置のデータを計算し、データの範囲に基づいて対応する色をマッピングして、典型的な等温マップを得ることができる。

等温マップ

DataV を使用して等温マップを作成すると、空間補間は既知の値を持つ離散点を使用して他の未知点の値を推定し、連続したサーフェスデータを取得できるプロセスであることがわかります。

空間補間
アイソサーフェスコンポーネント

DataV は、既知のベクトル点のデータを含むグリッド領域マップを作成するのに役立つ、軽い分析の等値面マップコンポーネントを提供します。この機能を使って、中国のリアルタイム大気地図を作成することができます。

Isosurface Component
タイムラインコンポーネント

タイムラインのコンポーネントは、一定期間の大気質の変化を表示するために必要です。

TimeScroll

タイムラインコンポーネントの重要な機能は、他のコンポーネントとやりとりできる callbackID をサポートすることです。タイムラインの時間が変わると、他のコンポーネントのデータも自動的に更新されます。

正しい callbackID が入力されると、システムは時間が変化するとデータリクエストをトリガし、現在の callbackID と一致する値を他のコンポーネントの対応する API インターフェイスのパラメータリストに自動的に追加します。

初期インターフェイスアドレス： http://127.0.0.1:8888/aqi

callback がトリガされた後： http://127.0.0.1:8888/aqi?date=2017012722

記入された callbackIDは：date、2017012722です。

callbackID は SQL 文でも有効ですが、callbackID の名前の前に ：をプレースホルダとして使用する必要があります。

初期 SQL： select :date as value;

callback がトリガされた後： select '2017022722' as value;

準備

画面を作成する前に、対応するデータとインタフェースを準備して処理する必要があります。

この例では、CSV ファイルが JSON に変換されました。

データを取得する

データは視覚化の素材です。まず、春祭り中に中国の大気質データを取得する必要があります。

必要なデータは中国の過去気象データからダウンロードできます。

注：.csvファイルは推奨されるダウンロード形式です。

この例では、2017年1月1日から2017年2月2日まで、全国の1,497の監視サイトのデータを使用しました。

ダウンロードしたファイルを開き、補充またはスクリーニングが必要なデータがあるかどうかを確認します。

データを表示する

プロセスデータ

アイソサーフェスコンポーネントのデータ形式は次のとおりです。お客様のニーズをより良く満たすためにデータをさらに処理する必要があります。

情報処理

  • 表面を切り取る：研究領域の境界データ。geojson 形式のデータを持つ全国的な領域を持っています。

geojsonは地理空間データ交換フォーマットです。geojson の詳細については、geojson標準を参照してください。

  • 補間点データ：標本データは、経度、緯度、および値、具体的には監視サイトの経度および緯度、およびサイトの特定指標の値を含む配列です。

一日のうちに一定の時間、等値面マップを作成するだけで済む場合2017年1月20日の12:00に AQI インジケータの地図を表示すると、その日のその時点の各監視サイトの位置（経度および緯度）および対応する AQI 値を知る必要があります。

National Monitoring Sites のデータを含む CSV ファイルを処理するノードスクリプトを作成することをお勧めします。サイト番号をキーとし、サイト情報をバリューとしましょう。

NodeScript

その後、全国の1497のモニタリングサイトのデータを処理する必要があります。

その日の24時間すべての大気汚染度指標を含む情報を処理し、その情報を抽出し、サイトの経度と緯度のマッピングテーブルに基づいて経度と緯度をサイトに追加するスクリプトを作成しましょう。

DataScript2

毎日の期間をキーとして、対応する期間の配列（ AQI 情報と各監視サイトの位置を含む）を値として取りましょう。次に、1日の各期間のデータは、等値面コンポーネントによって便利に使用できます。

DataScript3

処理インターフェイス

タイムラインの特性に基づいて、等値面のデータをタイムラインとともに変更したい場合は、時間パラメータに基づいて中国全域のモニタリングサイトのデータを取得するためのインタフェースまたはデータベースが必要です。

このニーズを満たすためにシンプルなインタフェースを作成することをお勧めします。

リクエストアドレス： /aqi

リクエスト方法： GET

リクエストパラメータ：

  • パラメータ名：日付

  • パラメータタイプ：文字列、例：2017012722時刻形式はYYYYmmDDHHです。

ダウンロードしたすべてのデータを事前に処理する必要があります。ノードには、ダウンロードしたデータを同じフォルダにバッチ処理するglobモジュールがあります。

　DataScript4

glob モジュールを使用してデータを統合します。ファイル名を使用する。キーとしての日付、および値としての内容。

　DataScript5

統合された all.json ファイルを取得したら、エクスプレスプロジェクトをノードのエクスプレスフレームで初期化し、上記のインターフェイスのニーズに基づいて単純なインターフェイスを追加します。

　DataScript6

注：クロスリージョンの要求を避けるため、app.js ファイルに CORS モジュールを追加することができます。

　DataScript7

インタフェース処理の完了後、 npm start コマンドを使ってインタフェースをテストすることができます。

テストインターフェイス

画面を作成する

準備が完了したら、マップ画面を作成することができます。

マップ画面を作成するには、以下の手順に従う必要があります。

  • 視覚化アプリケーションを作成する
  • コンポーネントを追加する
  • データを追加する

注：この例で使用されているデータソースはローカル API ファイルなので、DataV にデータソースを追加する必要はありません。ビジュアライゼーションプロジェクトのコンポーネントから API を直接使用することができます。別のデータソースを使用する場合は、ビジュアライゼーションアプリケーションを作成する前にデータソースを追加する必要があります。

ステップ1視覚化アプリケーションを作成する

  1. DataV Consoleにログオンします。

  2. My Visualization - > New Visualization をクリックします。

  3. 空白のテンプレートを選択し、 [画面の作成] をクリックします。

    SelectScreenModel

  4. 画面名を入力し、作成をクリックします。アプリケーションが正常に作成された場合、DataV は Application Editor ページにジャンプします。

ステップ2コンポーネントを追加する
マップとサブコンポーネントを追加する

  1. アプリケーションエディタページで、 Map > 2D Plimetric Map をクリックします。

    SelectMap

  2. 他のすべてのサブコンポーネントを削除し、スタイルタブでボトムレイヤーを維持してください。

    MapStyle

  3. アイソサーフェスサブコンポーネントを追加します。

    コンポーネントの選択のドロップダウン矢印をクリックし、次にアイソサーフェスレイヤーを選択します。サブコンポーネントの追加をクリックし、サブコンポーネントの追加を完了します。

    addsubtool

  4. グローバルパラメータをクリックして、マップのサイズを調整します。スライダーをドラッグするか、手動で数値を入力して地図のサイズと表示範囲を調整できます。

    adjustFullScreen

タイムラインを追加

Secondary Graphics > Timeline をクリックしてタイムラインをマップに追加します。

AddTimeLine

地図のタイトルを追加

Text をクリックし、 General Title を選択して、マップにタイトルを追加します。

表題を加える

コンポーネントのレイヤーと位置を調整する

コンポーネントを追加したら、必要に応じて右側のナビゲーションバーにあるレイヤーを介してコンポーネントのレイヤーを設定できます。

コンポーネントを選択し、ドラッグしてキャンバス上の位置を調整することができます。

ステップ3データを追加する
地図データを追加する

  1. 画面上の Map コンポーネントをクリックして、Map Editor メニューを開きます。

  2. Data をクリックして、Dataタブを開きます。

  3. [サブコンポーネント管理]の[アイソサーフェスレイヤー]をクリックして、アイソサーフェスデータのエディタページを開きます。

このサンプルのデータ領域は全国です。クロッピング面のデータは変更されません。また、必要に応じてクロップサーフェスのデータを変更することもできます。

  1. 補間点データをクリックして、補間点データのエディタページを開きます。
  2. データ構成情報を設定します。
  • データソースタイプ：対応する API を既に作成し、データアクセスをテストしました。isosurface コンポーネントの補間ポイントのデータソースタイプを API に変更しましょう。
  • URL：上記のインターフェーステストで使用したアドレスを入力します（ここで http：//127.0.0.1：8888/aqi？date = 2017012722でテストします）。

  1. View Data Response Result をクリックすると、正しい応答結果が得られ、正常に一致していることがわかります。

  2. アイソサーフェスレイヤーコンポーネントのスタイルを設定します。

  3. アイソサーフェスレイヤーのスタイルメニューを開くには、スタイルをクリックします。

  4. ピクセルサイズを設定し、3を推奨します。ピクセルサイズの値が大きいほど、補間が速くなり、精度が低くなります。

    FigureSize

  5. レンダリングスタイルを設定し、リニアレンダリングをお勧めします。

    WayOfXuanRan

  6. 分類数を設定し、35を推奨します。

    カテゴリ番号

タイムラインデータを追加する

  1. 画面上のタイムラインコンポーネントをクリックして、タイムラインエディタメニューを開きます。

  2. Data をクリックして、Dataタブを開きます。

  3. データソースタイプを静的データに設定します。

  4. タブを参照して必要なデータを作成し、タイムラインデータパネル上の静的サンプルデータを置き換えます。

    たとえば、2017年1月22日から2017年2月2日までの22時をタイムラインデータとして使用します。

    データサンプル

    • name：タイムラインの軸ポイントに表示されるコンテンツ。
    • date： callbackID オプションとして使用されます。
    • value：対応する時刻。

  5. タイムラインスタイルを設定します。

  6. スタイルメニューに戻るには、スタイルをクリックします。

  7. Event Node をクリックして、データ形式を％Y％m％d％H に設定します。

    DataFormat

  8. インタラクションをクリックして、 callbackID の値を日付として設定します。

    SetRetriveID

地図のタイトルデータを追加する

  1. 画面上のタイトルコンポーネントをクリックすると、タイトルエディタメニューが開きます。

  2. Data をクリックして、Data タブを開きます。

  3. データソースタイプをデータベースと設定します。

    SelectDataBase

  4. データベースの選択リストからデータベースを選択します。

    使用可能なデータベースがない場合は、 New をクリックして、システム指示に従ってデータベースを作成します。データベースの作成の詳細については、データソースの設定を参照してください。

  5. 手動でSQL領域に次のコマンドを入力します。

    1. select to_char(to_timestamp(:date,'YYYYMMDDHH24'),'YYYY年mm月DD日HH24时')||'空气质量' as value;

    ：date map を見ると、callbackID の対応する値がインポートされます。

    実際のニーズに基づいて凡例を挿入することもできます。画面の最終的な効果は次のとおりです。

    Final Effect

機能

多様なシナリオテンプレート

データ可視化の設計で最も難しいのは階層構造および単一の品目における多様なデータソース間の関係に関する理解です。 これには色遣い、レイアウト、および図表の包括的な利用が関係しています。 DataV はコントロールセンター、地理解析、リアルタイムモニタリング、レポーティング、プレゼンテーションその他多くのシナリオに使える複数のテンプレートを提供しています。 プロのデザイナーに依頼しなくてもハイレベルなデザインとインパクトのある可視化プレゼンテーションを実現できます。

多様なシナリオテンプレート

可視化ウィジェットライブラリが充実

DataV は、ベーシックな図表にとどまらず、2 次元マップ、3 次元マップをベースにデータと輸送路、ヒートマップ、散布図などの地理情報とを手間をかけずにうまく組み合わせることができます。Echart、AntV-G2 などサードパーティのチャートライブラリも DataV と完全に統合されます。

多様なデータソースに対応

DataV は Alibaba Cloud AnalyticDB、リレーショナルデータベースサービス (RDS)、ローカル CSV ファイル、オンライン API へのアクセス、およびさまざまなデータソースへの動的な要求に対応しています。 DataV はビッグデータのリアルタイムな演算、モニタリングに関連した需要に応えます。 DataV はビッグデータおよびクラウド演算の可能性をフル活用します。

多様なデータソースに対応

ユーザーに優しいインターフェイス

ユーザーはグラフィカルインターフェイスおよび構成可能なウィジェットによりドラッグアンドドロップの操作だけで簡単にプロフェッショナルな可視化プロジェクトを作成できます。最低限のプログラミングスキルが必要です。

ユーザーに優しいインターフェイス

ユーザーに優しいインターフェイス

複数のスケールの解像度および公開方法

DataV のプロジェクトはウェブページとして、またはアクセス制御のためパスワードやアクセストークンを指定しかつセキュア情報をダッシュボードに表示する形で発行することが可能です。画面結合時は解像度を改善し最適化されるようになりました。

ユーザーに優しいインターフェイス

シナリオ

データに基づいて DataV によって生成されたダッシュボードは、ビジュアライゼーションプロジェクトです。ビジュアライゼーションプロジェクトは、ビジュアライゼーションアプリケーションまたはプロジェクトとも呼ばれます。DataV は、データをさまざまな視覚化されたチャートやマップに変換し、リアルタイムでユーザーにデータを示すことができます。

データソース

DataV でビジュアライゼーションプロジェクトを作成する場合は、まず生データのソースを指定する必要があります。データソースは、生データがある場所です。 DataV は、いくつかのタイプのデータソースをサポートしています。

  • データベース
  • 静的データ
  • API
  • その他

キャンバス

キャンバスはインターフェイスエディタとも呼ばれ、 DataV の主要な機能領域です。プロジェクトのページ設定を調整し、データソースとウィジェットをバインドし、キャンバスにプロジェクトを公開することができます。

キャンバス

ツールバー

ツールバーは、キャンバスの上部に配置されています。ウィジェットの追加、プレビュー、公開、ヘルプなどの機能を提供します。

画像の説明

ウィジェット

ツールバーのウィジェットメニューからキャンバスに追加するウィジェットを選択することができます。現在、 DataV は以下のウィジェットをサポートしています

  • 基本グラフ
  • 地図
  • インジケータ
  • ネットワーク
  • テキスト
  • サードパーティのウィジェット
  • その他

コンセプト

可視化プロジェクト、アプリケーション、ダッシュボード

DataV でダッシュボード内に生成されるデータ表現が可視化プロジェクトとして認識されます。 可視化アプリケーションまたは大画面プロジェクトと呼ばれることもあります。DataV はデータをさまざまな図表およびマップに変換し動的かつリアルタイムにユーザーにデータをプレゼンするツールです。

データソース

DataV で大画面プロジェクトを作成する場合は元のデータのソースを指定する必要があります。 DataV を使用するデータ ソースには以下のデータ ソースが含まれている可能性があります。

  • データベース
  • 静的データ
  • API
  • その他

キャンバス

キャンバスはインターフェイスエディタとも呼ばれる DataV のメインの機能エリアです。プロジェクトのレイアウトと色遣いを調整し、データ ソースと図表を組み合わせ、キャンバスでさまざまなアプリケーションを発行することが可能です。

ツールバー

ツールバーはキャンバスの最上部にあり、ウィジェットの選択、ヘルプのプレビュー、発行、検索が可能です。

ウィジェット

ウィジェットはツールバーのウィジェットメニューからキャンバスに追加できます。
DataV は以下のようなウィジェットに対応しています。

  • チャート
  • マップ
  • メディア
  • テキスト
  • ネットワーク
  • 素材
  • インタラクト
  • その他

ベストプラクティス

Log Service データの DataV へのレンダリング

以下のセクションでは、Log Service からデータをレンダリングするように DataV を構成する方法について説明します。
以下のセクションでは、その方法について説明します。

  • Log Service を作成して DataV と連動するように設定します (インデックスの設定)。
  • サンプルダッシュボードを作成します。
  • ダッシュボードを公開します。

前提条件

  • Kubernetes での Log4JAppender の設定および Log Service の設定が完了していて、サービスが現在実行中である必要があります。
  • DataV Enterprise Edition を購入しておく必要があります。

Log Service の設定

  1. プロジェクト内の Lostore 一覧ページにアクセスします。
    Lostore一覧ページにアクセス
  2. プロジェクト名の横にある [検索] をクリックします。 次のページが表示されます。
    プロジェクト名の横にある検索をクリック
  3. すべての必須フィールドにインデックスを作成します。 次の例では、各アイテムのインデックスを作成します。 ページ上部のメニューから [インデックスの属性] をクリックして、 [変更] をクリックします。
  4. 検索および分析ページのデータを確認します。
    検索および分析ページのデータを確認
  5. データが正しくインポートされたら、 グラフビューに切り替えます。 (次のグラフでは、軸は "時間" です。)
    グラフビューに切り替え

DataV の設定

  1. DataV 製品ページにアクセスして、最初のプロジェクトを作成します。
    プロジェクトを作成
  2. [プロジェクトを作成] をクリックし、空のテンプレートを選択して、 [作成] をクリックします。
  3. ダッシュボードにウィジェットを追加します。
    ダッシュボードにウィジェットを追加
    ウィジェットはいくつかのサンプル静的データセットを表示します。
    サンプル静的データセットを表示
  4. ウィジェットをクリックして、右側のデータタブの Data Source Type から [Log Service (SLS)] を選択します。
    Log Service(SLS)を選択
  5. Select Data Source の [作成] をクリックします。 新しいデータダイアログが表示されたら、関連情報を入力して [OK] をクリックします。

    注：必ず http:// または https:// を Endpoint フィールドに追加します。

  6. 完了したら、新しく作成したソースを選択します。 次の例では、簡単なクエリ例を使用しています。
    1. {
    2. "projectName": "k8s-logs",
    3. "logStoreName": "k8s-logstore",
    4. "topic": "",
    5. "from": "1518883200",
    6. "to": "1518969600",
    7. "query": "* | select count(1) as pv, date_format(from_unixtime(__time__ - __time__%3600) ,'%Y/%m/%d %H:%i:%s') as time group by time order by time limit 1000" ,
    8. "line": 100,
    9. "offset": 0
    10. }

    注：from および to はタイムスタンプで、検索コンソールで生データを調べるために使うことができます。

  7. ウィンドウの下側にある [データ応答の表示] ボタンをクリックしてデータをプレビューします。 以下の応答結果ウィンドウが表示されます。
    データ応答の表示
  8. [フィルタの選択] をクリックして、以下のフィルタを適用して、 pv が整数であることを確かめます。
    1. return Object.keys(data).map((key) => {
    2. let d= data[key];
    3. d["pv"] = parseInt(d["pv"]);
    4. return d;
    5. }
    6. )
    フィルタの選択
  9. [OK] をクリックします。
  10. 軸を設定し、設定が正しく設定されていることを確認してください。
    設定の確認
  11. [プレビュー] をクリックします。 x と y が正しいデータ型を使用しており、 pv が整数であることを確認できます。
  12. 次の例は、データのグラフを示しています。
    画像の説明
  13. このダッシュボードを公開するには、ページの右上の角にある [公開] をクリックします。 Log Service データのデータセットを使用した、完成して公開された DataV ダッシュボードの例は次のとおりです。
    公開されたDataVダッシュボードの例

    公開されたDataVダッシュボードの例

まとめ

これで、Alibaba Cloud で DataV と Log Service を一緒に設定でき、Log Service を使用してカスタムダッシュボードによるリアルタイムモニタリングを実行できました。