デベロッパー アンケートにご協力ください。お寄せいただいたフィードバックは、データポータルの機能向上やサービスの改善に活用させていただきます。

ビジュアリゼーション設定の定義

コミュニティ ビジュアリゼーションのデータおよびスタイルのオプションは、設定 JSON で定義されます。data 設定により、ビジュアリゼーションでサポートされているディメンションと指標の数が設定されます。style 設定では、プロパティ パネルで使用可能なスタイル選択ツールが定義されます。

データ設定

data 設定により、データポータルでプロパティ パネルにレンダリングされる DIMENSION および METRIC 要素が定義されます。各要素は、ビジュアル表示への入力としてエンドユーザーが提供するディメンションおよび要素のフィールドに対応します。

サンプルデータ要素:

{
  "id": "twoDimensionsPlease",
  "label": "Dimension Element Heading",
  "type": "DIMENSION",
  "options": {
    "min": 2,
    "max": 2,
  }
}

データ要素で定義した id は、データポータルのレスポンスの情報に含まれます。label でデータ セクションの上に表示されるテキストを定義し、type でそのテキストがディメンションか指標かを定義します。options オブジェクトで、ユーザーがデータ要素に追加できるフィールドの最小数と最大数を定義します。

DIMENSION データ要素では、options オブジェクトはオプションの supportedTypes キーをサポートしています。このキーが定義されている場合、要素に追加できるディメンション フィールドのタイプが制限されます。supportedTypes の値には、「DEFAULT」、「TIME」、および「GEO」の任意の組み合わせを含む配列を指定できます。

データ セクションで、複数のデータ要素がグループ化され、label がその見出しとしてレンダリングされます。

サンプルのデータ セクション:

{
  "id": "dimensionSection1",
  "label": "Dimension Section Heading",
  "elements":[
    // array of data elements
  ]
}

以下のスクリーンショットは、データポータルで上記のデータ セクションとデータ要素がレンダリングされる方法を示しています。

プロパティ パネルのデータ要素のスクリーンショット

スタイル設定

スタイル設定で、プロパティ パネルに表示されるスタイル選択ツールを定義します。

サンプルのスタイル要素:

{
  "id": "linkOpacity",
  "label": "Link opacity",
  "type": "OPACITY",
  "defaultValue": "0.2"
}

label でツールチップとして表示されるテキストを定義し、type でデータポータルにレンダリングするスタイル選択ツールの種類を定義します。オプションの defaultValue で各スタイル要素のデフォルト値を定義します。

データ要素と同様に、スタイル要素は見出しと論理グループを指定して、セクション内で定義します。使用可能な選択ツールの完全なリストについては、設定リファレンスをご覧ください。

スタイル セクションのサンプル:

{
  "id": "styleGroup1",
  "label": "Header for style group",
  "elements": [
    // insert Style Elements here
  ]
}

次のスクリーンショットは、不透明度選択ツールを備えたスタイルパネルの例を示しています。例中のツールチップ「Link Opacity」は、スタイル要素の label に対応しています。

スタイル選択ツールのスクリーンショット

インタラクション設定

interaction 設定では、コミュニティ ビジュアリゼーションにおけるグラフ インタラクションの動作を定義します。この設定は省略可能です。

例:

{
  "id": "onClick",
  "supportedActions": ["FILTER"]
}

現時点でサポートされているのは FILTER のみです。インタラクションを設定すると、プロパティ パネルにチェックボックスが表示されます。

スタイル選択ツールのスクリーンショット

ビジュアリゼーション設定のサンプルを確認するには、サンプル設定を参照してください。

次のステップ

設定の定義が完了したので、ビジュアリゼーションを記述します。