fig1.xyz -> D3サンプル

D3.jsを利用してみる

D3.jsを利用したデモです。
表示するデータはYahoo financeのヒストリカルデータを利用。
例:Yahoo! Inc.
22銘柄の日足データ3カ月分を対象に、前日からの変化率をtsvファイルにまとめてあります。
usstock.tsv

3種類のグラフを表示

データの読み込みについて

JSONはもちろん、csv,tsvフォーマットのデータファイルも読み込めます。
csv,tsvデータはJavascriptの連想配列として取り込まれ、csvのヘッダー行を参考に自動的にキーが作成されます。 また、キー毎に列データとしてもアクセスできるようになっています。
読み込まれたデータはただの連想配列なのでUnderscore,JQuery,AngularJSからもシームレスに呼び出すことができます。

日毎の変化率(heatmap)

D3を利用したDOM(タグ)の作成 (要約)
var table = d3.select('#canvas_heat')
    .append('table')   //tableタグ追加
    .append('tbody')   //tbodyタグ追加
    .selectAll('tr')
    .data(raw)
    .enter()
    .append('tr')      //trタグ追加
        .selectAll('td')
        .data(function (csv_data) { ...  })
        .enter()
        .append('td')    //tdタグ追加   
selectAll() // 存在していないタグ(DOM) でもOK
data()      // 表示するデータを指定
enter()     // 
append()    // DOMを作成、追加
上記のメソッドチェーンを呼び出すとデータの数に合わせてタグを作成してくれる。
    

日毎の変化率(line)


変化率(絶対値)の分布