▶ d3.js 튜토리얼 ⑨ :: d3.nest() API 활용하기

▶ d3.js 튜토리얼 ⑨ :: d3.nest() API 활용하기

d3를 공부하다보면, 이 d3.nest() API를 자주보게 되는데, 아마 그만큼 이 API가 유용하고, 효율적이기 때문일것이라고 생각한다. mike bostock의 예제 중 트리맵, 덴드로그램 예제, 그리고 이 외에 네트워크 시각화 관련예제에서도 이 d3.nest() API가 자주 사용되기때문에, 이 API가 다른 경우보다 조금 복잡하게 느껴지는 감이 있더라도,  마음먹고 꼼꼼하게 살펴보아야 한다.

d3.nest() : 데이터를 트리구조로 변환하고자할 때 유용한 API

---

d3.nest()는 .key() method를 이용하여 '데이터의 무엇을 key로 해서 데이터를 수집할 지' 를 지정할 수 있다. 수집할 데이터를 전달하고 결과를 배열이나 맵 형식으로 가져오려면 .entries(data)나 .map(data) method중 하나를 이용한다.   .entries(data)와 .map(data)의 차이는 결과가 배열로 반환되는지 아니면 연상 배열로 반환되는지에 있다.^[각주:1]

Hello, I'm Mister Nester : d3.nest() API 개념을 이해할 수 있는 사이트 

---

보통 이런 API를 이해하려고 할 때,  관련 예제나 도큐먼트내에서 가장 만만해보이는(?) 데이터와 코드로 직접 시도해보게 되는데, 이러한 과정에서도 불필요한 에너지소모가 너무 많은 듯 싶다. 여기서 소개하려는 사이트 "Hello, I'm Mister Nester"는 이름은 복잡하지만, 사이트 구성부터가 굉장히 심플하고,   d3.nest() API개념만 살펴보는데는 단연 최고라고 할 수 있는 곳이다.

[사진 : Hello, I'm Mister Nester 메인페이지 캡쳐 ]

Hello, I'm Mister Nester URL : http://bl.ocks.org/shancarter/raw/4748131

페이지는 세 영역(데이터입력 창, d3코드를 입력하는 창, 결과값 창)으로 나뉘어져 있다. 이 외에 특별한 설명은 따로 없는데, 이는 딱히 그럴필요가 없기때문이다. 남은건 직접 d3.nest() API를 다양하게 조정해가며 결과값을 확인해보는 것이다. (code창에서 defalut로 설정되어있는 코드들은 자유롭게 수정할 수 있다.)

Hello, I'm Mister Nester 사이트를 통해서 살펴보는 .entries(data)와 .map(data)의 차이

---

앞서 d3.nest() API를 정의하는 부분에서 .entries(data)와 .map(data)의 차이점은 "결과가 배열로 반환되는지 아니면 연상배열로 반환되는지에 있다."라는 것을 살펴보았다. 나의 경우, 이런 간략한 한 문장만으로는 결과형태에 어떤 차이점이 있는지 이해하기 힘들었었는데, 이 사이트에서 간단하게 Code 창의 map(data)부분을 entries(data)로 변경한뒤 결과값을 업데이트함으로써 둘 간의 차이점을 쉽게 알아볼 수 있었다.

*연상배열 : 숫자가 아닌 문자를 KEY로 사용하는 배열.

d3.nest()에서, entries(data)와 map(data)의 차이점

---

동일한 데이터와  동일한 key()값을 가졌을 때, 위 사진과 같이 결과형태를 놓고보면 분명한 차이를 보이고 있다.

먼저 .entries(data)와 map(data)모두 데이터를 중첩구조형태로 만든다는 점에서는 같지만, .entries(data)가 부분적인 트리를 children이라는 요소에 포함한 배열로 반환하는 반면, .map(data)의 경우 연상배열(숫자가아닌 문자를 KEY로사용하는 배열)의 형태로 결과물을 만들어내고있다는 점에서 차이가있다.

1. 모리후지다이치·안티베이지안 지음, 김성재 옮김, 『엔지니어를 위한 데이터 시각화』, 한빛미디어, 2015.5, p.174 [본문으로]