vega-lite로 그래프를 그려보자.

2017-12-20

html

vega-lite, graph, javascript-chart-library

데이터 시각화 라이브러리

웹에서 데이터를 그래프로 그리기 위해(시각화) 라이브러리를 많이 이용한다.
그 중 많이 몇가지를 살펴보자면 구글 차트 라이브러리, 하이차트(Highchart), 베가 라이트(Vega-Lite), c3, EChart가 있음.

google 차트 라이브러리

구글 차트 라이브러리는 총 29종의 기본적인 차트를 제공하는데, 멀티터치를 지원하고 호환성이 좋아서 모바일에서도 많이 사용하는 것 같다. 하지만 인터넷이 잘 되지 않는 환경이라면 보이지 않는나는 듯
~~써 놓고 보니 좀 이상하네. 웹에 띄우는 거면 인터넷이 되어야 뭐든 보일텐데…~~

무료로 사용 가능하다.

하이차트(Highchart)

하이차트는 광고목적이 아닐 시에만 무료로 사용 가능.
아이폰과 아이패드를 포함한 모바일 브라우저와 멀티 터치 줌을 지원하는 것이 특징이라고… 이와 같은 이유로 페이스북, 트위터 등 많은 기업에서 사용하고 있다고 한다.

베가 라이트(vega-lite)

내가 써야하는 베가 라이트. 베가는 D3라이브러리를 기반으로 하고 있는데 다른 차트들이 “내가 차트들을 준비했으니 맘에 드는 것을 골라서 써보렴” 하는 느낌이라면 베가는 “니가 다양하게 커스터마이징 할 수 있게 우리가 보조할게” 하는 느낌. 다양한 커스터 마이징이 가능하다. 관련 커뮤니티가 꾸준히 성장하고 있는 것도 장점 중의 하나.

무료로 사용가능. 더 많은 기능을 지원하는 vega와 간단하고 심플하게 사용 할 수 있는 vega-lite가 있다. 많은 장점이 있으나 ie8버전 이하는 지원하고 있지 않아 좀 고민이 있다.

C3

전에 포스팅헸던 C3. 커스터 마이징이 많이 필요하지 않다면 이것도 간단하게 사용하기 좋다. C3는 애니메이션도 훌륭하고 디자인도 좋고 반응형이라서 내가 좋아함. 게다가 D3라이브러리를 기본으로 한 것중에는 좀 쉬운편. D3어려움…

EChart

이번에 차트 라이브러리 찾아보면서 알게된 중국에서 만든 차트. 바이두에서 만든 오픈소스 라이브러리이며 ie8이하까지 지원된다는 막강한 장점이 있다.
차트의 종류가 진짜 어마어마하게 많다. 니가 뭘 좋아할지 몰라서 다 준비해 봤어

개발자분께 이것저것 물어보니 자바스크립트 차트 라이브러리는 오조 오억개 정도 되는 느낌이다. 각자 다 장점과 단점이 있으니 살펴보고 프로젝트에 맞는 차트 라이브러리를 고르면 되겠다. 다만 한번 만든뒤로 업데이트가 되고 있지 않은 라이브러리들이 많은데 관련 커뮤니티가 꾸준히 성장하고 있는 라이브러리를 고르는 것이 좋을 것 같다.

vega-lite 기본 셋팅

본격적으로 베가 라이트를 살펴봅시당.
베가 라이트 예제에 들어가면 여러가지 예제를 살펴볼 수 있다. 이중에 나는 여러개의 라인으로 만들어진 라인차트가 필요.
Multi Series Line Chart
베가라이트가 커스터 마이징으로 다양한 차트를 그릴 수 있지만 나는 일단 초심자이니 비슷한 것을 수정해 가면서 하나하나 배우기로 한다.

음 한번 예제를 구경 했으니 실제로 써보도록 하자.
사용하기에 가보면 어떻게 기본 셋팅을 해야 하는지 나와있다. 실시간으로 가져와도 되고 라이브러리 다운받아도 되고, 노드로 설치해도 되고…

나는 링크로 가져오는(CDN) 방식을 선택.

<!DOCTYPE html>
<html>
<head>
  <title>Embedding Vega-Lite</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.8/vega.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.3/vega-lite.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc7/vega-embed.js"></script>
</head>
<body>
  <div id="vis"></div>
  <script type="text/javascript">
    var yourVlSpec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
      "description": "A simple bar chart with embedded data.",
      "data": {
        "values": [
          {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
          {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
          {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
        ]
      },
      "mark": "bar",
      "encoding": {
        "x": {"field": "a", "type": "ordinal"},
        "y": {"field": "b", "type": "quantitative"}
      }
    }
    vegaEmbed("#vis", yourVlSpec);
  </script>
</body>
</html>

이렇게 하면 기본적인 차트를 볼 수 있습니다.
기본차트

여기에서 우리가 아까 보았던 샘플로 돌아가 그 코드를 yourVlSpec에 넣어 봅시다.
앞으로는 yourVlSpec안에서만 코드를 변경할 겁니다.

var yourVlSpec =   {
      "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
      "description": "Stock prices of 5 Tech Companies over Time.",
      "data": {"url": "data/stocks.csv"},
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": {"format": "%Y"}},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    }

이렇게 하면 멋진 라인 그래프가 짠! 하고 안 나올 겁니다.
안나와요. 왜냐면 이건 csv데이터를 가져와서 그리는 거라서요. 다음 단계는 데이터 사이언스팀에 자료를 요청하는 겁니다. 왜….회사에 데이터 사이언스팀 하나씩 다 있잖아요. ㅎㅎㅎ

혹시나 데이터 때문에 안나오는 그래프가 안나오면 그때부터는 어떻게 해야 하는지 모를테니 일단 예제의 데이터 형식과 같게 데이터를 뽑습니다.
데이터는 베가 웹에서 개발자모드로 들어가 네트워크 탭을 누르시면 확인하실 수 있습니다.

네트워크 확인
stocks.csv를 보면 항목(symbol), 날짜(date, x축), 데이터 수치(price, y축)으로 정렬이 되어있습니다. 이런 형식으로 뽑아달라고 요청을 했습니다.
자료를 같은 폴더에 넣고 데이터 URL을 수정해 줍니다.

"data": {"url": "index_scaled_price.csv"},

이렇게 말이죠. 이렇게 하면 아마 전체 면적이 파란 그래프를 보실 수 있으실 겁니다.

파란색 그래프

color에서 "field": "symbol"을 "field": "index"로 수정해 봅니다. 항목이 symbol에서 index로 바뀌었으니까요. 그러면 진짜 알흠다운 그래프를 보실 수 있습니다.

알흠다워!

기본적으로 제공되는 차트도 예쁩니다. 색도 분명하게 구분이 되고 선도 얇습니다. (제거는 데이터 양이 좀 많아서 두꺼워보입니다.) 하지만 조금만 더 신경을 써보기로 합니다.

vega-lite 커스터마이징

거창하게 커스터마이징이라고는 하지만 색깔바꾸고, x축 grid없애고, 테두리 없애고, 크기 조정하고 X축 항목들 좀 조정하는 정도.

크기조정

웹에 넣으려고 작업을 한게 아니고 인쇄용으로 쓰려고 작업을 한 것이기 때문에 나는 큰 사이즈의 그래프가 필요했다. 사이즈를 조절하는 것은 쉽다.

var yourVlSpec = {
       "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
       "description": "Stock prices of 5 Tech Companies over Time.",
       "width": 1000,   //가로값 1000px
       "height": 800,   //세로값 800px 
       ...
       }

vega는 1000을 적으면 자동적으로 1000px으로 인식합니다.

테두리 없애기

그래프를 그리다 보니 오른쪽 세로선이 거슬림. 아무리 axisRight를 조절해 보아도 안 없어지는 선…. 주변에 자문을 구하니 저게 축이 아니라 테두리일 가능성이 있다는 것.

테두리가 defalt

그럼 테두리를 없애보자.

var yourVlSpec ={
    "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
        "description": "Stock prices of 5 Tech Companies over Time.",
        "data": {"url": "index_scaled_price.csv"},
        "width": 1000,
        "height": 800,
        "mark": "line",
        "encoding": {
          ...
        },
        "config": {
            "view": {
                "stroke": "transparent"
            }
        }
    }

하단에 config를 추가하여 view속성에서 선을 투명으로 바꾸는 코드를 추가해 준다. 그러면 다음과 같이 선이 없어진다.

테두리 없애기

x축의 그리드가 있기 때문에 명확하게 보이지 않는다. 그럼 다음으로 x축 그리드를 없애보기로 한다.

x축 그리드 없애기, 포맷 변경, 라벨 각도 조절

이것 모두 쉽게 조절이 가능하다.

...
"encoding": {
    "x": {
        "field": "date",
        "type": "temporal",
        "axis": {
           "format": "%Y-%m",   //라벨의 포맷을 변경, 달까지 나오게
           "grid": false,   //그리드 없애기
           "labelAngle": "320"  //라벨의 각도를 조절
        }
    },
    ...

x축 커스터마이징
조절한 모습, 위의 그림과 비교해보면 라벨이 돌아갔고, 세로선이 없어졌으며, 년도까지 나오던 라벨이 달까지 나오는 것을 알 수 있다.

선 색깔 바꾸기

마지막으로 라인의 색을 수정하며 마치기로 합니다.
색은 기존에 있던 컬러에서 약간의 코드를 추가하여 바꿀 수 있습니다.

"color": {
    "field": "index", 
    "type": "nominal",
    "scale": {
            "range": ["#ff775e", "#f985a6", "#97d93f", "#febd3a", "#916ed6", "#6489ae", "#44b9e2"]
          } //추가된 부분
    }

데이터 컬러 바꾸기

이외에도 vega로 바꿀 수 있는 부분이 많이 있습니다. 베가 홈페이지의 Documentation에 보면 뭔가 많이 있습니다. 수정하고 싶으신 부분을 찾으시거나 비슷한 그래프를 인터넷에 찾아보시면 도움이 되실 거라고 생각합니다. 배울 건 언제나 넘치네요. 하지만 나는 귀찮을 뿐이고

열심히 합시다!