버전

d3.js의 버전은 4.2.3입니다.

완성도

code

기획

시각화의 목적

버스트 사이즈의 인원수 비율을 순간적으로 알기 위해서.

준비할 데이터

가슴 크기 당 인원수.

이번에는 데이터는 더미를 사용합니다.

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