ビジュアリゼーションの記述

ビジュアル表示コードの記述

データポータルのヘルパー ライブラリは、ユーザーとデータポータルの間のインターフェースの役割を果たします。ライブラリを使用するには、ビジュアル表示をレンダリングするコールバック関数を提供します。

ライブラリで最も重要な関数は subscribeToData です。この関数は、ビジュアリゼーションをレンダリングする callback 関数と、データが取得するべき変換の種類を指定する options オブジェクトの 2 つの引数を取得します。詳しくは、ライブラリ リファレンスをご確認ください。

以下は、ビジュアル表示 JavaScript の概要を示しています。

function drawViz(vizData){
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  console.log(vizData);
  // this is where you write your viz code
}

dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})

コミュニティ由来ビジュアル表示を記述する際に留意すべき重要な点がいくつかあります。

subscribeToData 関数からの更新は、データ、スタイル、または iframe サイズが変更されたときに発生します。

例:

// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data){
  // clear the canvas
  var ctx = canvasElement.getContext('2d');
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);

  // viz code goes here

}

データポータルでは、HTML ではなく JavaScript ファイルが読み込まれて実行されます。すべての DOM 操作は JavaScript を介して行なわれる必要があります。

たとえば、次のコードで div を定義して DOM に追加します。

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

コードのバンドル

データポータルのコミュニティ由来ビジュアル表示で読み込むことができる JavaScript ファイルは、1 つだけです。 アップロードするコードでは、dscc ヘルパー ライブラリ、JavaScript ビジュアリゼーション ライブラリ、ビジュアリゼーション コードを単一のファイルに含めなければなりません。

bash でこれを行うには、以下のように cat コマンドを使用できます。

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

マニフェストの定義

ビジュアル表示マニフェスト ファイルでは、ビジュアル表示に関するメタデータと、ビジュアル表示リソースの場所に関する情報を提供します。マニフェスト ファイルの場所は「コンポーネント ID」と呼ばれ、コミュニティ由来ビジュアル表示を読み込むために使用されます。

マニフェスト リファレンスで、サンプル マニフェストをご確認ください。

にする必要があります。

マニフェストの devMode パラメータにより、ビジュアリゼーションのキャッシュ動作が決定されます。ビジュアリゼーションの開発中は devModetrue に設定して、強制更新によりリソースの最新バージョンが確実に読み込まれるようにします。コードが安定したら、devModefalse に設定して、コミュニティ ビジュアリゼーションを含むレポートがすばやく読み込まれるようにします。キャッシュについて詳しくは、キャッシュについての詳細ガイドをご覧ください。

次のステップ

ビジュアル表示のコードの記述が完了したので、ビジュアル表示をホストする方法を学びます。