Datadog のグラフにおいて、色はデータの系列を区別するための主要な方法です。グラフに適切な色を選択することで、チームメイトはグラフのデータをパースし、洞察を得て、効果的にトラブルシューティングを行うことができるようになります。

'Graph your data' の見出しで、ユーザーはカラーパレットのリストから選択している。

カラーパレットの種類

Categorical パレット

Categorical パレットは、差別化が必要でありながら、自然な順序に従わないデータ (たとえば、アベイラビリティゾーンなど) に使用するのが最適です。

A B C D E F G の文字が表示されたパレットで、それぞれの文字が異なる色相で表示されています。

Classic

デフォルトの Classic パレットは、読みやすさを考慮して最適化された 6 色のセットを使用します。系列の数が 6 を超えると、系列に割り当てられた色が繰り返されます。隣接する系列は通常、異なる色を持ちます。ただし、まれに、中間系列が部分的な時間枠の値を持たない場合、隣接する系列が同じ色を使用することがあります。

Classic カラーパレットは、視覚的なアクセシビリティをサポートしています。

ドーナツグラフと積み上げ棒グラフの Classic パレットがどのようなものかを説明する概要。

Consistent/Semantic

Consistent パレットを使用すると、データ系列に一貫して同じ色を割り当てることができ、チャート間でデータを簡単に相関付けることができます。Consistent パレットでは隣り合うデータ系列が同じ色を使うことを防げない場合があり、アクセシビリティ対応もされていません。

Consistent/Semantic パレットのカラーパレット。
Consistent パレットの棒グラフ。

互換性のあるタグの小さなサブセットについては、Datadog は自動的にデータの各系列の背後にある意味を認識します。この場合、Consistent カラーパレットは Semantic カラーパレットとして表示され、色で意味を表現します。例えば、赤色はエラーを表す場合があります。サポートされているタグの一覧については、互換性のあるセマンティックタグを参照してください。

Semantic パレットの棒グラフ。

Diverging パレット

データセット内の値の差を強調する必要がある場合は、Diverging パレットを使用します。Diverging パレットは、自然な順序と自然な中間値を持つデータに最も適しています。例: メモリ使用率の変化量、-100% から +100% まで、自然な中間値は 0%

Diverging パレットには、Cool (緑と青)、Warm (黄色とオレンジの中間) の 2 種類があります。

3 -2 -1 0 1 2 3 を示すパレットで、両端に異なる色のグラデーションがある。
Diverging パレットのグラフ。

Sequential パレット

Sequential パレットは、データセット内の異なる系列に共通点があることを強調する必要がある場合に使用します。このパレットは、ホスト群の CPU 使用率 (0% から 100% まで) のような自然な順序を持つデータに適しています。

カラーバリエーションは、パープル、オレンジ、グレー、レッド、グリーン、ブルーの 5 色です。

カラーオーバーライドと組み合わせると、Sequential パレットは、1 つのグラフで複数のクエリを実行した結果を区別するために役立ちます。

1 2 3 4 5 6 7 を示すパレットで、色はグラデーションになっている。
Sequential パレットのグラフ。

カラーオーバーライド

カラーオーバーライドを使うと、各クエリに好きな色を 1 つずつ割り当てることができます。これは、1 つのグラフで複数のクエリを実行した結果を区別する場合に特に有効です。

カラーオーバーライドを構成するためのパネル。

: タグで集計する場合 (例えば ‘sum by’ や ‘avg by’ を使用)、パレットオーバーライドしか選択できません。これにより、異なるシリーズが同じ色を使用することを防ぎ、可読性を維持することができます。

カラーオーバーライドとパレットオーバーライドのドロップダウンパネルを並べて比較したものです。

アクセシビリティの設定

Datadog では、色覚異常、視力低下、コントラスト感度などの視覚的ニーズに対応するため、グラフにアクセシブルカラーモードを提供しています。アクセシブルカラーモードを選択すると、Classic パレットを使用しているすべてのグラフが、特定の視覚的ニーズに対応したアクセシブルな色でレンダリングされます。アクセシブルカラーモードは、User Preferences ページで設定することができます。

利用可能な視覚的アクセシビリティオプション: デフォルト、プロタノピア (緑と赤の区別がつきにくい)、デュータノピア (赤、緑、黄の区別がつきにくい)、トリタノピア (青と緑の区別がつきにくい)、ハイコントラスト (低視力用に色の区切りを増やす)、低彩度 (視覚化するためにコントラストを下げる)。