PythonとJavaScriptではじめるデータビジュアライゼーション

380

17 章　各賞の可視化

var width = boundingRect.width - margin.left

- margin.right,

height = boundingRect.height - margin.top - margin.bottom;

var svg = chartHolder.append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top

+ margin.bottom)

.append('g')

.attr("transform",

"translate(" + margin.left + ","

+ margin.top + ")");

// ...

svg

グラフグループを用意したので、スケールと軸を加えましょう。

17.2

 スケール

丸印を配置するために、

2

つの序数スケールを使います（例

17-1

）。

x

スケールでは、

rangeRoundBands

メソッドで丸印の間に

10%

のパディングを指定します。

x

スケールを使って円の

直径を設定するので、

y

スケールの範囲の高さはすべての丸印が収まるように手動で調整し、パ

ディングが少し入るようにします。

rangeRoundPoints

を使って整数のピクセル座標に丸めます。

例

17-1

 グラフの

x

軸と

y

軸のための

2

つの序数スケール

var xScale = d3.scale.ordinal() ...