円の面積の算出法いくつか
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.