Custom Graph リファレンス

Custom Graph で利用可能な Geometry と Statistics の一覧です。各項目の詳細は、レイヤー設定内のヘルプボタン（?）で確認できます。

テーブル内の Description はアプリ UI の表記と一致させるため英語で記載しています。

Geometry（形状）

Geometry と aesthetic の互換性

各 Geometry は特定の aesthetic（位置・色・サイズなどの視覚マッピング）のみを受け付けます。対応していない aesthetic を指定しても効果はありません。

R = required（必須）, ○ = optional（指定時に追加の動作が発生）, • = supported（対応）

• Required の aesthetic はカラムへのマッピングか Statistics による供給が必要です。
• color と fill の違い: Bar と Tile は塗りつぶしに fill を使います（color ではありません）。Area は両方を受け付けます — color は輪郭線、fill は塗りつぶしです。Ribbon は輪郭線を描画せず、color が塗りつぶし色を決めます。Ribbon の fill は threshold カラースケールを使う場合にのみ参照されます。
• stroke: Point のみが対応しています。ポイントの輪郭色を設定します。
• ymin / ymax: Line は両方が存在するとインターバルバンドを描画します。Ribbon と Errorbar では必須です。

Statistics（統計変換）

Statistics のパラメータ

各 Statistic は tabs.addGraphLayer / tabs.updateGraphLayer の stats 配列に params オブジェクトを渡します。以下の表は各 Statistic のパラメータ名、TypeScript 型、デフォルト値、説明の一覧です。

await window.midas.tabs.addGraphLayer('tab_001', {
  geom: { type: 'point' },
  stats: [
    { type: 'smooth', params: { method: 'loess', span: 0.5, interval: 'confidence' } }
  ],
  aes: { x: 'weight', y: 'mpg' }
});

型の記法: A | B は A か B のどちらかを指定、T[] は T の配列、フィールド名末尾の ?（例: p?）は省略可能を表します。各 Statistic の前提・限界・ユースケースの詳細は Custom Graph を参照してください。

Identity (No transformation)

No parameters.

Bin (Histogram)

Time Bin (Datetime Histogram)

Smooth (Regression)

Count (Aggregation)

No parameters.

Density (KDE)

Summary (Aggregation)

Survival (Kaplan-Meier)

X Mean

X Median

Y Mean

Cumulative Sum (Pareto)

Sort (Pareto)

ECDF (Empirical CDF)

No parameters.

QQ (Normal Q-Q Plot)

Transform (Linear)

Palettes（パレット）

layers[].scales の color / fill チャネルで paletteId に指定できる値の一覧です。API での設定方法は Agent API を参照してください。

Categorical

カテゴリカル変数の色分けに使います。scaleType: 'categorical' で指定します。

デフォルトは midas-default です。

Sequential

連続変数や順序尺度の変数に使います。scaleType: 'sequential' で指定します。

scaleType: 'categorical' と 'threshold' でも使用できます。カテゴリ数または閾値で区切られた領域数ぶんの色をパレット全域から等間隔にサンプリングします。

デフォルトは blues です。Viridis、Plasma、Inferno、Magma は知覚的に均一で色覚多様性に配慮したパレットです。

Diverging

中心値からの乖離を両方向に表す変数に使います。scaleType: 'diverging' で指定します。

scaleType: 'threshold' でも使用できます。閾値で区切られた領域数ぶんの色をパレット全域から等間隔にサンプリングします。

デフォルトは rdbu です。

scaleType と paletteId の互換性

threshold では thresholdColors で色を直接指定することもできます。thresholdColors を指定するとそれが優先され、省略すると paletteId のパレット全域から閾値で区切られた領域数ぶんの色を等間隔にサンプリングします。

Graph Builder の UI で scaleType を切り替えると、非互換になったパレットはその scaleType の既定パレットに自動でリセットされ、グラフはそのまま描画されます。API で非互換の paletteId を直接指定した場合は、描画時にエラーになりグラフが表示されません。

aesthetic の固定値

Agent API では、aesthetic プロパティは通常カラム名を指定してデータにマッピングします。カラムではなく定数を使いたい場合は以下のように指定します。

• 固定色: color、fill、stroke に { fixedColor: '#FF0000' } を指定します（CSS カラー文字列）
• 固定サイズ: size に正の数値を指定します（例: 5）。0 以下の値は警告とともに無視されます
• 固定アルファ: alpha に 0（完全透明）から 1（完全不透明）の数値を指定します。範囲外の値は警告とともに無視されます

await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'point' },
  aes: { x: 'weight', y: 'height', color: { fixedColor: '#3366CC' }, size: 8, alpha: 0.5 }
});

複数レイヤーに異なる固定色を設定する

各系列を個別のレイヤーとして追加し、それぞれに fixedColor を設定します。

// レイヤー 1: 実測値（青）
await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'line' },
  aes: { x: 'date', y: 'actual', color: { fixedColor: '#3366CC' } }
});

// レイヤー 2: 予測値（赤）
await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'line' },
  aes: { x: 'date', y: 'predicted', color: { fixedColor: '#CC3333' } }
});

代替手段: カテゴリカル色分け

データが long 形式（1行1観測値、グループ列あり）の場合、fixedColor の代わりにグループ列を color にマッピングします。パレットが各グループに自動で色を割り当てます。

// long 形式: 各行に "series" 列（"actual" や "predicted"）がある
await window.midas.tabs.addGraphLayer(tabId, {
  geom: { type: 'line' },
  aes: { x: 'date', y: 'value', color: 'series' }
});

系列数が動的な場合や、複数グラフで統一したパレット色を使いたい場合に適しています。

Statistics と Label の連携

レイヤーで Statistics（Count、Summary、Bin 等）を使用すると、元のカラム値が集約結果に置き換わります。aes.label のカラムマッピングでは変換後のデータから元の値を参照できません。集約値をラベルとして表示するには、aes.label の代わりに geom.defaults.labelContent を設定します。

labelContent は $ プレフィックス付きの stat 出力変数を参照します。

// Summary の平均値をラベルとして表示する
await window.midas.tabs.addGraphLayer(tabId, {
  geom: {
    type: 'label',
    defaults: {
      labelContent: { field: '$y', format: '.1f' }
    }
  },
  stats: [{ type: 'summary', params: { outputs: [{ fun: 'mean', to: 'y' }] } }],
  aes: { x: 'category', y: 'value' }
});

labelContent オブジェクトのプロパティ:

座標系

座標系はグラフレベルの設定で、tabs.configureGraph または reports.addGraph の coordinates フィールドに指定します。

• 'cartesian'（デフォルト）— 標準的な直交座標系
• 'flipped' — X 軸と Y 軸を入れ替えます。カテゴリラベルが長い横棒グラフで読みやすくなります

GUI では Graph Builder の Coordinate System セクションに対応します。表示例は Custom Graph: 軸の入れ替え を参照してください。

flipped 座標系での scales.x / scales.y

flipped 座標系では aes.y のデータが物理 X 軸（横）に、aes.x のデータが物理 Y 軸（縦）に描画されます。scales.x / scales.y の設定は、項目によって参照する軸が異なります。

• スケール種別と tick の設定（type、domain、ticks、zoomEnabled）は物理的な画面軸に適用されます。flipped でも scales.x が横軸、scales.y が縦軸を制御します
• title はデータの軸に追従します。scales.x.title は aes.x のデータの軸（flipped では縦軸）に、scales.y.title は aes.y のデータの軸（flipped では横軸）に表示されます

// 横棒グラフ: aes.x にカテゴリ、aes.y に数値をマッピングした場合
await window.midas.tabs.configureGraph(tabId, {
  coordinates: 'flipped',
  scales: {
    x: { title: 'Product' },      // aes.x の軸 — flipped では縦軸に表示
    y: { title: 'Sales (USD)' }   // aes.y の軸 — flipped では横軸に表示
  }
});

副 Y 軸（scales.y2）は flipped 座標系では無効になります。

See also

• 高度なグラフ作成 - Custom Graph の使い方とチュートリアル
• グラフの作成 - Graph Builder の基本操作

このページの Markdown 版もあります。