D3.js 로 만든 Area Chart

D3.js 로 만든 Area Chart

D3.js를 사용해서 만든 Area Chart 입니다.

[데모보기]

[소스보기]

http://www.recursion.org/d3-for-mere-mortals/ 를 보고 그대로 만들었습니다.

데이터는 2011년도 서울의 매월 1일, 11일, 21일의 일출, 일몰시각을 검색해서 json파일로 만들어서 사용했습니다. 모든 날짜를 다입력하면 더 정확한 데이터가 될텐데, 시간이 많이 걸려서 월당 3일씩만 조사했습니다.

차트의 가로축은 1월부터 12월까지의 기간이 되고, 세로축은 0시부터 23시59분까지의 시간입니다. 일출시각을 area chart로 만들고 일몰시각도 area chart로 만들면 가운데 비는 부분이 타원모양의 볼록한 형태가 되는데 이 부분의 높이가 일몰시각에서 일출시각을 뺀 것이 되므로 낮의 길이가 됩니다. 여름으로 갈수록 낮이 길어지고 겨울로 갈수록 낮이 짧아지는 형태의 차트가 됩니다.

차트만 보면 마치 가운데 타원모양을 차트로 만든 것 같지만, 그렇게 한 것은 아니고 배경에 steelblue 색상의 rect를 깔고 그 위에 area chart를 위아래로 두개 올리니 그런 모양이 만들어진 것입니다.

소스코드를 보시면 그렇게 복잡하지 않습니다. D3.js를 사용하면 이런 형태의 차트도 비교적 이해가 잘되는 소스코드로 만들 수 있는 것 같습니다.