[D3.js] techan.min.js 라이브러리 Plot Chart

codingman (64)in #dclick • 8 years ago (edited)

[D3.js] techan.min.js 라이브러리 Plot Chart

TechanJS 홈페이지 : http://techanjs.org/

D3.js 기반 라이브러리에서 전용 Plot Chart를 만들 수 있는 라이브러리가 있어서 간단히 소개 합니다. 회계와 같은 분석 차트를 만들 때 사용되는데 보시면 거래소의 가상화폐 차트로 보이더군요. 거래소 차트를 만들 때 이걸 이용하여 분석 차트를 만들면 재밌지 않을까 하는 생각이 들기도 했네요. 제대로 써보지 않고 간단히 구경한 내용을 정리해 봤습니다.

1. techan.min.js 라이브러리

첫 화면부터 Plot Chart를 보여주는데 차트 그림만 봤을 때 가상화폐 거래소 처럼 보이네요. 물론 축값을 보면 아닌 걸 쉽게 알 수 있지만 Plot 그림은 거래소의 가상화폐 상승 모습처럼 다가오네요.

위 그림을 보시면 Documentation, Source, Examples로 구성되어 있습니다.

Documentation : Examples Gallery, API Reference로 구성되어 있는데 Examples Gallery은 Examples와 같은 링크로 되어 있네요.
Source : github가 링크 걸려 있는데 가셔서 예제 파일을 다운 받으셔서 실험하시면 됩니다.
Examples : 다양한 Plots이 있는데 예제가 잘 나누어져 있어서 예제는 분석하면서 공부하시면 좋을 듯 싶네요.

[링크] :

<script src="http://techanjs.org/techan.min.js"></script>

다행히 온라인 연결 주소를 제공해 주네요.

2. Examples

출처 :
Examples : https://github.com/andredumas/techan.js/wiki/Gallery
André Dumas’s Blocks : https://bl.ocks.org/andredumas

링크 된 두 곳은 동일인의 같은 예제입니다.

위 그림에서 보시는 것처럼 Plots들이 많죠. 클릭하시면 차트랑 소스를 보실 수 있습니다. 그러면 소스는 html 에디터가 없다면 메모장으로 복사하셔서 돌리시면 됩니다.

TechanJS Candlestick 예제

출처 : http://bl.ocks.org/andredumas/27c4a333b0e0813e093d

소스는 출처 위치에 가셔서 보시면 되는데 일부를 발췌해서 간단히 서명을 할께요.

... 생략
    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로 하면 변경된 함수가 있어서 에러가 발생하네요. 귀찮아서 변경함수를 찾아서 수정하여 돌려봐야 하는데 안했네요.

TechanJS Multiple Plot Handling 예제

출처 : http://bl.ocks.org/andredumas/274b54b4d2c2ffa19fca

이 예제도 메모장에 복사해서 돌려봤네요.

나중에 여러개 차트를 분석용으로 만들면 좋을 것 같네요. 별다른 설명없이 그냥 링크와 이미지만 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);

이것 뿐이네요.