外れ値に負けない棒グラフを考える

製造ビジネステクノロジー部スマートプロダクトチーム、フロントエンドエンジニアの高橋ゆうきです。

この記事はクラスメソッド発 製造業 Advent Calendar 2025 5日目のエントリーです。

はじめに

A社: 1200万円、B社: 80万円、C社: 65万円。この3社の売上を棒グラフにすると、A社だけが画面を支配し、B社とC社は地を這うような細い線になります。

B社とC社の差は15万円。決して小さくない差ですが、グラフ上ではまったく読み取れません。外れ値が1つ混じるだけで、棒グラフは簡単に破綻します。

この問題にどう向き合うか、5つのアプローチを考えます。

1. 最大値を低く設定し、軸を打ち切る

グラフの軸に上限を設定し、飛び出たデータを強制的にカットする方法です。

単に棒が止まっているだけだと、データがそこで終わっていると誤解されかねません。棒の先端をギザギザや破線にしたり、フェードアウトやグラデーションで、まだ上に続いているという視覚的な合図を送ると誤解を防げます。

紙と違って、Webにはインタラクションがあります。見た目は途中で切れていても、ツールチップで「実際の数値: 1200万円」と表示すれば、情報の欠落は防げます。

実装もシンプルで、外れ値がそれほど多くなければ最も手軽な選択肢でしょう。ただし、打ち切りの閾値をどこに設定するかは悩ましいところです。

2. 軸の途中で空間を歪める

軸の途中を波線で省略する手法です。対応しているライブラリはそれほど多くありませんが、HighChartではこの機能がデフォルトで提供されています。

「0〜100」のすぐ上がいきなり「1000〜1200」になるような、空間のワープを作ります。巨大なデータと小さなデータを、1つの画面内に無理やり共存させられるのが強みです。

ただし、本質的な問題があります。数値上は10倍の差があるのに、見た目の面積は2倍しか違わない、といった視覚的な嘘をつくことになります。棒グラフの武器である長さで量を直感的に比較できることを手放すことになります。

3. 対数軸にする

軸のスケールを線形から対数に切り替える方法です。

対数スケールでは、10 → 100 → 1000という10倍ごとの変化が画面上で等間隔になります。1200万円と80万円の差は、線形スケールほど極端な見た目にはなりません。

この方法の美点は、データを一切加工しない正直な表現であることです。軸を切ったり空間を歪めたりといったごまかしがありません。桁違いのデータが複数あっても、すべてを1つのグラフで比較できます。成長率や倍率の比較には、むしろ対数軸のほうが本質を捉えた表現になることもあります。

一方で、一般ユーザーには直感的に理解しづらいという弱点があります。棒の長さが2倍＝数値も2倍という素朴な期待を裏切るからです。また、B社の80万円とC社の65万円の差は、対数スケール上ではさらに小さく見えてしまいます。小さい値同士の比較には向きません。

また数学的にlog(0)は定義できないため、D3や多くのライブラリで0を含む場合のグラフには注意が必要になります。

対数軸についてはWikipediaのMisleading graphのConfusing use of logarithmic scalingの項目にも記載されています。

4. 外れ値を除外できるようにする

外れ値をグラフから除外し、ユーザーが必要に応じて切り替えられるようにする方法です。

初期表示ではA社を含む全データを表示しておき、グラフの上部に外れ値を除外するボタンを配置します。クリックするとA社が除外され、B社、C社、D社、E社だけのグラフに切り替わります。全体に戻すボタンで元に戻せるようにしておけば、両方の視点を行き来できます。

こうすれば、まず全体像を把握した上で、詳細な比較に切り替えられます。B社の80万円とC社の65万円の差も、外れ値を除外すれば視覚的に読み取れるようになります。ユーザー自身が切り替えを選ぶので、データを隠しているという印象も与えにくいでしょう。ただし、何を外れ値として除外するかの基準が恣意的になりがちです。閾値の設定次第では印象操作と受け取られるリスクもあります。

5. ズーム・パン機能でユーザーに委ねる

グラフ自体には手を加えず、ユーザーが自由に拡大・縮小・スクロールできる機能を提供する方法です。

ここまで紹介した4つの手法は、いずれも作り手が「どう見せるか」を決めていました。軸をどこで切るか、何を外れ値とみなすか、対数にするかどうか。すべて作り手の判断です。ズーム・パンはその判断をユーザーに委ねます。全体を俯瞰したければズームアウト、細部を比較したければズームイン。見たい視点は人によって違うので、選択肢を渡してしまうという発想です。

多くのチャートライブラリに標準で備わっており、実装も手軽です。データの傾向が事前に読めない場合や、ユーザーによって知りたいことが異なる場合に向いています。

ただし、ユーザーが操作できることに気づかなければ機能しません。ズームアイコンを表示したり、操作の説明を添えたりする工夫が必要です。

まとめ

万能な正解はありません。判断の軸は3つあります。

どの手法を選ぶにせよ、ユーザーが何を知りたいかを起点に考えることが大切だと感じました。