D3.js 를 사용하여 데이터 시각화하기 #5 Area Charts + 그라데이션 + 도트

Explanation

오늘은 오랜만에 D3js를 사용한 차트만들기!
이번 포스팅은 D3를 사용해서 영역 차트를 만들고, 영역에 그라데이션도 넣어보고 거기에 도트도 추가해 보려 합니다.

1. 영역 차트의 기본인 라인 차트 만들기

라인 차트는 예전에 만들었던 것에서 스타일만 약간 수정했어요.
https://falsy.me/d3-js-를-사용하여-데이터-시각화하기-1-line-charts/

2. 영역 차트로 바꾸기

간단하게 달라진 부분만 살펴보면,

영역을 그릴 값이 추가 되었죠, ‘d3.area()’값으로 영역을 그린거에요. x값은 data의 date의 값의 위치로 y값은 y1 값을 0부터 y1에 data의 value 값으로 지정해줘서 영역을 가질 수 있게 해줬답니다. 그리고 avg에 ‘fill’값에 색상을 정해주고 ‘line’과 ‘area’값을 추가해 주었답니다.

그런데 이렇게 되면 선이 아래를 쭉 감싸고 있어서 보기 이쁘지 않죠, 그래서 ‘line’값과 ‘area’값을 따로 그리면 조금 더 보기 좋게 그릴 수 있답니다.

코드를 살펴보면 아래와 같아요.

3. 영역에 그라데이션 추가하기

추가된 코드는 아래와 같답니다.

조금 설명을 적자면… 코드에 있는 내용 그대로지만,
id값이 ‘grad’라는 ‘linearGradient’를 만들고 svg에 style값으로 ‘#grad’를 주었답니다.

4. 도트 추가하기

도트를 추가하는 건 간단하답니다.