Skip to main content
SimilarExport ZIP
100%

円の面積の算出法いくつか

✓ Published0🌍 Public
YYuichi Yazaki
Last edited Sep 24, 2023
Created on Sep 24, 2023
Forked from Untitled

This example demonstrates why mapping data values linearly to circle radii is misleading, comparing four encoding strategies in a single SVG chart. Using D3 v5, it plots circles for values 10, 50, and 100 along horizontal axes, with each row applying a different scale: linear radius, linear area, square-root of value as radius, and square-root scale for area. The chart highlights that linear radius mapping makes the circle for 50 appear one-quarter the size of 100, and 10 appear one-hundredth, while square-root-based approaches preserve proportional areas. The code uses `d3.scaleLinear`, `d3.scalePoint`, `d3.scaleBand`, and `d3.axisTop` to render the comparison.

AI-generated description

The code is from this gist.

これは、データ値を円の半径に線形にマッピングすることがなぜ間違いであるかを示しています。

最初の例では50は100の 2 分の 1 の小ささであることに注意してください。

値50をエンコードする円は、値100をエンコードする円より 4 分の 1 の小ささです。

さらに悪いことに、10は「100」の 10 分の 1 の小ささなのですが、

値10をエンコードする円は、値 100をエンコードする円より _100 分の 1 の小ささです!

この間違いは次の二つの要因によって発生しています:

  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. <sup><a href="#footnote1" id="reverse-footnote1">1</a></sup>

  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 の世界ではこの問題を解決する方法がたくさんありますが、最も簡単な方法は、[平方根スケール] を使用して適切な円の半径を計算することです。

このようにして、各円の面積は、それが表すデータ値に比例します。

<hr class="footnotes" />

<span id="footnote1">1.</span> これが[米国大統領選挙の地図が役に立たないだけでなく、実際には誤解を招く]理由です。 より知覚的で有益な代替手段は、[タイルグラムまたは六角形のタイル グリッド マップ] です。<a href="#reverse-footnote1">↩</a>

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

The chart demonstrates why mapping values linearly to circle radii distorts data, using four strategies in a horizontal dot plot. Groups with 10, 30, 50, and 100 show that linear radius scaling makes larger values appear disproportionately small, while a square-root-adjusted radius or linear area scaling preserves proportional perception. The visualization uses D3 v5 with `d3.scaleLinear`, `d3.scalePoint`, and `d3.axisTop` to compare encodings, highlighting area as the correct perceptual channel for bubbles.

YYuichi Yazaki
83% match
Loading thumbnail…

D3: Drawing Scale

This example demonstrates how D3’s linear and square-root scales translate raw data coordinates into pixel positions and circle radii. It plots an array of 11 `[x, y]` pairs as circles and red text labels on an SVG canvas. The code uses `d3.scaleLinear()` for both the x and y axes, and `d3.scaleSqrt()` for sizing the circles proportionally. The scales are configured with custom domains and output ranges, with padding applied to keep marks inside the 500×300 viewport. Data is rendered statically, with labels showing the original coordinate values.

MMarisa Tania
76% match
Loading thumbnail…

D3 Scale - Sqrt

This example compares linear and square-root scales for encoding data as circle radii. Two rows of circles, one red and one green, map the same dataset from 0 to 100 using D3's `d3.scaleLinear` and `d3.scaleSqrt`. The linear scale positions circles along the x-axis, while its radius is scaled for visual clarity. The square-root scale directly maps the data to the radius, ensuring that the circle's area, rather than its diameter, is proportional to the value. The SVG output includes an annotation recommending square-root scaling for area-based encodings.

SSubhendu Karmakar
76% match
Loading thumbnail…

D3 Scale Functions

This example demonstrates how D3 scale functions map input data values to visual output positions. It plots a set of numeric data points as circles along a horizontal axis, with each value labeled above its corresponding circle. The code uses `d3.scaleLinear()` to map the domain (0–10) to a pixel range, and renders the result as SVG elements. An axis is added using `d3.axisBottom()`, and the utility function `getScale` supports multiple scale types, including `scaleSqrt`, `scaleLog`, and `scaleBand`, though only linear is actively applied here.

SSubhendu Karmakar
75% match
Loading thumbnail…

D3: Scaled scatterplot, using a square root scale for circle areas

This example shows a random dataset of 50 points rendered as circles in a scatterplot, with circle area scaled by the y-value using `d3.scaleSqrt`. The SVG chart includes linear x- and y-axes styled with teal strokes and bold labels. The code loads D3 v5 and uses `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for ticks, and randomly generated numbers for the data. The `aScale` maps the y-domain to a radius range of 0 to 10, while padding keeps the axes visible. No labels are drawn, as the text elements are commented out.

Nnikomc
74% match
Loading thumbnail…

scale

This example demonstrates the foundational concept of D3 scales by computing and logging values from linear, square root, and time scales, then calculating the extent of a small dataset and applying a linear scale with a nice domain. It uses the d3 v7 library, importing scaleLinear, scaleSqrt, and scaleTime from d3, and renders to a blank SVG canvas. The code defines explicit domains and ranges to show how input values map to output pixel positions, with a dataset of five numeric values and an extent-based domain.

HHeet Bhatt
72% match
Loading thumbnail…

D3 Scale

This example demonstrates how D3 scales map input data to visual output, using a linear scale to position circles along the x-axis and a multi-domain color scale to assign fill colors. The circles represent values from -10 to 10, with colors transitioning from red through gray to blue. It renders as an SVG using d3.scaleLinear for both positioning and color interpolation, with data bound through d3.select and .join(). The code references D3 v7 scale types in utils.js, including scaleTime, scaleBand, and scaleOrdinal, though only linear scales are actively applied.

SSubhendu Karmakar
71% match
Loading thumbnail…

D3 Scale Function PRactice

This example demonstrates D3 scale functions by mapping a small array of numeric values to positions along an SVG axis. It renders circles and labels on a horizontal line using a linear scale, then displays the corresponding axis with `d3.axisBottom`. The code imports a custom `getScale` utility from `utils.js` that switches between D3’s scale types—including `scaleLinear`, `scaleSqrt`, `scaleLog`, and others—although only the linear scale is actively applied. The visualization uses SVG rendering with a fixed 960×500 canvas and D3 v7 via `bundle.js`.

SSubhendu Karmakar
71% match