edit-icon download-icon

クイックスタート

最終更新日: Dec 22, 2017

クイックスタートの場合:春節前後の中国大気の変化を確認するには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