[그래픽] D3

D3는 Data-Driven Documents의 약자로 데이터 조작을 기반으로 만든 문서를 의미합니다.
HTML, SVG 및 CSS를 사용하여 데이터에 활기를 불어 넣습니다.
주변에서 볼 수 있는 그래프와 차트는 물론 여러 데이터를 비주얼화 할 수 있습니다.
– 데이터 기반 그래픽과 차트
– 오픈소스 (BSD 라이센스)

기본적인 흐름

D3는 일반적인 라이브러리와 사용법이나 문법이 다릅니다.
기본적으로 아래와 같은 구조를 가집니다.

  • 데이터 호출
  • 그래프나 요소 선택자 지정
  • SVG 지정
  • 요소의 속성값으로 데이터 표시
  • 애니메이션이나 이벤트 삽입

1.가로 막대 그래프

2.세로 막대 그래프