ビジュアライゼーション

ビジュアライゼーションウィジェットのカテゴリーは以下のウィジェットから構成されています：

• グラフ
• イメージギャラリー
• マップ
• テーブル
• トースト
• ツリー

---

グラフ

以下の表は、グラフウィジェットで利用可能なプロパティについての使用詳細を提供します。表の後にはいくつかの例が続きます。

プロパティ

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, // ズームレベル（nullの場合、デフォルト値が使用されます）
    "x": null, // カメラのX座標（nullの場合、デフォルト値が使用されます）
    "y": null // カメラのY座標（nullの場合、デフォルト値が使用されます）
  },
  "edges": { // エッジ（ノード間のリンク）の設定
    "sourceNodeIds": "{{graph.sourceNodeIds}}", // エッジの始点となるノードのID
    "targetNodeIds": "{{graph.targetNodeIds}}" // エッジの終点となるノードのID
  },
  "nodes": { // ノード（グラフの頂点）の設定
    "iconUrls": "{{graph.iconUrls}}", // ノードのアイコンURL
    "ids": "{{graph.ids}}", // ノードのID
    "labels": "{{graph.ids}}", // ノードのラベル
    "xPositions": "{{graph.xPositions}}", // ノードのX座標
    "yPositions": "{{graph.yPositions}}" // ノードのY座標
  },
  "selectedNodeIds": [ // 選択されたノードのID
    "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
75
76
77
78
79
80
{
  // カメラの設定
  "camera": {
    "ratio": null, // 比率
    "x": null, // x座標
    "y": null // y座標
  },
  // デフォルトのアイコンURL
  "defaultIconUrl": "resources/map-people.svg",
  // エッジ（接続線）の設定
  "edges": {
    "ids": [
      "e1",
      "e2",
      "e3",
      "e4",
      "e5"
    ],
    "labels": [
      "e1",
      "e2",
      "e3",
      "e4",
      "e5"
    ],
    "sourceNodeIds": [ // 出発ノードID
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "targetNodeIds": [ // 到着ノードID
      "n2",
      "n3",
      "n4",
      "n5",
      "n1"
    ]
  },
  // レイアウトの設定
  "layout": {
    "type": "layered" // レイヤー型
  },
  // ノード（要素）の設定
  "nodes": {
    "ids": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "labels": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "xPositions": [ // x座標
      100,
      30.9,
      -80.9,
      -80.9,
      30.9
    ],
    "yPositions": [ // y座標
      0,
      95.1,
      58.78,
      -58.78,
      -95.1
    ]
  },
  // 選択されたノードID
  "selectedNodeIds": [
    "n1"
  ]
}

デフォルト

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, // カメラのx座標
    "y": null // カメラのy座標
  },
  // エッジの情報
  "edges": {
    "sourceNodeIds": [], // ソースノードのID配列
    "targetNodeIds": [] // ターゲットノードのID配列
  },
  // ノードの情報
  "nodes": {
    "ids": [], // ノードのID配列
    "xPositions": [], // ノードのx座標配列
    "yPositions": [] // ノードのy座標配列
  },
  // 選択されたノードのID配列
  "selectedNodeIds": []
}

---

画像ギャラリー

以下の表は、画像ギャラリーウィジェットで利用可能なプロパティの使用詳細を提供しています。

プロパティ

---

マップ

Slateのマップウィジェットは Leaflet によって支えられています。

マップはレイヤーで構成されています：ベースレイヤー（タイルレイヤーとも呼ばれ、これは背景マップ画像です）と、特定の数のオーバーレイレイヤー（フィーチャーレイヤーとも呼ばれ、これがあなたが関心を持つデータです）。マップウィジェットは、フィーチャーレイヤーに対してラスタとベクタのタイルの両方をサポートしています。

ウェブマップテクノロジーへの役立つ導入として Mapboxのドキュメンテーション を参照してください。Slateはベースマップ画像のソースとしてMapboxを使用しています。

用語

• マップタイル: マップウィジェットのベースレイヤーで、これらのタイルは単に画像です。データは含まれていません。マップタイルをマップの「背景」と考えることができます。マップタイルは Misc タブで設定され、マップウィジェット全体に適用され、単一のレイヤーだけでなく。一度に表示できるマップタイルの種類は一つだけです。
• フィーチャー: マップの上に描かれた点や形状で、何らかのデータと関連付けられています。
• ベクタ: 画像を表現する別の方法。ラスタ 画像は画像をピクセル単位で説明します。つまり、色付きピクセルのグリッドとして。対照的に、ベクタ 画像は点間の線を説明します。これは、ベクタ画像がさまざまなサイズでクリーンに表示できることを意味します。
• ベクタータイル: ベクタとして形状データを含んでいます。
• タイルサーバー: タイルとして形状データを動的に提供します。
• マップタイルソース: マップのベースタイルを提供します。技術的にはタイルサーバーでもあります。

レイヤータイプ

Slateは以下のタイプのオーバーレイレイヤーを持っています：

• Location
• Heat map and heat grid
• Shape
• Vector
• Choropleth
• Raven

Location

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

Heat map and heat grid

Heat mapとheat gridのレイヤーも点データを扱いますが、単にマップ上に点を表示するだけでなく、それらの点の 分布 についての計算を表示するオーバーレイを表示します。Heat mapは点の密度を色付きのグラデーションとして表示し、heat gridは点をバケツにグループ化し、バケツを離散的な色セルとして表示します。

Shape

単一の点だけでなく、形状とベクタレイヤーは ポリゴン の形でデータを持つこともできます。これは一連の点とそれらの間の線として保存された情報です。Shapeレイヤーはこれらのポリゴンを GeoJSON 形式で提供します。GeoJSONファイルはあなたのSlateサーバーから直接提供することができます。

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

Vector

ベクタレイヤーはベクタタイルで形状データを提供します。ベクタタイルを提供するためには外部のタイルサーバーが稼働している必要があります。 ベクタタイルは動的にロードされます（マップ上で見えるようになるとすぐに）。ベクタタイルはまた、フィーチャーを画像としてレンダリングするのではなく、キャンバス上に直接描画するため、ベクタレイヤーはshapeレイヤーよりも多くのフィーチャーを持つことができます。

Choropleth

Choroplethレイヤーもポリゴンデータを扱いますが、各フィーチャーに追加の値を追加し、これらの値を色スケールに投影します。それぞれのフィーチャーは、その値に対応する色でマップ上に表示されます。これは特定の統計の視覚化として機能します。

例えば、人口密度によって色分けされた州のマップ、または社会的脆弱性指数によって色分けされた郵便番号を持つマップがあります。

Raven

あなたのSlateアプリケーションでRavenマップを使用する必要がある場合は、あなたのPalantir代表者に連絡してください。

ベースタイル

マップウィジェットには、ベースタイルレイヤーのいくつかのオプションが付属しています。オプションには、ダークテーマ、ライトテーマ、衛星テーマ、ストリートマップテーマ、デフォルトテーマが含まれています。また、All オプションもあります。これは、レイヤーセレクターを使用してマップ上で直接テーマを切り替えることができます。

プロパティエディターの Misc タブで、Tile Layer ドロップダウンから選択します：

マップ上のデータスケール

Shapeレイヤー（GeoJSON）は最も低いデータスケールをサポートしています。約1,000のフィーチャーで、マップのパフォーマンスが顕著に低下します。それ以上の大きなデータについては、代わりにベクタレイヤーを使用する必要があります。また、GeoJSONのジオメトリを単純化することでパフォーマンスを向上させることも試みることができます。

Locationレイヤーは約5,000-10,000点で遅くなります。

対話性の無効化

アプリケーションで静的なマップを表示したい場合は、パンニングとズームを無効にすることができます。また、フィーチャーデータだけを表示したい場合は、ベースレイヤーを削除することもできます。

例

ロケーションマップレイヤー

カスタムスタイルが含まれています：

また、レイヤーの名前または.layer${layerIndex}を使用して、レイヤー内のすべてのマーカー/クラスターをスタイリングすることもできます。有効なCSSクラスであるレイヤー名だけが追加されます：

Choroplethマップレイヤー

Vectorマップレイヤー

Heat mapレイヤー

プロパティ

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", // 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", // オプション1
      "option2", // オプション2
      "option3" // オプション3
    ]
  },
  "columnOptions": {}, // 列のオプション
  "columnOrder": [], // 列の順序
  "gridOptions": { // グリッドのオプション
    "enableSelection": true, // 選択を有効にする
    "selectionOptions": { // 選択オプション
      "checkbox": true, // チェックボックスを有効にする
      "multiSelect": false // 複数選択を無効にする
    }
  },
  "selectedRowKeys": [], // 選択された行のキー
  "selectionIdentityColumnId": "staticOptions", // 選択のアイデンティティ列ID
  "serverEnabled": false, // サーバーを有効にする
  "tooltipsEnabled": false // ツールチップを有効にする
}

デフォルト

Copied!
1
2
3
4
5
6
7
8
9
{
  "columnOptions": {}, // 列オプション：各列の特性を定義するオプション
  "columnOrder": [], // 列の順序：データグリッドの列の順序を指定します
  "gridOptions": {}, // グリッドオプション：データグリッド全体の設定を指定します
  "selectedRowKeys": [], // 選択された行のキー：選択された行の識別キーのリスト
  "selectionIdentityColumnId": "Metric", // 選択識別列ID：選択の識別に使用される列のID
  "serverEnabled": false, // サーバー有効：サーバーサイドの操作を有効にするかどうか
  "tooltipsEnabled": false // ツールチップ有効：データグリッドのツールチップを有効にするかどうか
}

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

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

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

テーブルを q_allFlights クエリを使用するように設定します。Data フィールドに "{{q_allFlights}}" を入力します。データがテーブルに反映されるはずです。

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

テーブルには正しいデータが表示されていますが、フォーマットを改善することも可能です。 Add all columns を選択して、基本データの各行のフォーマットオプションを表示します。

flight_id 行は人間が読める形式ではないので、一旦その行を非表示にします。ただし、1つ以上の行を選択する機能を設定する際に参照するため、テーブル内にはその行を保持します。

他の行については、表示名を Title として選択し、MomentJS のフォーマット文字列を使用してタイムスタンプを綺麗に表示します。

これで、全てのデータを綺麗に表示するテーブルが完成しました：

次に、ユーザーがテーブルで選択やソーティングを通じてどのようにインタラクションできるかを設定します。

プロパティエディタの Misc タブに切り替え、Allow Selection と Enable Sorting をチェックします。これで、ユーザーは列を直接選択してテーブルを異なる方法でソートしたり、特定の行を選択することができます。

最後に、テーブル内の特定の行の一意の識別子として何を使用するかを決定します。このケースでは、フライトの名前を使用します。 Key column ID とラベル付けされたドロップダウンで flight_id を選択します。

ページングとソーティングの設定

Enable Paging と Server Paging/Sorting のチェックボックスをチェックします。 Page Size に数値を設定して、一度にユーザーに表示する行の数を設定します。

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

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

テーブルウィジェットからクエリにデータを含めるために使用した同じHandlebars構文を使用して、クエリ内からテーブルウィジェットの状態を参照します：

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
SELECT
    flight_id, -- フライトID
    carrier_code, -- 運送業者コード
    tail_num, -- 機体番号
    origin, -- 出発地
    dest, -- 目的地
    dep_ts_utc, -- 出発時刻 (UTC)
    arr_ts_utc, -- 到着時刻 (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  -- 飛行IDの数（num_flightsとして名付けられ）を選択します
FROM "foundry_sync"."{{v_flightTable}}"  -- "foundry_sync"の"{{v_flightTable}}"から

Update を選択してクエリを保存し、テーブルウィジェットの Misc タブに戻ります。Server Total 入力では、ハンドルバーを使用してクエリ内のカウントを参照します：

{{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
7
8
9
-- 以下のコードは、指定されたカラムIDに基づいてデータを並べ替えます
ORDER BY {{w_flightTable.gridOptions.sortOptions.columnId}}
    -- もし昇順であれば、ASC（昇順）を使用します
    {{#if w_flightTable.gridOptions.sortOptions.isAscending}}
        ASC
    -- それ以外の場合は、DESC（降順）を使用します
    {{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
20
21
22
-- 以下のクエリは、航空便の情報を選択し、指定されたソートオプションとページングオプションで並べ替えるものです。
SELECT
    flight_id,  -- フライトID
    carrier_code,  -- キャリアコード
    tail_num,  -- 機体番号
    origin,  -- 出発地
    dest,  -- 目的地
    dep_ts_utc,  -- 出発時刻（UTC）
    arr_ts_utc,  -- 到着時刻（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}}  -- 1ページあたりの表示件数
OFFSET {{w_flightTable.gridOptions.pagingOptions.currentOffset}}  -- 現在のオフセット

表示する情報を一目で説明するタイトルをテーブルにつけます。

Widget ボタンを選択し、オプションからプレーンな Text ウィジェットを選択します。

Text ウィジェットにテーブルのタイトルを入力します: All Flights または Last Mile Flights が適切です。

テキストウィジェットをテーブルの左上隅に移動し、グリッドラインを使ってすべてが整列するようにします。

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

ユーザーのアプリケーションは次のようになり、完成したテーブルウィジェットが表示されます。ここから行を選択してテーブルをソートできます。

---

トースト

以下のテーブルでは、トーストウィジェットに利用できるプロパティについての使用詳細を提供します。テーブルの後にはいくつかの例が続きます。

プロパティ

アクション

イベント

例

トースト

Copied!
1
2
3
4
5
6
7
{
  "actionText": "Toast Example",  // "アクションテキスト"：「トーストの例」
  "hasAction": false,  // "アクションの有無"：なし（false）
  "intent": -1,  // "インテント"：-1
  "message": "Toast Message",  // "メッセージ"：「トーストメッセージ」
  "timeout": 600  // "タイムアウト"：600
}

デフォルト

Copied!
1
2
3
4
5
6
7
{
  "actionText": "Action!", // アクションテキスト: アクションを表す文字列
  "hasAction": false, // アクション有無: アクションがある場合はtrue、ない場合はfalse
  "intent": -1, // 意図: アクションの意図を表す数値（-1は未定義を表す）
  "message": "Message", // メッセージ: ユーザに表示するメッセージ
  "timeout": 3000 // タイムアウト: アクションがタイムアウトするまでの時間（ミリ秒）
}

---

ツリー

以下の表は、ツリー・ウィジェットに利用できるプロパティについての使用詳細を提供します。

プロパティ

デフォルト

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
{
  "contents": [
                {
                  // 子ノード
                  "childNodes": [
                      {id: 3, label: "bar 1"}, // ID 3、ラベル「bar 1」
                      {id: 4, label: "bar 2"} // ID 4、ラベル「bar 2」
                  ],
                  // アイコン名
                  "iconName": "folder-close",
                  // ID
                  "id": 1,
                  // ラベル
                  "label": "bars",
                },
                {
                  // ID
                  "id": 2,
                  // ラベル
                  "label": "foo"
                }
              ],
  // 検索テキスト
  "searchText": "",
  // 選択されたノード
  "selectedNodes": [],
  // 選択タイプ
  "selectionType": SelectionType.SINGLE
}