D3.js 기반 라이브러리에서 전용 Plot Chart를 만들 수 있는 라이브러리가 있어서 간단히 소개 합니다. 회계와 같은 분석 차트를 만들 때 사용되는데 보시면 거래소의 가상화폐 차트로 보이더군요. 거래소 차트를 만들 때 이걸 이용하여 분석 차트를 만들면 재밌지 않을까 하는 생각이 들기도 했네요. 제대로 써보지 않고 간단히 구경한 내용을 정리해 봤습니다.
첫 화면부터 Plot Chart를 보여주는데 차트 그림만 봤을 때 가상화폐 거래소 처럼 보이네요. 물론 축값을 보면 아닌 걸 쉽게 알 수 있지만 Plot 그림은 거래소의 가상화폐 상승 모습처럼 다가오네요.
위 그림을 보시면 Documentation, Source, Examples로 구성되어 있습니다.
<script src="http://techanjs.org/techan.min.js"></script>
다행히 온라인 연결 주소를 제공해 주네요.
링크 된 두 곳은 동일인의 같은 예제입니다.
위 그림에서 보시는 것처럼 Plots들이 많죠. 클릭하시면 차트랑 소스를 보실 수 있습니다. 그러면 소스는 html 에디터가 없다면 메모장으로 복사하셔서 돌리시면 됩니다.
소스는 출처 위치에 가셔서 보시면 되는데 일부를 발췌해서 간단히 서명을 할께요.
... 생략
var x = techan.scale.financetime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var candlestick = techan.plot.candlestick()
.xScale(x)
.yScale(y);
...생략
대충 단어로 보면 scale과 plot를 만드는 것을 표현 한 것 같은데 plot은 기본차트여서 그런가 다른 별다른 함수를 이요하지 않았네요. 참고로 D3.js 함수드이 주로 사용하여 대부분의 코드를 차지하고 일부만 plot에 관한 부분만 TechanJS 라이브러리를 사용했네요. 이 라이브러리를 제대로 사용 하려면 D3.js 함수들을 완전히 정리한 뒤에 사용해야 할 듯 싶네요.
출력도 보면,
function draw(data) {
x.domain(data.map(candlestick.accessor().d));
y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());
svg.selectAll("g.candlestick").datum(data).call(candlestick);
svg.selectAll("g.x.axis").call(xAxis);
svg.selectAll("g.y.axis").call(yAxis);
}
이와 같이 x은 techan이고 y은 d3이고 svg 출력은 d3에 techan 호출하여 보여주듯이 코딩이 d3와 techan이 뒤섞여 있고 대부분 d3가 코딩되어 있기 때문에 공부하실 때 techan 부분을 찾아서 별도로 래퍼런스를 보고 공부를 하셔야 할 듯 싶네요. d3를 어느정도 공부 안하고 바로 techan 라이브러리를 사용하기에는 어려움이 있어 보이네요.
아무튼 위 출처 링크 위치로 가서 소스를 메모장에 복사해서 우선 돌려봤네요.
참고로 D3.js를 v5로 수정해서 돌려봤는데 안되더군요. v4에서만 실행 됩니다. v5로 하면 변경된 함수가 있어서 에러가 발생하네요. 귀찮아서 변경함수를 찾아서 수정하여 돌려봐야 하는데 안했네요.
이 예제도 메모장에 복사해서 돌려봤네요.
나중에 여러개 차트를 분석용으로 만들면 좋을 것 같네요. 별다른 설명없이 그냥 링크와 이미지만 post에 걸어 놓은 것은 아직은 d3.js을 완벽하게 구사하지 못하고 설명이 제대로 되지 않을 것 같아서 생략하고 제가 나중에 공부하기 위해서 표시해 놨네요.
오늘은 techan.min.js 라이브러리 함수에 대한 설명은 없었네요. 딱히 표현 된 부분은 없고 전체 차트 기준으로 주 코딩은 D3.js로 이루어졌으면 plots만 코딩되어 있어서 설명을 하기가 애매해서 생략했네요.
첫번째 예제 Candlestick도
var width = 900;
var height = 600;
var x = techan.scale.financetime().range([0, width])
var y = d3.scale.linear().range([height, 0]);
var candlestick = techan.plot.candlestick().xScale(x).yScale(y);
이것 뿐이네요.
위 그림처럼 이부분만 만들어주고 나머지 차트 부분은 d3.js로 만들어야 하네요. 데이터 출력 부분만 담당하네요.
제대로 사용하기 위해서는 D3.js가 어느정도 사용 할 수 있어야 techan.min.js 라이브러리 사용하여 차트를 만들 수 있네요. 이 라이브러리는 저에게 있어 아직은 사용 할 단계는 아니지만 D3.js가 어느정도 되면 사용하고 싶은 라이브러리네요.