이 글은 Ali Almossawi가 쓴 MetricsGraphics.js – a lightweight graphics library based on D3의 한국어 번역본입니다.

MetricsGraphics.js은 D3를 기반으로 작성된 라이브러리입니다. D3는 시계열(time-series) 데이터를 시각화하고 구조화하는데 최적화된 라이브러리입니다. MetricsGraphics.js는 일반적인 형태의 그래프를 만드는 간단한 방법을 제공합니다. MetricsGraphics가 제공하는 그래프 생성 방법은 규칙적이고 일관적입니다. MetricsGraphics.js 라이브러리는 라인 차트(line chart), 산포도 그래프(scatterplot), 히스토그램(histogram), 바 차트(barplot), 데이터 테이블(data table)을 지원합니다. 뿐만 아니라 러그플롯(rug plot)과 기본적인 선형회귀 그래프(linear regression)도 제공합니다.

MetricsGraphics.js 라이브러리는 그래프들의 레이아웃과 설명을 그래프 자체만큼 중요하게 취급합니다. 핵심 철학은 효율성과 실용성입니다.

Hamilton Ulmer 와 저는 올해 초부터 라이브러리를 구축하기 시작했습니다. 라이브러리를 구축하는 동안 우리는 우리가 다른 프로젝트들의 코드를 카피-앤-페이스트 하고 있다는 것을 발견했습니다. 이 때문에 에러가 발생했고 일관적이지 못한 형태로 기능이 추가됐습니다. 그래서 우리는 일관된 기능성과 심미성(aesthetics)을 제공하는 단일한 라이브러리를 만들기로 결정했습니다. 원래 이 라이브러리는 내부과제에 쓰기 위해 만들었습니다.

그 당시에 우리는, 회사 안에 있는 초보 프로그래머들과 프로그래머가 아닌 사람들에게 D3를 사용해서 대쉬보드를 만들게 하는 시도에서 제한적이기는 하지만 어느 정도 성공을 거두고 있었습니다. 다만 학습장벽이 걸림돌이었습니다. 그래서 잘 알려진 디자인패턴을 이용해서 학습장벽을 줄일 수 있는 추상화 계층을 만드는 것이 합리적이라고 생각했습니다.

우리 API는 간단합니다. 그래프를 만들기 위해 필요한 것이라고는 몇가지 디폴트 파라메터를 채우는 것과, 만약 굳이 필요하다면, 한 두개의 부가적인 파라메터를 채우는 것 뿐입니다. 우리는 상태를 관리하지 않습니다. 그래프를 갱신하려면, 동일한 타겟 엘리먼트를 상대로 data_graphic을 다시 호출해야 합니다.

이 라이브러리는 데이터-소스(data-source)를 따지지 않습니다. 이 라이브러리는 누락된 데이터 처리 등 그래프를 더 잘 다룰 수 있는 많은 편의 기능과 취사선택 요소들을 제공하지만, 데이터가 어디에서 왔는지에 대해서는 전혀 따지지 않습니다.

사용법

라이브러리 사용법을 간단히 소개하겠습니다. 우리가 UFO 목격 사례처럼 어떤 학구적인 데이터를 가지고 있다고 가정합시다. 이제 연간 목격 사례를 라인 차트로 만들어야 합니다.

data/ufo-sightings.json이라는 이름으로 원본 데이터로부터 연간 목격 사례 데이터를 집계해서 JSON 파일을 만듭니다. 물론 데이터 파일이 반드시 JSON 파일이어야 할 필요는 없습니다. 하지만 JSON 파일이 다루기 편할 것입니다.

다음 할 일은 데이터를 로딩하는 것입니다.

d3.json('data/ufo-sightings.json', function(data) {
})

data_graphic은 배열 형태의 데이터 객체를 기대합니다. 우리는 이미 그런 형태로 데이터를 만들었죠. 좋습니다. 또 data_graphic은 yyyy-mm-dd 형태의 타임스탬프를 필요로 합니다. 우리는 연간 데이터를 집계했습니다. 그래서 타임스탬프에 대해서도 걱정할 필요가 없습니다. 그래서, 이제 할 일은 그래프를 만들어서 target 요소가 지정하는 엘리먼트에 표시하는 것 뿐입니다.

d3.json('data/ufo-sightings.json', function(data) {
    data_graphic({
        title: "UFO Sightings",
        description: "Yearly UFO sightings (1945 to 2010).",
        data: data,
        width: 650,
        height: 150,
        target: '#ufo-sightings',
        x_accessor: 'year',
        y_accessor: 'sightings',
        markers: [{'year': 1964, 
                   'label': '"The Creeping Terror" released'
        }]
    })
})

여기까지 입니다. 이 예제에서, 우리는 특정 데이터 지점을 강조해서 표현하기 위해 마커(marker)를 추가했습니다. 물론 마커(marker) 표시는 선택 사항입니다.

끝으로

우리는 정말 필요한 것만 만들자는 원칙에 따라 일했습니다. 목표했던 기능들은 거의 대부분 구현했습니다. 이미 얘기한 것처럼, Github에서 우리가 만든 라이브러리를 이용할 수 있으며, 우리가 토론했던 내용도 확인할 수 있습니다. 우리는 모든 풀-리퀘스트(pull request)와 이슈를 진지하게 검토할 것입니다.

아직 할 일이 무척 많습니다. 라이브러리를 한번 써보고 버그가 있다면 알려주세요! 당신이 아무것도 다운로드 받지 않아도 우리 라이브러리를 써볼 수 있는 샌드박스를 준비했습니다. 여기 http://metricsgraphicsjs.org 입니다.

MetricsGraphics.js v1.1은 2014년 12월 1일 릴리즈될 예정입니다.