Rev. 2.73

Ricardo Cabello씨는 몇년 전에 플래시용으로 작업한 픽셀 벤더를 자바스크립트와 Canvas 요소로 옮기는 실험을 했습니다. 이것은 출력되는 비트맵의 모든 픽셀에 수식을 적용하는 것입니다. 자바스크립트는 제법 빠른 수학 연산으로 비트맵을 그려내는 것을 확인할 수 있습니다. 그는 나중에 WebGL이 나오면 더욱 선명하고 빠르게 처리할 수 있을 것으로 기대하고 있습니다.

Comments

NASDAQ:GOOG

HumbleFinance는 HTML5 데이터 비주얼라이제이션 도구입니다. 마치 플래시로 만들어진 듯한 모양과 기능을 가진 차트를 제공합니다. 표현 범위의 제한이 없고 서로 다른 자료의 축을 공유하여 비교해야하는 금융 자료를 2D 차트로 표현하기에 적합합니다.(Google Finance 와 유사한) 그리고 특정한 구간을 선택하여 확대할 수도 있습니다. PrototypeFlotr 자바스크립트 라이브러리를 이용하였으며, 자바스크립트 변수에 저장된 데이터와 파라미터를 근거로 그래프를 표현하고 CSS와 HTML을 이용하여 컨트롤러와 플래그 모양을 만들었습니다.

HTML:

div id="finance">
    <div id="labels">
        <div id="financeTitle">NASDAQ:GOOG</div>
        <div id="time">
            <a onclick="HumbleFinance.zoom(5);">1w</a>
            <a onclick="HumbleFinance.zoom(21);">1m</a>
            <a onclick="HumbleFinance.zoom(65);">3m</a>
            <a onclick="HumbleFinance.zoom(127);">6m</a>
            <a onclick="HumbleFinance.zoom(254);">1y</a>
            <a onclick="HumbleFinance.zoom(1265);">5y</a>
        </div>
        <div id="dateRange"></div>
    </div>
</div>

Javascript:

Event.observe(document, 'dom:loaded', function() {
    HumbleFinance.trackFormatter = function (obj) {
        var x = Math.floor(obj.x);
        var data = jsonData[x];
        var text = data.date + " Price: " + data.close + " Vol: " + data.volume;
        return text;
    };
    
    HumbleFinance.yTickFormatter = function (n) {
        if (n == this.axes.y.max) return false;
        return '$'+n;
    };
    
    HumbleFinance.xTickFormatter = function (n) { 
        if (n == 0) return false;
        var date = jsonData[n].date;
        date = date.split(' ');
        date = date[2];
        return date; 
    }
    
    HumbleFinance.init('finance', priceData, volumeData, summaryData);
    HumbleFinance.setFlags(flagData); 
    
    var xaxis = HumbleFinance.graphs.summary.axes.x;
    var prevSelection = HumbleFinance.graphs.summary.prevSelection;
    var xmin = xaxis.p2d(prevSelection.first.x);
    var xmax = xaxis.p2d(prevSelection.second.x);
    
    $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);
    
    Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
        var area = e.memo[0];
        xmin = Math.floor(area.x1);
        xmax = Math.ceil(area.x2);
        var date1 = jsonData[xmin].date;
        var date2 = jsonData[xmax].date;
        $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);
    });
});

ExplorerCanvas를 이용하면 완벽하지는 않지만 IE계열 브라우저에서도 사용할 수 있습니다.

Comments