D3.js 를 사용하여 데이터 시각화하기 #4 Custom Bar Charts

Explanation

오늘은 예제로 사용하던 막대 그래프를 기반으로 간단하게 스타일을 조금 수정하고 툴팁 박스를 추가로 만들어보려 합니다.

[이전글 참고]
D3.js 를 사용하여 데이터 시각화하기 #1 Line Charts
D3.js 를 사용하여 데이터 시각화하기 #2 Bar Charts
D3.js 를 사용하여 데이터 시각화하기 #3 Pie Charts

아직 초보이기 때문에 글에는 수많은 추측과 오류를 담고 있습니다.

1. 예제로 사용하던 막대 그래프 미리보기

예제 코드 출처
https://beta.observablehq.com/@mbostock/d3-pie-chart

아래의 코드는 위 예제 코드를 아주 조금 수정한 내용입니다.

2. 커스텀 막대 그래프 미리보기

3. 코드

ES6 문법을 사용해서 최신 브라우저에서 테스트해야 할 것 같습니다. 저는 최신 버전의 크롬에서 테스트 하였습니다.

4. 마치며

SVG의 엘리먼트들은 일반적인 DOM의 엘리먼트과 거의 동일하게 자바스크립트로 제어할 수 있어서, SVG에 대해 공부좀 하고 D3.js API들도 좀 많이 알게되면 정말 다양하게 편하게 만들 수 있을거 같아요.