책의 관계를 그래프로 그려보자 2: d3.js를 써서

by SL

엑셀에서 NodeXL을 써서 그렸던 책의 관계 그래프를 최근에 알게 된 D3.js로 다시 그려보았다. D3.js는 데이터 시각화를 처리하는 자바스크립트 라이브러리로서, 이걸 이용하면 데이터를 표현하는 인터랙티브한 웹페이지를 손쉽게 만들 수 있다. 어떤 그림을 그릴 수 있는지는 여기에서 살펴보자.

이전에 했던 것처럼, 1) 책 데이터에 태그를 단 뒤 2) 책과 태그를 노드로 놓고 3) 그들 간의 관계를 링크로 표현하여 4) D3.js의 Force Layout API를 사용해서 그렸다. 키워드는 일부러 가렸고, 대신 책 표지가 나오도록 했다. 내가 태깅한 키워드에 따라 관련된 책들이 자연스레 모여있고, 책을 잡어서 드래그하면 연결된 다른 책들까지 끌려나온다.

느끼고 배운 점

  • 예쁘고 간편한 대신 D3.js는 메모리를 많이 잡아먹는다. 이렇게 간단한(?) 페이지를 열었을 뿐인데, 웹브라우저 사용 메모리가 70MB에서 120MB로 올라갔다. ((내 맥북에어의 Safari Web Contents 기준이다))
  • 디폴트로 설정된 파라미터가 나의 데이터에도 딱 맞으면 좋은데, 그렇지 않으면 알아보기 쉽고 깔끔하게 배치하기 위해서 품이 좀 많이 든다. 토픽 모델에서 주제 개수 정하는 것도 그렇고 적절한 파라미터 값을 찾아주는 방법이 꼭 필요하다.
  • 재빠르게 프로토타입을 만들어서 보여주기에 웹이 참 좋은 공간인 것 같다. 그동안 거리를 두었던 HTML이나 자바스크립트 같은 것들을 익혀야겠다.
  • 내가 언제 어떤 책을 읽었는가 하는 데이터는 내 생각이 어떻게 형성되고 변화해왔는지를 보여준다. 이런 데이터를 분석해보는 것은 자신을 이해하는 데 도움이 될 뿐 아니라 미래를 계획하는 데 길잡이가 되어준다. 앞으로 끄집어낼 수 있는 나의 개인 데이터를 구해서 다양한 방법으로 분석해보려 한다.