The code is from this gist.
これは、データ値を円の半径に線形にマッピングすることがなぜ間違いであるかを示しています。
最初の例では50は100の 2 分の 1 の小ささであることに注意してください。
値50をエンコードする円は、値100をエンコードする円より 4 分の 1 の小ささです。
さらに悪いことに、10は「100」の 10 分の 1 の小ささなのですが、
値10をエンコードする円は、値 100をエンコードする円より _100 分の 1 の小ささです!
この間違いは次の二つの要因によって発生しています:
- データを視覚的に解釈する方法を誤解している。
When we look at a bar chart we compare the length of each bar. When we look at a waffle chart we compare the number of squares of — or the area taken by — each category. Likewise, when we look at a bubble chart we compare the area of each bubble.
Perceptually, we understand the overall amount of “ink” or pixels to reflect the data value. 1
- [SVG で円]を描画するには半径属性が必要です。
To draw an SVG circle, the cx and cy attributes are used to position the center of the element and the r attribute is used to define the radius of the element. It is this r attribute that makes it natural to assume a direct mapping between data value and circle radius.
しかし、なぜこのマッピングがデータを視覚的に歪めるのでしょうか?
2 つの単純なデータ値6と3を使用してみましょう。
6は3の 2 倍なので、2 つの数値の比率は2になります。
ここで、円の面積は、半径の二乗にに pi をかけたもの、つまり A = πr² に等しいことを思い出してください。
この式の一部を適用すると、値を二乗して36と9が得られます。
36は9の 4 倍であるため、2 つの数値間の比率が2から4に変化したことに注目してください。
(「π」が定数であるため、各値に「π」を掛けても、それらの比率は変わりません。)
この比率の変化がデータの誤った表示につながります。
これを引き起こしているのは二次関数であるため、その逆関数である平方根関数を適用してその影響を打ち消す必要があります。
値36と9を平方根すると6と3が得られ、出発点に戻ります。
6は3の 2 倍なので、2 つの数値の比率は2のままです。
この要点で証明されているように、D3 の世界ではこの問題を解決する方法がたくさんありますが、最も簡単な方法は、[平方根スケール] を使用して適切な円の半径を計算することです。
このようにして、各円の面積は、それが表すデータ値に比例します。
1. これが[米国大統領選挙の地図が役に立たないだけでなく、実際には誤解を招く]理由です。 より知覚的で有益な代替手段は、[タイルグラムまたは六角形のタイル グリッド マップ] です。↩