한 해가 지나가면 주식 시장에서는 많은 기업들이 실적 발표를 하는데 이 때 가장 많이 사용되는 발표 요소 중에는 시각적인 이해를 도와주는 그림과 그래프가 있다.
그림과 그래프는 시각적인 이해를 쉽게 도와주는데 그 목적이 있지만 웹에서는 이런 목적 조차도 달성되지 않았던 것이 사실이다. 웹의 태생이 정보 링크에 있다는 것을 감안한다면 웹에서의 이미지 표현이 그리 발전하지 않았던 것 또한 사실이다. 부분적으로나 서버 프로그램을 이용한 이미지 표현이 이루어지기는 했지만 브라우저 차원에서는 여전히 불가능했다. 이는 HTML의 최신 버전인 4.01을 보더라도 HTML 요소 중에는 img 태그 하나와 그나마 내용과 표현의 분리를 제창해온 덕에 발전한 CSS 3에서 작게나마 이미지 표현 방법이 발전했다.
한빛미디어에서 출간된 "웹 기반 데이터 비주얼라이제이션 D3"(ebook)은 HTML 5대에 이르러 웹에 자유롭게 그림을 그리기 위한 요소인 svg 요소를 사용하여 그림을 표현하는 자바스크립트 라이브러리인 d3에 대한 소개서이다.
HTML 5에서 화면에 바로 그림을 그릴 수 있는 요소로 잘 알려져 있는 것은 canvas 요소인데 canvas 요소와 더불어 웹 화면에 그림을 그릴 수 있는 요소가 바로 svg이다.
물론 svg와 canvas 요소는 그래픽 표현 방법에 있어서는 다르다. 보통 canvas와 svg는 비트맵 방식과 벡터 방식으로 부르기도 한다. 이는 canvas가 그림 등을 표현하는데 적합한 반면 svg는 로고 등을 표현하는데 적합하다.
D3는 svg를 그림을 그리는데 사용하는데 여기에는 canvas와 달리 svg의 개별 요소가 dom으로 관리할 수 있고 dom 조작을 통해 사용자와 인터랙션 할 수 있는 그래프를 만들 수 있기 때문이 아닐까 짐작된다. canvas도 이미지 조작이 가능하지만 점(point)을 기준으로 하는 동작 방식이어서 상대적으로 이미지 조작이 어렵다.
"웹 기반 데이터 비주얼라이제이션 D3"는 웹에 데이터를 표현하기 위해 샘플 데이터로 뉴욕 교통청의 데이터를 이용해 D3를 사용하는 방법을 안내한다. D3를 배우는데 이와 같은 샘플 데이터는 유용하게 사용된다.
D3는 사용방법에 있어 문법적 형태가 자바스크립트 라이브러리인 jQuery와 유사한 형태를 띄고 있어서 jQuery를 사용한다면 D3의 문법을 배우기가 그다지 어렵진 않다.
D3를 사용하기 위해 알아야 할 것들
D3가 웹에 데이터를 쉽게 표현하는데 도움을 주기는 하지만 그 사용 방법이 결코 쉽지만은 않다. 먼저 엔터 셀렉션 개념을 이해해야 한다. 엔터 셀렉션은 D3의 핵심 개념으로 웹 페이지 요소를 선택한 후 데이터 집합의 항목을 수정, 추가, 제거하는데 이용된다.
뉴욕 교통청에서 제공하는 지하철 상황 정보를 받아 그림을 그리게 되는데 이 때 데이터는 D3가 이용할 수 있는 json 객체로 먼저 생성되어 있어야 한다. 책에서는 이미 가공된 json 데이터를 처리하지만 아쉽게도 책 전반에서 뉴욕 교통청에서 제공하는 데이터를 json으로 가공하는 실질적인 데이터 구성방법이 나와있지 않다.
그러나 엔터 셀렉션을 사용하기 위해선 json 데이터도 "미카의 황금률" 법칙을 따라야 하는데 D3에선 이 법칙이 지켜지지 않은 데이터가 들어올 경우 그래프를 표시할 수 없다.(6p 참고)
그래프의 단짝 요소인 축, 선 그리기
그래프에서 빠지지 않는 시각적 요소 중의 하나는 축과 선이다. 물론 여기에 더해서 축에 들어가는 레이블도 시각적 요소에 속한다.
그래프는 보통 통계 데이터를 나타내는데 시각화하는데 자주 사용되는데 이때 그래프에 표시되는 데이터의 상한 값과 하한 값을 구하여 그래프를 그려야 한다. 보통 이와 같은 값 종류을 스케일 값이라 하는데 스케일 값은 직접 산출하려면 아주 복잡할 수 있다.
책에서는 먼저 뉴욕 교통청에서 제공하는 버스 고장, 사고, 상해 데이터를 가지고 와서 D3에서 제공하는 스케일 값 산출 방법을 써서 스케일 값을 산출하고 여기에 축과 선을 그리는 D3 라이브러리의 메서드 사용 방법을 친절히 안내한다.
사용자와 상호 작용하는 그래프 만들기
보통 사용자는 그래프가 만들어졌다면 이를 조작해보고 싶어하기도 한다. 4장에서는 D3를 이용하여 그래프에 간단한 상호 작용(이후 interaction. 인터랙션이라고 표기)을 구현하고 나서 뉴욕 교통청이 제공하는 지하철 지연 정보를 이용해서 그래프에 툴팁과 지연시간을 이용한 진입 애니메이션을 구현하여 사용자 인터랙션을 경험해볼 수 있다.
4장에서 안내하는 것과 같이 D3를 이용하면 그래프에 쉽게 사용자 인터랙션을 구현하여 반응하는 웹 프로그램을 쉽게 만들어볼 수 있어 이후 사용자의 인터랙션이 필요할 때 적절한 구현 방법을 찾을 수 있을 것으로 기대된다.
다양한 그래프 그려보기
데이터를 표시하는데 사용하는 그래프는 그 종류가 다양하다. 통계 분포를 알아보기 위한 점 그래프와 변화를 추적하기 위한 선 그래프 외에도 다양한 데이터를 한 그래프에 보일 때 사용하는 스택 그래프(막대 그래프가 세로로 여러개로 구성되어 있는 막대 그래프를 생각해보면 이해가 쉽다) 등을 그려보기 위해서도 D3에서는 레이아웃 기능을 이용하여 쉽게 이 같은 그래프를 그릴 수 있도록 도와준다.
5장에서는 이와 같은 레이아웃이 적용된 그래프를 그리보며, 보다 쉽게 사용자 인터랙션 등을 추구하는데 있어서 자주 사용되는 포스 다이렉티드 알고리즘을 적용한 그래프와 히스토그램 레이아웃과 스택 레이아웃을 사용한 그래프를 소개하여 D3의 활용 영역을 보다 넓혀준다.
마지막으로...
"웹 기반 데이터 비주얼라이제이션 D3"는 웹 페이지에 쉽게 구현할 수 없었던 이미지 영역중에서 그래프나 통계 데이터를 보여주는데 특화되어 있는 D3 라이브러리를 소개하여 서버 영역에 부담을 덜 주며 반응성 높은 웹 애플리케이션을 쉽게 만들 수 있도록 하는데 그 의미를 둔 책으로 보인다.
하지만 도서가 번역서이다 보니 사용되는 샘플 데이터도 해외 데이터인 것은 아쉽게 보인다. 국내서였다면 괜찮은 데이터가 나오지 않았을까 싶기도 했고 한국에서 D3를 사용하려면 다양한 종류의 데이터 타입을 D3가 이용할 수 있는 JSON 데이터로 변환하는 방법을 부록으로 첨가 했더라면 하는 아쉬움이 진하게 남았다.(국내에서 자주 사용되는 자바 환경과 PHP, Python 환경을 이용해서)
개인적으로는 책에서 JSON 변환에 사용하는 파이썬 언어가 그렇게 맘에 들지 않을 수가 없었다. 그러고 보면 나 역시 특정 프로그램 언어에 대해선 팔불출이 아닐까 싶었다.
"웹 기반 데이터 비주얼라이제이션 D3"가 eBook이다 보니 한 가지 더 아쉬움이 남는건 D3의 다양한 사례를 실어주었더라면 학습자에게 도움이 더 되지 않았을까?
웹에서 데이터를 표현하는데 보다 적절한 방법을 찾고 있었거나 웹에서 재미있는 기능을 찾고자 했던 개발자라면 "웹 기반 데이터 비주얼라이제이션 D3"를 통해서 호기심 충족과 함께 효과적인 해결책을 찾아낼 수 있을 것이다.
