예전에 연구실 선배에게 논문에 포함될 heatmap을 Matlab으로 그려보는 것이 어떻겠냐는 제안을 받았었다. Matlab에는 heatmap을 그리기 위한 라이브러리가 포함되어 있었는데 당시에 그 라이브러리를 사용해서 heatmap을 그려보려 했는데 의도한대로 잘 되지 않았던 경험이 있었다. 작년 하반기에 d3를 공부하면서 d3로 heatmap을 제대로 그려보고자 했다. 그런데 당연히 있을 것이라 생각했던 heatmap 라이브러리가 d3에는 없었다.
아래는 2014년 방영되었던 KBS 대하 드라마 정도전의 데이터를 이용하여 heatmap을 시각화 해본 것이다. 주인공 정도전이 50회 동안 총 만난 횟수가 10번 이상이 되는 등장인물들만 나타냈다. (등장인물의 수가 많아서 모바일로 보면 몇 명과의 관계까지만 볼 수 있음)
<javascript 코드 추가예정..>
Raw data는 다음과 같이 구성되어 있다.
ep char value
1 이지란 0
1 남은 0
1 업둥이 0
1 이숭인 1
.
.
2 이지란 0
2 남은 0
2 업둥이 0
2 이숭인 0
2 이방과 0
.
.
차례로 회차, 등장인물 이름, 정도전과 만난 횟수를 각각 의미한다.
이 데이터를 chart 영역에 입력하고 heatmap을 그리는 핵심코드는 다음과 같다.
여기서 chas는 heatmap에 나타나는 등장인물들을 raw data의 순서에 맞게 저장해 놓은 array이다. 우선 사각형을 회차와 각 등장인물에 맞게 메트릭스 형태로 잘 그려준다. 하나의 행은 하나의 회차에 대응되고 하나의 열은 한 명의 등장인물에 대응된다. (attr('x') , attr('y') 부분이 표현하고자 하는 heatmap에 적당하게 사각형들의 위치를 설정하는 부분이다.)
그리고 약간의 애니메이션 효과를 위해 처음에는 가장 기본색으로 색칠을 한 후 1초 후에 미리 정해놓은 colorScale에 맞추어 색칠을 해주면 별다른 라이브러리 없이 d3의 기본적인 기능만으로 heatmap을 그릴 수가 있다.