D3.jsでバストサイズを円グラフで表す「おっぱいチャート」を作成

#version
d3.jsのversionは4.2.3です。

#完成図

##code
http://jsbin.com/memehidaxi/1/edit?js,output

#企画
##可視化の目的
バストサイズの人数割合を瞬時に知るため。

##用意するデータ
バストサイズごとの人数。

今回はデータはダミーのものを使います。

const data = [
  {"id": 1, "number": 6, "name": "Aカップ"},
  {"id": 2, "number": 9, "name": "Bカップ"},
  {"id": 3, "number": 15, "name": "Cカップ"},
  {"id": 4, "number": 30, "name": "Dカップ"},
  {"id": 5, "number": 23, "name": "Eカップ"},
  {"id": 6, "number": 13, "name": "Fカップ以上"},
]

#可視化方法
##グラフの種類
割合を知るために円グラフを用います。

const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(radius)

const pie = d3.pie()
.value((d) => d.number)
(data)

arc d3-shape/README.md at master · d3/d3-shape
pie d3-shape/README.md at master · d3/d3-shape

##色付けの定義
バストサイズがすぐにわかるように、色付けを行います。バストサイズが大きくなるにつれて、薄い緑から濃い緑(薄い赤から濃い赤 赤は刺激的な色なので緑に変更しました)に色付けします。バストサイズのnumberではなく各バストサイズに対して色をつけることにしました。

###code

const color = d3.scaleQuantize()
.domain([1, 6])
.range(["#b4f49b", "#9BDB82", "#81C168", "#68A84F", "#4E8E35", "#35751C"])

scaleQuantizeを使えば、離散的な値に対して、色を設定することができます。ここではデータにidを設定し、id一つ一つに色を振りました。
d3/d3-scale: Encodings that map abstract data to visual representation.

##バストサイズ名を表示

###ラベルの位置

ラベルも円上に配置するので、arcを使います。

const labelArc = d3.arc()
    .outerRadius(radius)
    .innerRadius(radius - 80)

centroidを使えば、半径の半分の円周上の位置を知ることができます。そこからdxで微調整します。もっと細かく調整できると思いますが、今回は止めておきます。

group.append("text")
.attr("transform", (d) => { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dx", "-1.5em")
.text((d) => d.data.name);

d3-shape/README.md at master · d3/d3-shape