メトリクスの可視化
1）イメージングの目的
迅速に理解する：3〜5秒でトレンド/異常/シフトを認識します。
正確に比較：期間、セグメント、バリアントA/B。
データを信じなさい：不確実性、源、新鮮さを示して下さい。
行為：グラフの横-CTA、フィルター、プレイブックへのリンク。
2）メートル法のタイプおよび最もよい形態
3）スケール、軸および集計
スケール： デフォルトでは線形；対数-複数の範囲の場合；パーセンテージ-［0；100].
ゼロ基準：バー-ゼロから；lines-ゼロの要件なし（ただしベースラインを表示）。
集計：日/時/分、p50/p95/p99；「騒々しい」分布の平均を避けます。
ロールアップ/ドリルダウンボタン「D/N/H」 （day/week/hour）と階層（region→strana→gorod）の中にあります。
サンプリングポイント（ダウンサンプリング）：長い行のためのLTTB/MinMax極端を失わないように。
4）コンテキストと比較
期間比較：「Current vs Previous」（点線でオーバーレイ）および/または小さな倍数；相対的な∆および絶対∆を署名して下さい。
季節：週末/休日のバックグラウンドバンド、1時間ごとに暖かい/寒いゾーン。
ベンチマーク：水平ノルム/ターゲットライン（SLO/SLA）、符号単位、時間水平線。
信頼間隔：ストリップ/テープ± CI；A/Bの場合-エラーバーとp値/エレベーター。
5）不確実性、省略、改訂
省略：ラインを壊して下さい（ゼロと接続しないで下さい）；不完全なウィンドウのための灰色の"fogs'。
データラグ：バッジ「データは12分遅れています」、タイムスタンプを取得したツールチップ。
リビジョン：薄いハッチング領域は「再計算」され、changelogを参照します。
6）色、形および利用可能性（A11y）
パレット：中立基盤；赤-クリティカル、オレンジ-警告、緑-肯定的。
色の独立性：値/マーカー/署名で複製；WCAG AA ≥対照。
行の数：≤ 5グラフあたり；そうでなければ小さな倍数/ファセットです。
サイズ/クリック：インタラクティブターゲット≥ 32-40 px；フォーカスリング、キーボードナビゲーション。
7）正しく署名して下さい
軸：単位、数値形式（1,234,56；12.3K；5.2%);ロケールを持つデータラベル。
伝説：視覚的に重要な順序で；include/excludeシリーズをクリックできます。
注釈：簡単かつケース（「release」 PSP_X 「incident#4217」）で、イベントを参照します。
8）相互作用： 積み過ぎないで下さい
ホバー/ツールチップ：キーフィールドと∆とベースラインを備えたコンパクト。
ズーム/ブラシ：マウス/キーボードの選択；リセットボタン。
ドリルダウン：セグメント→詳細セクションをクリックします。ブレッドクラムを返します。
セレクター：範囲のプリセット（24h/7d/30d）、セグメントフィルタ、「Abs/Percentage」スイッチ。
9）コンポーネントテンプレート（API例）
json
{
"type": "timeseries",
"title": "Payment authorizations,"
"metrics": [
{"id":"auth_rate_p50","label":"p50","agg":"p50"},
{"id":"auth_rate_p95","label":"p95","agg":"p95","style":{"dash":true}}
],
"x": {"field":"ts","granularity":"5m"},
"y": {"unit":"%","min":0,"max":100},
"baseline": {"value": 92. 0, "label": "SLO 92%"},
"ci": {"field_low":"ci_low","field_high":"ci_high"},
"badges": ["late_data","revised"]
}10）レンダリングパフォーマンス
サーバー上の集計：既に「正しい」ウィンドウ/クオンタイルを返します。
キャンバス/WebGL：何万ものポイントとヒートマップのために；SVG-≤ 2-3千の要素と明確な署名。
「リスト/テーブル仮想化」（List/Table Virtualization）-スクロール時にページをロードします。
キャッシュ：ホットタイル、precompute「昨日/週」。
11）有効性および反パターン
あなたはできません：- スケールを操作します（ゼロの上の列の軸をトリムします）。
- 二次軸と明示的な署名のない異なる単位を混在させます。
- 8-10行で積み重ねられた領域「森」を構築します。
- ギャップをゼロに置き換えます。
- 「美」のために3D/shadowを使用してください。
12）数式、単位、書式設定
お金：マイナーユニット/小数文字列；明示的に通貨を指定します。
変換/分数：10進数のパーセンテージ（必要に応じて-p。）。
料金/料金：「1時間/1日あたり」-期間に署名します。
丸め：値の順序を隠すことなく、重要な桁に。
13）質およびSLOの測定基準の指定
エラー-予算の書き込みと警告レベルを表示します。
稼働時間-スタックされたステータスバー"OK/Degraded/Down'+インシデントウィンドウ。
レイテンシの場合-ディストリビューション（p50/p95/p99）、クラスタ/エンドポイントによる「violin/boxplot」。
14）ストーリーテリングとオートサマリ
物語ブロック：2-4文「何が起こったのか」+「なぜ」+「何をすべきか」。
スライド/エクスポート：PDF/PNG/SVGフォントと色；透かしとカットオフ日。
15）視覚化のためのテストプラン
単位：軸形式、ビン計算、CIテープ。
統合：フィルタ/範囲/ロケール、ドリルダウン、リバースナビゲーション。
E2E： alert-to-actionシナリオ：異常→playbookをクリックします。
A11y/i18n：スクリーンリーダー、キーボード、署名の翻訳。
Perf：大きな行、冷たい/暖かいキャッシュ、ストレスを10 ×ポイントでレンダリングします。
16）ビジュアリゼーション品質指標
Time-to-Insight （TTI）：最初にクリック/インサイトする時間の中央値。
説明されたレート-利用可能な説明付きのグラフの共有。
アクションレート：ウィジェットからのアクションが実行された場所。
エラー/ノイズ：間違った署名、ユーザーの苦情。
Perf p95：最初のコンテンツへの時間とインタラクティブ。
17）スケジュールデザインチェックリスト
- タスクの正しいスケジュールタイプ
- 軸、単位、番号、日付形式をクリア
- コンテキスト：ベースライン/SLO、比較期間、注釈
- ギャップ/ラグ/リビジョンを表示する
- 色とコントラスト（WCAG）、最大5行
- 過負荷のないインタラクティブ性：ホバー、ズーム、ドリルダウン
- パフォーマンス：集計、ダウンサンプリング、キャンバス/WebGLオンデマンド
- CTAサイドバイサイド：レポート/プレイブック/アラートの作成
- スライス日付とフィルタ設定でエクスポート/共有
18）ダッシュボードに埋め込む
Consistency-kit：均一なトークン（フォント、サイズ、パレット）、書体の均一な動作。
ウィジェットテンプレート：KPI、時系列、配布、比較、マップ、テーブル。
「スマート」プロンプトのスロット：「異常」バッジ、ドライバの説明、アクションボタン。
19）実施計画（3つの繰り返し）
反復1-基礎（2-3週間）：- グラフの種類、統一スケール/フォーマット、ベースライン/SLO、ギャップ/ラグバッジ、エクスポート。
- 期間比較、CIテープ、小さな倍数、異常/バッジ、キーボードナビゲーション。
- ダウンサンプリング/WebGL、説明パネル、自動サンマリ、ダッシュボードプリセットとCTA。
20） ミニFAQ
y軸は常にゼロから始まるべきですか？
列の場合-はい。行の場合-必要ではありませんが、ベースラインを指定し、スケールで「欺く」ことはありません。
p95/p99を表示し、過負荷ではない方法？
同じ軸を持つテープパーセンタイルまたは小さな倍数。
「パイ」を8セグメントに置き換えるには？
100％積み上げバーまたはbar-in-cell+ソート。
合計
効果的なメトリック可視化は、フォーム+正直なコンテキスト+便利なアクションの正しい選択です。スケールとフォーマットの統一された基準を維持し、不確実性と省略を示し、迅速なドリルダウンとCTAを提供し、パフォーマンスと可用性を管理します。その後、グラフは「写真」ではなくなり、決定ツールになります。