JSグラフライブラリNVD3.jsã‚’ä½¿ã£ã¦ã¯ã¦ãªãƒ–ãƒ­ã‚°ã«ãƒã‚¤ã‚»ãƒ³ã‚¹ãªæ ªä¾¡ãƒãƒ£ãƒ¼ãƒˆã‚’è¡¨ç¤ºã•ã›ã‚‹æ–¹æ³•

久々にプログラミング系のネタです。

はてなブログにJavaScriptのグラフライブラリであるNVD3.jsを使用し、ハイセンスな株価チャートを表示させてみます。

もちろん、同様の方法で棒グラフ、円グラフ、折れ線グラフ等の基本グラフや、複合グラフ等の高機能なグラフまで簡単に表示させることができます。

１．CSS/ライブラリの読み込み

まずはCSSとJavaScriptライブラリを読み込みましょう。

下記ソースをページ上部にコピーします。

<link href="http://cdn.rawgit.com/novus/nvd3/v1.8.4/build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="http://cdn.rawgit.com/novus/nvd3/v1.8.4/build/nv.d3.js"></script>

２．グラフ表示エリア

グラフを表示させたい場所に下記コードを記載します。

<div id="chart1" style="height:400px;">
  <svg></svg>
</div>

３．JavaScript本体の記述

最後にJavaScript本体の記述です。

以下のフォーマットでデータを追加していきます。

{"date": 日付（1970年1月1日からの経過日数）, "open": 始値, "high": 高値, "low": 安値,  "close": 終値},

データを追記して以下のソースを最後に貼り付けます。

<script>
var data = [{values: [
{"date": 16848, "open": 6150, "high": 6172, "low": 6011,  "close": 6076},
{"date": 16849, "open": 6259, "high": 6293, "low": 6156,  "close": 6180},
ここにデータを記載していく
]}];


nv.addGraph(function() {
  var chart = nv.models.candlestickBarChart()
   .x(function(d) { return d['date'] })
   .y(function(d) { return d['close'] })
   .duration(250)
   .margin({left: 75, bottom: 100});

  chart.xAxis
   .tickFormat(function(d) {
     return d3.time.format('%x')(new Date(d * 86400000));
   });

  chart.yAxis
   .tickFormat(function(d,i){ return '\ï¿¥' + d3.format(',.0f')(d); });

  d3.select("#chart1 svg")
   .datum(data)
	.transition().duration(500)
	.call(chart);

  nv.utils.windowResize(chart.update);

  return chart;

});

</script>

４．動作サンプル

下記にトヨタ自動車（7203）の株価チャートを表示してみます。

Tooltipも表示されてなかなかハイセンスな株価チャートです！

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

５．ほかにもハイセンスなサンプル

ドーナツチャート

円グラフのライブラリはよく見かけますが、ドーナツチャートは面白いです。

<script>
    var testdata = [
        {key: "10代", y: 5},
        {key: "20代", y: 2},
        {key: "30代", y: 9},
        {key: "40代", y: 7},
        {key: "50代", y: 4},
        {key: "60代", y: 3},
        {key: "70代", y: 0.5}
    ];
    var height = 350;
    var width = 350;
    var chart1;
    nv.addGraph(function() {
        var chart1 = nv.models.pieChart()
            .x(function(d) { return d.key })
            .y(function(d) { return d.y })
            .donut(true)
            .width(width)
            .height(height)
            .padAngle(.08)
            .cornerRadius(5)
            .id('donut1');
        chart1.title("100%");
        chart1.pie.donutLabelsOutside(true).donut(true);
        d3.select("#test1")
            .datum(testdata)
            .transition().duration(1200)
            .call(chart1);
        return chart1;
    });
</script>

散布図

ランダムで散布図を描画するサンプルです。
散布図は形状や色でグルーピングできてなかなかハイセンスですね！

<script>

    nv.utils.symbolMap.set('thin-x', function(size) {
        size = Math.sqrt(size);
        return 'M' + (-size/2) + ',' + (-size/2) +
                'l' + size + ',' + size +
                'm0,' + -(size) +
                'l' + (-size) + ',' + size;
    });

    var chart;
    nv.addGraph(function() {
        chart = nv.models.scatterChart()
            .showDistX(true)
            .showDistY(true)
            .useVoronoi(true)
            .color(d3.scale.category10().range())
            .duration(300)
        ;
        chart.dispatch.on('renderEnd', function(){
            console.log('render complete');
        });
        chart.xAxis.tickFormat(d3.format('.02f'));
        chart.yAxis.tickFormat(d3.format('.02f'));
        d3.select('#test2 svg')
            .datum(randomData(4,40))
            .call(chart);
        nv.utils.windowResize(chart.update);
        chart.dispatch.on('stateChange', function(e) { ('New State:', JSON.stringify(e)); });
        return chart;
    });
    function randomData(groups, points) {

        var data = [],
            shapes = ['thin-x', 'circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
            random = d3.random.normal();
        for (i = 0; i < groups; i++) {
            data.push({
                key: 'Group ' + i,
                values: []
            });
            for (j = 0; j < points; j++) {
                data[i].values.push({
                    x: random(),
                    y: random(),
                    size: Math.round(Math.random() * 100) / 100,
                    shape: shapes[j % shapes.length]
                });
            }
        }
        return data;
    }
</script>

関連グラフ

ビジュアル的に一発で関連性がわかるグラフを描画できます。
SNSなんかで使えそう。

<script>
    nv.addGraph({
        generate: function() {
            var d3Colors = d3.scale.category20();
            var chart = nv.models.forceDirectedGraph()
                .width(500)
                .height(700)
                .color(function(d) { return d3Colors(d.group) })
                .nodeExtras(function(node) {
                  node
                    .append("text")
                    .attr("dx", 12)
                    .attr("dy", ".35em")
                    .text(function(d) { return d.name });
                });
            d3.select('#test3')
              .datum(all_data)
              .call(chart);
            return chart;
        }
    });
</script>
<script>
var all_data = {
    "nodes":[
    {"name":"山田","group":1},
    {"name":"鈴木","group":1},
    {"name":"高橋","group":2},
    {"name":"松田","group":3},
    {"name":"川下","group":1},
    {"name":"川上","group":2},
    {"name":"福岡","group":1},
    {"name":"別府","group":3},
    {"name":"原","group":1},
    {"name":"å³°","group":1},
    {"name":"上島","group":2},
    {"name":"岡崎","group":2},
    {"name":"本田","group":3}
],
        "links":[
    {"source":1,"target":0,"value":1},
    {"source":2,"target":0,"value":1},
    {"source":3,"target":0,"value":1},
    {"source":4,"target":0,"value":1},
    {"source":5,"target":0,"value":1},
    {"source":6,"target":0,"value":1},
    {"source":7,"target":0,"value":1},
    {"source":8,"target":0,"value":1},
    {"source":9,"target":0,"value":1},
    {"source":10,"target":0,"value":1},
    {"source":11,"target":0,"value":1},
    {"source":12,"target":0,"value":1},
    {"source":7,"target":3,"value":1},
    {"source":8,"target":5,"value":1},
    {"source":9,"target":6,"value":1},
    {"source":10,"target":1,"value":1},
    {"source":11,"target":7,"value":1},
    {"source":12,"target":6,"value":1}
]
}
</script>