[D3.js] nv.d3.js 라이브러리 소개

codingman (64)in #dclick • 6 years ago (edited)

[D3.js] nv.d3.js 라이브러리 소개

nv.d3.js 홈페이지 : http://nvd3.org/index.html

D3.js 기반 라이브러리가 진짜 많은데 그 중에서 nv.d3.js 라이브러리를 소개를 할까 합니다. 지난 시간에 쉽게 차트를 만들었던 C3.js보다는 좀 어렵게 느껴지지만 나름 괜찮은 차트를 만들어 주기 때문에 활용도가 높을 것 같습니다. 그러면 간단히 이 라이브러리를 살펴 봅시다..

1. nv.d3.js 라이브러리

nv.d3.js 홈페이지에 가시면 위 그림처럼 첫 화면이 나오는데 구성은 예제, 라이브 코드, 소스로 구성되어 있습니다.

1) 예제

예제는 위 그림에서 보는 것 순서대로 차트를 시각화하는 예제로 구성되어 있습니다. 해당 차트를 클릭하여 보시면 예제 코딩 소스까지 다 나와 있어서 소스를 분석하셔서 이해하시면 될 거에요.

2) Live Code

Live Code를 클릭하시면 예제 창이 뜨고 다양한 예제들을 볼 수 있을 거에요. 여기서 적당한 예제 클릭하면 아래와 같이 보여주게 됩니다.

오른쪽 코딩창을 보시면 Line Chart를 보여주기 위한 코딩을 3부분으로 나뉘었는데 차트 부분과 데이터 부분 그리고 마지막 html/css 부분으로 나뉘게 되고 이 세개의 창에서 코드를 수정하면 실시간으로 왼쪽창의 Line Chart의 그래프가 변경이 됩니다.

3) Source

https://github.com/novus/nvd3

소스 파일들이 github에 있네요. 예제파일드이 있으니 테스트 할 때 복사하셔서 테스트 하시면 될 것 같네요.

4) reference

http://nvd3-community.github.io/nvd3/examples/documentation.html

2. 실험

Source 부분을 github에서 직접 해당 코드부분을 복사하셔서 돌려 볼 수 있지만 홈페이지에 가면 다운로드가 있는데 다운받으시면 github의 전체 Source 파일을 다운받게 됩니다. 그거 통째로 여러분의 컴퓨터에 해당 폴더에서 index.html 파일을 여시고 실험하시면 됩니다.

위 그림처럼 페이지가 열리네요.

코딩이 된 소스를 보면 live code의 코딩량보다 좀 엄청 길꺼에요. live code로 공부하시고 실제로 live code에 나온 예제로 돌려보고 싶을 때 아무 예제나 여시고 필요한 부분만 남기고 다 지운 후 live code 부분을 삽입해서 돌리시면 됩니다.

[코딩 틀]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
    <script src="../build/nv.d3.js"></script>
   <style>
     스타일 지정
   </style>     
</head>
<body>  
   태그 지정
</script>
  코딩 삽입
</script>
</body>
</html>

위와 같이 우선 틀을 잡으시고 삽입하시면 됩니다.

[live code 실험 예제]
출처 : http://nvd3.org/livecode/index.html

Line Chart 예제를 코드를 코딩 틀에 삽입하면 아래와 같이 완성이 됩니다.

[소스]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
    <script src="../build/nv.d3.js"></script>

   <style>
    #chart svg {
        height: 400px;
    }
   </style>
</head>
<body>

<div id="chart">
  <svg></svg>
</div>


<script>

 nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
    ;

  chart.xAxis
    .axisLabel('Time (ms)')
    .tickFormat(d3.format(',r'))
    ;

  chart.yAxis
    .axisLabel('Voltage (v)')
    .tickFormat(d3.format('.02f'))
    ;

  d3.select('#chart svg')
    .datum(data())
    .transition().duration(500)
    .call(chart)
    ;

  nv.utils.windowResize(chart.update);

  return chart;
});

function data() {
  var sin = [],
      cos = [];

  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10)});
    cos.push({x: i, y: .5 * Math.cos(i/10)});
  }

  return [
    {
      values: sin,
      key: 'Sine Wave',
      color: '#ff7f0e'
    },
    {
      values: cos,
      key: 'Cosine Wave',
      color: '#2ca02c'
    }
  ];
}
</script>
</body>
</html>

[결과]
정상적으로 live code가 실행 되네요.

3. Line Chart 분석

기본 베이스 nv.addGraph()함수로 묶이는데 차트 지정은 다음과 같습니다.

nv.models.lineChart()
nv.models.pieChart()
...
nv.models.차트명()

그리고 내부 속성은 래퍼런스를 보시고 지정하면 되는데 일부는 생략하면 디폴트 값으로 차트를 출력됩니다.

가령, Line chart 경우를 살펴보면 live code에 나와 있는 Line Chart에서 보면 다음과 같은 코딩을 하게 됩니다.

nv.addGraph(function() {
  var chart = nv.models.lineChart() //출력 차트
    .useInteractiveGuideline(true)
    ;

  chart.xAxis //x축 지정
    .axisLabel('Time (ms)') 
    .tickFormat(d3.format(',r'))
    ;

  chart.yAxis //y축 지정
    .axisLabel('Voltage (v)')
    .tickFormat(d3.format('.02f'))
    ;

  d3.select('#chart svg') //출력 캔퍼스 지정
    .datum(data()) //출력데이터
    .transition().duration(500)
    .call(chart) //라인차트호출
    ;

  nv.utils.windowResize(chart.update);

  return chart;
});

참고로, 대충 아래와 같이 x축/y축 지정 코드를 생략하면 디폴드 값으로 Chart가 출력이 됩니다.

nv.addGraph(function() {
  var chart = nv.models.lineChart() //출력 차트
    .useInteractiveGuideline(true)
    ;
d3.select('#chart svg') //출력 캔퍼스 지정
    .datum(data()) //출력데이터
    .transition().duration(500)
    .call(chart) //라인차트호출
    ;
  nv.utils.windowResize(chart.update);

  return chart;
});

[결과]

위 결과 이미지를 보는 것처럼 축 네임이 사라졌고 tick 값이 디폴트로 출력 되었네요. 일부 생략하니깐 실제 코딩은 몇줄 안되네요. 완성된 소스들을 보면 머리가 아프고 코딩량도 엄청 길고 어렵게 느껴지지만 이렇게 디폴트 형태로만 출력하여 차트를 이해하면 좀 쉽게 다가올 수 있습니다. 코딩이 길다고 느껴지면 그냥 차트를 디테일적으로 기교를 부리며 표현했다고 보시면 될 것 같네요.

마무리

처음 이 nv.d3.js 라이브러리고 코드를 봤을 때 C3.js보다 좀 어렵게 느껴졌는데 쪼개서 살펴보니 그럭저럭 사용 해볼만 한 것 같다는 느낌이 들었네요. 최근에는 D3.js로 차트를 공부하면서 만들 생각은 안하고 D3.js 기반 라이브러리를 찾아서 그걸로 차트를 좀 더 쉽게 만들려고 하고 있네요. 대충 라이브러리를 그만 찾고 D3.js로 돌아가야 겠네요. 아무튼 d3.js 기반 라이브러리가 엄청 많은데 여러분들도 한번 https://github.com/d3/d3/wiki/Gallery 이 곳에 하단 부분에 라이브러리들이 정리 되어 있는데 여러분들이 원하는 라이브러리를 찾아서 한번 공부해 보세요.