可視化

可視化ウィジェットのカテゴリーには、次のウィジェットがあります。

• グラフ
• 画像ギャラリー
• マップ
• テーブル
• トースト
• ツリー

---

グラフ

次のテーブルでは、グラフウィジェットで利用可能なプロパティの使用方法を詳しく説明します。テーブルの後にいくつかの例を示します。

プロパティ

IEdges

INodes

例

動的グラフ

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "camera": {
    "ratio": null,
    "x": null,
    "y": null
  },
  "edges": {
    "sourceNodeIds": "{{graph.sourceNodeIds}}",
    "targetNodeIds": "{{graph.targetNodeIds}}"
  },
  "nodes": {
    "iconUrls": "{{graph.iconUrls}}",
    "ids": "{{graph.ids}}",
    "labels": "{{graph.ids}}",
    "xPositions": "{{graph.xPositions}}",
    "yPositions": "{{graph.yPositions}}"
  },
  "selectedNodeIds": [
    "n18"
  ]
}

静的グラフ

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
{
  "camera": {
    "ratio": null,
    "x": null,
    "y": null
  },
  "defaultIconUrl": "resources/map-people.svg",
  "edges": {
    "ids": [
      "e1",
      "e2",
      "e3",
      "e4",
      "e5"
    ],
    "labels": [
      "e1",
      "e2",
      "e3",
      "e4",
      "e5"
    ],
    "sourceNodeIds": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "targetNodeIds": [
      "n2",
      "n3",
      "n4",
      "n5",
      "n1"
    ]
  },
  "layout": {
    "type": "layered"
  },
  "nodes": {
    "ids": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "labels": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "xPositions": [
      100,
      30.9,
      -80.9,
      -80.9,
      30.9
    ],
    "yPositions": [
      0,
      95.1,
      58.78,
      -58.78,
      -95.1
    ]
  },
  "selectedNodeIds": [
    "n1"
  ]
}

デフォルト

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "camera": {
    "ratio": null,
    "x": null,
    "y": null
  },
  "edges": {
    "sourceNodeIds": [],
    "targetNodeIds": []
  },
  "nodes": {
    "ids": [],
    "xPositions": [],
    "yPositions": []
  },
  "selectedNodeIds": []
}

---

画像ギャラリー

次のテーブルでは、画像ギャラリーウィジェットで利用可能なプロパティの使用方法を詳しく説明します。

プロパティ

---

マップ

Slate のマップウィジェットは Leaflet ↗ を元にしています。

マップは、ベースレイヤー（タイルレイヤーとも呼ばれ、背景の地図画像を表示します）と、いくつかのオーバーレイレイヤー（フィーチャーレイヤーとも呼ばれ、対象のデータを表示します）で構成されます。マップウィジェットは、フィーチャーレイヤーでラスタータイルとベクタータイルの両方をサポートしています。

Web 地図技術についてのわかりやすい入門情報は、Mapbox のドキュメント ↗を参照してください。Slate は、ベースマップ画像のソースとして Mapbox を使用しています。

用語

• 地図タイル： マップウィジェットのベースレイヤーです。これらのタイルは単なる画像であり、データは含まれていません。地図タイルは、地図の「背景」と考えることができます。地図タイルはその他タブで設定し、1つのレイヤーだけでなくマップウィジェット全体に適用されます。一度に表示できる地図タイルは1種類のみです。
• フィーチャー： 地図上に描画され、何らかのデータに関連付けられた点または図形です。
• ベクター： 画像を表現する別の方法です。ラスター画像は、画像をピクセルごとに記述します。つまり、色付きピクセルのグリッドとして記述します。一方、ベクター画像は、点と点の間の線を記述します。そのため、ベクター画像は異なるサイズでもきれいに表示できます。
• ベクタータイル： 図形データをベクターとして含みます。
• タイルサーバー： 図形データをタイルとして動的に配信します。
• 地図タイルソース： 地図のベースタイルを配信します。技術的には、これもタイルサーバーです。

レイヤーの種類

Slate には、次の種類のオーバーレイレイヤーがあります。

• 位置
• ヒートマップとヒートグリッド
• 図形
• ベクター
• コロプレス
• Raven

位置

位置レイヤーには、緯度と経度のペアで識別される点（Leaflet のマーカー ↗）のみが含まれます。マップウィジェットを設定して、これらの点を円またはアイコンとして表示できます。

ヒートマップとヒートグリッド

ヒートマップレイヤーとヒートグリッドレイヤーも点データを扱いますが、単に地図上に点を表示するのではなく、点の分布に関する計算結果をオーバーレイとして表示します。ヒートマップは点の密度を色のグラデーションで示します。一方、ヒートグリッドは点をバケットにまとめ、バケットを個別の色付きセルとして表示します。

図形

図形レイヤーとベクターレイヤーでは、個々の点だけでなく、ポリゴンの形式のデータも扱えます。ポリゴンは、一連の点とそれらを結ぶ線として保存される情報です。図形レイヤーは、これらのポリゴンを GeoJSON ↗ 形式で提供します。GeoJSON ファイルは Slate サーバーから直接配信できます。

GeoJSON フィーチャーは JSON として保存され、SVG（画像）ファイルに変換されます。これらの画像は、マップウィジェットが最初に読み込まれるときにすべて一度に読み込まれます。

ベクター

ベクターレイヤーは、ベクタータイルで図形データを提供します。ベクタータイルを配信するには、外部タイルサーバーを稼働させておく必要があります。 ベクタータイルは動的に読み込まれます（地図の表示範囲に入ったときにのみ読み込まれます）。また、ベクタータイルはフィーチャーを画像としてレンダリングするのではなく、キャンバスに直接描画するため、ベクターレイヤーでは図形レイヤーよりもはるかに多くのフィーチャーを扱えます

コロプレス

コロプレスレイヤーもポリゴンデータを扱いますが、各フィーチャーに値を追加し、その値をカラースケールに対応付けます。これにより、各フィーチャーは、その値に対応する色で地図上に表示されます。これは、特定の統計値を可視化するものです。

たとえば、人口密度によって州を色分けした地図や、社会的脆弱性指数によって郵便番号区域を色分けした地図が考えられます。

Raven

Slate アプリケーションで Raven マップを使用する必要がある場合は、Palantir の担当者にお問い合わせください。

ベースタイル

マップウィジェットには、ベースタイルレイヤー用の選択肢がいくつか用意されています。ダークテーマ、ライトテーマ、衛星画像テーマ、道路地図テーマ、およびデフォルトテーマがあります。また、すべてという選択肢もあり、レイヤーセレクターを使って地図上で直接テーマを切り替えられます。

プロパティエディターのその他タブで、タイルレイヤードロップダウンから選択します。

地図上のデータ規模

図形レイヤー（GeoJSON）が対応できるデータ規模は最も小さく、フィーチャーが約1,000個になると、地図のパフォーマンスが著しく低下します。それより大きなデータには、代わりにベクターレイヤーを使用してください。パフォーマンスを向上させるために、GeoJSON 内のジオメトリを簡略化してみることもできます。

位置レイヤーは、点が約5,000～10,000個になると動作が遅くなります。

インタラクティブ操作を無効にする

アプリケーションに固定の地図を表示したい場合は、パンとズームを無効にできます。また、フィーチャーデータだけを表示し、ベースマップのタイルを表示しない場合は、ベースレイヤーを外すこともできます。

例

位置マップレイヤー

カスタムスタイルを含みます。

レイヤー名または .layer${layerIndex} を使って、レイヤー内のすべてのマーカーやクラスターにスタイルを設定することもできます。有効な CSS クラスであるレイヤー名のみが追加されます。

コロプレスマップレイヤー

ベクターマップレイヤー

ヒートマップレイヤー

プロパティ

IBaseLayerOptions

IBounds

IChoroplethLayerOptions

IColorScaleOptions

IHeatgridLayerOptions

IHeatmapLayerOptions

ILatLng

ILayerModel

ILocationLayerOptions

IMapSelection

IRectangleShape

ICircleShape

IRavenLayerFilterOptions

IRavenLayerOptions

IShapeLayerOptions

IVectorTileLayerOptions

IVectorTileOptions

IVectorTileStyleOptions

---

テーブル

次のテーブルでは、テーブルウィジェットで利用可能なプロパティの使用方法を説明します。テーブルの後に、いくつかの例を示します。

プロパティ

IColumnOption

IGridOptions

ISelectionOptions

ISortOptions

ITableHover

ITablePagingOptions

例

動的テーブル

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{
  "columnData": "{{query1}}",
  "columnOptions": {
    "id": {
      "name": "ID",
      "width": 50
    },
    "name": {
      "name": "Full Name"
    },
    "address": {
      "name": "Home Address"
    },
    "phone_number": {
      "name": "Phone Number"
    },
    "score": {
      "name": "Score",
      "horizontalAlignment": "right"
    }
  },
  "columnOrder": [
    "id",
    "name",
    "address",
    "phone_number",
    "score"
  ],
  "gridOptions": {
    "enableSelection": true,
    "enableSorting": true,
    "pagingOptions": {
      "currentOffset": 0,
      "pageSize": 10,
      "totalServerItems": 100
    },
    "selectionOptions": {
      "checkbox": false,
      "multiSelect": true
    },
    "sortOptions": {
      "columnId": "score",
      "isAscending": false
    }
  },
  "selectedRowKeys": [],
  "selectionIdentityColumnId": "id",
  "serverEnabled": true,
  "tooltipsEnabled": false
}

静的テーブル

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "columnData": {
    "staticOptions": [
      "option1",
      "option2",
      "option3"
    ]
  },
  "columnOptions": {},
  "columnOrder": [],
  "gridOptions": {
    "enableSelection": true,
    "selectionOptions": {
      "checkbox": true,
      "multiSelect": false
    }
  },
  "selectedRowKeys": [],
  "selectionIdentityColumnId": "staticOptions",
  "serverEnabled": false,
  "tooltipsEnabled": false
}

デフォルト

Copied!
1
2
3
4
5
6
7
8
9
{
  "columnOptions": {},
  "columnOrder": [],
  "gridOptions": {},
  "selectedRowKeys": [],
  "selectionIdentityColumnId": "Metric",
  "serverEnabled": false,
  "tooltipsEnabled": false
}

チュートリアル：テーブルウィジェットを追加する

フライトデータを表示するためにテーブルウィジェットを追加するとします。左上のウィジェットボタンを選択し、可視化 > テーブルを選択して、Slate アプリケーションにテーブルウィジェットを追加します。

テーブルウィジェットの名前を、識別しやすい名前に変更します。プロパティエディターでウィジェットの名前を選択し、w_flightTable に変更します。

データ項目に "{{q_allFlights}}" を入力して、q_allFlights クエリを使用するようにテーブルを設定します。テーブルにデータが表示されるはずです。

値 "{{q_allFlights}}" は純粋な JSON 構文ではありません。中括弧は Handlebars の構文で、各式は {{expression}} として表されます。Slate での使用方法については、Handlebars を参照してください。）

テーブルには正しいデータが表示されていますが、書式は改善できます。すべての列を追加を選択して、元データの各列の書式設定オプションを表示します。

flight_id 列は人が読んで理解しやすい列ではないため、今は非表示にします。ただし、後で1行以上を選択できるように設定する際に参照するため、テーブルには保持します。

残りの列については、タイトルとして表示名を選択し、MomentJS ↗ の書式文字列を使用してタイムスタンプを読みやすくする書式文字列を追加します。

これで、すべてのデータを見やすく表示するテーブルができました。

次に、選択と並べ替えを通じてユーザーがテーブルをどのように操作できるかを設定します。

プロパティエディターのその他タブに切り替え、選択を許可と並べ替えを有効にするにチェックを入れます。これで、ユーザーは列を直接選択してテーブルをさまざまな方法で並べ替えたり、特定の行をクリックして選択したりできます。

最後に、テーブルの各行の一意の識別子として何を使用するかを決めます。この場合は、フライトの名前を使用します。キー列 IDというラベルのドロップダウンで、flight_id を選択します。

ページングと並べ替えを設定する

ページングを有効にするとサーバー側ページング/並べ替えのチェックボックスにチェックを入れます。ページサイズの数値を選択して、一度にユーザーに表示する行数を設定します。

これらのオプションを有効にすると、テーブルは現在のページを追跡するようになります。この情報をクエリで使用して、表示に必要な行だけを取得できます。

クエリエディターを開き、q_allFlights に戻ります。ここで、テーブルに設定したページサイズを反映するように LIMIT 文を更新し、OFFSET 文を追加して、正しいページの結果を返すよう Postgres に要求します。

クエリのデータをテーブルウィジェットに組み込む際に使用したものと同じ Handlebars 構文を使用して、クエリ内からテーブルウィジェットの状態を参照します。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
SELECT
    flight_id,
    carrier_code,
    tail_num,
    origin,
    dest,
    dep_ts_utc,
    arr_ts_utc,
    distance,
    actual_elapsed_time
FROM "foundry_sync"."{{v_flightTable}}"
LIMIT {{w_flightTable.gridOptions.pagingOptions.pageSize}}
OFFSET {{w_flightTable.gridOptions.pagingOptions.currentOffset}}

これで、テーブルには一度に20行が表示され、次へ進むボタンを選択したり、特定のページに移動したりできます。次に、「総件数」を正しく表示できるように、テーブルウィジェットに総行数を渡します。

これを行うには、q_flightCount という新しいクエリを作成し、行数を数えます。

Copied!
1
2
3
SELECT
    COUNT(flight_id) as num_flights
FROM "foundry_sync"."{{v_flightTable}}"

更新するを選択してクエリを保存し、テーブルウィジェットのその他タブに戻ります。サーバー側の総件数の入力で、Handlebars を使用してクエリ内の件数を参照します。

{{q_flightCount.num_flights.[0]}}

これで、テーブルは総件数（flights データセットでは420万件、last-mile-flights では73,946件）のうち、特定の行を表示していることを認識します。

これでページングの設定が完了し、ユーザーのブラウザーに負荷をかけたり、クエリがタイムアウトしたりすることなく、大規模なデータセットを順に表示できます。ユーザーによるテーブルのインタラクションにクエリが応答するように、サーバー側の並べ替えを有効にする必要がまだあります。

q_allFlights に戻り、クエリに ORDER BY 句を追加します。pagingOptions.pageSize と pagingOptions.currentOffset を参照したのと同様に、.sortOptions.columnId と .sortOptions.isAscending を参照して、適切な SQL 文を作成します。

Copied!
1
2
3
4
5
6
ORDER BY {{w_flightTable.gridOptions.sortOptions.columnId}}
    {{#if w_flightTable.gridOptions.sortOptions.isAscending}}
        ASC
    {{else}}
        DESC
    {{/if}}

新たに使用できるようになった Handlebars の条件付きブロック文が表示されるはずです。この文を使用すると、テキスト補間にロジックを組み込めます。この場合は、テーブルでのユーザーの選択に基づいて、ASC または DESC を選択できます。

これで、クエリ全体は次のようになるはずです。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
SELECT
    flight_id,
    carrier_code,
    tail_num,
    origin,
    dest,
    dep_ts_utc,
    arr_ts_utc,
    distance,
    actual_elapsed_time
FROM "foundry_sync"."{{v_flightTable}}"
ORDER BY {{w_flightTable.gridOptions.sortOptions.columnId}}
    {{#if w_flightTable.gridOptions.sortOptions.isAscending}}
        ASC
    {{else}}
        DESC
    {{/if}}
LIMIT {{w_flightTable.gridOptions.pagingOptions.pageSize}}
OFFSET {{w_flightTable.gridOptions.pagingOptions.currentOffset}}

表示している情報がひと目でわかるタイトルをテーブルに付けます。

ウィジェットボタンを選択し、選択肢から通常のプレーンテキストウィジェットを選択します。

テキストウィジェットに、テーブルのタイトルとして、状況に応じて All Flights または Last Mile Flights を入力します。

グリッド線を使用してすべての位置を揃えながら、テキストウィジェットをテーブルの左上に移動します。

次に、タイトルとサブタイトルの下にテーブルを適切に配置します。Cmd キーを押しながら両方のウィジェットを選択（またはドラッグして選択）して、テーブルとそのタイトルを両方選択し、アプリケーションのタイトルの下に適切に揃うように移動します。

完成したテーブルウィジェットを含むアプリケーションは、次のようになるはずです。行の選択とテーブルの並べ替えができるようになったことを確認します。

---

Toast

次のテーブルは、Toast ウィジェットで利用可能なプロパティの使用方法の詳細を示しています。テーブルの後にいくつかの例を示します。

プロパティ

アクション

イベント

例

Toast

Copied!
1
2
3
4
5
6
7
{
  "actionText": "Toast Example",
  "hasAction": false,
  "intent": -1,
  "message": "Toast Message",
  "timeout": 600
}

デフォルト

Copied!
1
2
3
4
5
6
7
{
  "actionText": "Action!",
  "hasAction": false,
  "intent": -1,
  "message": "Message",
  "timeout": 3000
}

---

Tree

次のテーブルは、Tree ウィジェットで利用可能なプロパティの使用方法の詳細を示しています。

プロパティ

デフォルト

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "contents": [
                {
                  "childNodes": [
                      {id: 3, label: "bar 1"},
                      {id: 4, label: "bar 2"}
                  ],
                  "iconName": "folder-close",
                  "id": 1,
                  "label": "bars",
                },
                {
                  "id": 2,
                  "label": "foo"
                }
              ],
  "searchText": "",
  "selectedNodes": [],
  "selectionType": SelectionType.SINGLE
}