CODELIB

D3.js는 뛰어난 유연성과 데이터 시각화로 원하는 모든 작업을 부팅할 수 있는 기능으로 지금까지 다양한 D3 차트를 구현하면서 항상 놀라게 했다. D3.js는 데이터 기반 문서(D3, Data-Driven Documents)를 표방하는 SVG 기반의 시각화 기술이다. SVG는 ‘Scalable Vector Graphics’의 약자다.SVG는 HTML 페이지 안에서 다른 태그와 같은 방식으로 화면을 그리고, 코드 작업으로 이미지를 편집하여 이벤트를 처리할 수 있고,그려야 할 선의 위치, 길이, 방향 등을 수학적으로 결정하기 때문에 여타 이미지와는 다르게 벡터 기반 그래픽으로 더 나은 화질을 화면에 보여주면서 확대·축소시 그림이 깨지는 등의 품질 손상이 없는 장점을 지녔다.D3.js는 이런 SVG의 장점을..

Path Transitions시계열 데이터의 실시간 표시를 구현할 때 종종 x 축을 사용하여 시간을 위치로 인코딩합니다. 시간이 경과함에 따라 새로운 데이터가 오른쪽에서 나오고 오래된 데이터가 왼쪽으로 미끄러져 나옵니다. 그러나 D3에 내장 된 path interpolators(경로 보간)를 사용 하면 몇 가지 놀라운 동작이 나타날 수 있습니다. 위 차트는 다소 산만합니다. 흔딜리고 있다는 느낌을 받습니다.하지만 자세히보면 차트내 데이터가 오른쪽에서 왼쪽으로 이동하고있음을 알 수 있습니다.(데이터는 랜덤데이터로 가정하여 받습니다.) 흔들리는 느낌을 제거하기 위해 select를 지정해주고 transform해줍니다.그리고 x축도 그려넣습니다.설명은 아래에서 같이 자세하게 다루겠습니다.1234567891011..

이번 장에서는 여러 데이터를 표현하는 기본적인 차트 중다중곡선 차트에 대해 구성해본다. 그 중 예시로 연간 전기사용량(Electricity. kWh)에 대해서 차트를 구성해본다. [JSP]12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 .axis--x path { display: none;} .line { fill: none; stroke: steelblue; stroke-width: 1.5px;} var svg = d3.s..