d3.js 와 chartjs

D3.js

D3.js 는 데이터를 기반으로 웹브라우저상에서 동적이고 인터렉티브한 정보시각화를 구현하기 위한 JavaScript 라이브러리이다. HTML의 DOM 요소나 SVG, Canvas 등을 통하여 데이터를 시각화 할 수 있으며 특히 SVG를 사용하여 다양한 해상도에서도 깨짐없이 보여줄 수 있다.

장점
1. 라이브러리 패키지 크기가 작은 편에 속한다.
2. 예제가 많은 편이다.
3. 시각화에 SVG를 활용한다. → SVG가 가지는 장점을 지님
4. 웹 표준에 가깝다.
5. DOM 기반으로 활용도가 높다.

단점
1. 러닝커브가 높은 편이다.
2. 외부 이미지로 저장이 불가능하다.
3. 이미지 요소가 많아질 경우 CANVAS에 비해 성능이 좋지 못할 가능성이 있다.
4. pre-build 차트가 아니기 때문에 브라우저에서 호출하여 그린다.
5. IE9+ 이상에서만 지원한다.

사용법

• 최신버전을 사용하기 위해 CDN을 사용한다.

<script src="http://d3js.org/d3.v3.min.js"></script>

• 요소 선택

  <div class="one">
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
  </div>

const one = d3.select(".one"); // css 선택자를 사용하여 요소를 선택한다.
const two = d3.selectAll(".two"); // css 선택자를 사용하여 공통된 요소들은 모두 선택한다.

• SVG 생성

<div class="canvas"></div>

• 메소드 체인을 사용하여 작성한다.

const canvas = d3.select(".canvas"); // class가 canvas인 요소를 찾는다.
const svg = canvas.append("svg") // svg태그 추가
				  .attr("width", 1000) // svg태그의 너비값 1000px
                  .attr("height", 1000); // svg태그의 높이값 1000px

const color = ["red", "green", "blue", "pink", "black"]; // 임의의 색깔 5개

for (let i = 1; i < 6; i++) { // 5번 반복
  svg.append("circle") // svg sircle 태그 생성
    .attr("cx", 100 * i) // 원의 가로좌표 설정
    .attr("cy", 100 * i) // 원의 세로좌표 설정
    .attr("r", (30 * i) / 2) // 원의 반지름  설정
    .attr("fill", color[i - 1]); // color 배열의 색깔 넣기
}

• 결과
  

---

Chart.js

디자이너와 개발자를 위한 간단하면서도 유연한 JavaScript 차트 작성 라이브러리
D3.js 보다 러닝커브가 낮으며 간단하다.

사용법

• 최신버전을 사용하기 위해 CDN을 사용한다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

• canvas 를 사용한다.

<canvas id="myChart" width="400" height="400"></canvas>

const ctx = document.getElementById('myChart'); // Canvas 요소를 가져온다.
const myChart = new Chart(ctx, {				// 새로운 차트 생성
    type: 'bar',								// 차트 타입은 막대차트이다.
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], //항목별 이름
        datasets: [{
            label: '# of Votes',		// hover시 표시되는 글자
            data: [12, 19, 3, 5, 2, 3], // 막대 차트 각각의 데이터
            backgroundColor: [			// 차트 막대의 배경색
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [				// 차트 막대의 테두리색
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1				// 차트 막대의 테두리 굵기
        }]
    },
    options: {							// 옵션 설정
      	responsive: false,				// 생략하면 true로 전체 넓이만큼 커진다.
        scales: {						// 
            y: {						// y 축
                beginAtZero: true		// 막대의 값비교를 0과 하는가 최솟값과 하는가
            }
        }
    }
});

Reference

https://github.com/zziuni/d3/wiki
https://www.chartjs.org/docs/latest/getting-started/usage.html