LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

08
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< 【D3.js】 折れ線グラフの作成・その3 | main | 【D3.js】2つの色を補完する (interpolateLabメソッド) >>
【D3.js】 ローソク足チャートの作成
0
    JUGEMテーマ:JavaScript

    前回まで、3回に分けて D3.js による折れ線グラフの作成方法を紹介してきました。その際に 2 月の日経平均株価データ (日毎の始値・高値・安値・終値データを含むCSVファイル) を読み込んで折れ線グラフを作成していましたが、せっかくなので D3.js を使ってローソク足チャートを作成してみました。

    ローソク足チャート(ローソクチャートとも言う)は、株価の変動をビジュアル化する方法の一つです。ローソク足チャートでは、日毎の始値と終値を長方形で示し、その上と下にその日の高値と終値を線で示します。始値と比べて終値が高いかどうか (=株価が上がったかどうか) によって長方形の色を変えて表示することで、株価の変動が一目で把握できる仕組みになっています。

    ローソク足チャートを描くには TechanJS という財務関係の描画に特化した JavaScript ライブラリを使う方法もありますが、ローソク足チャートを作画する程度なら D3.js で作ってしまったほうが手っ取り早いです。今回は、終値が始値よりも高い場合は青色で、低い場合は赤色で、それぞれ日毎のローソク足チャートを描画するようにしてみました。

    サンプルページ

    // X,Y軸を表示できるようにグラフの周囲にマージンを確保する
    var margin = {top: 40, right: 80, bottom: 80, left: 80};
    var width = 800 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
     
    // CSVファイルの読み込み
    d3.csv("./js/nikkei.csv", function(error, dataSet){
    
      // SVGの表示領域を生成
      var svg = d3.select("#MyGraph")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
        
      // 読み込んだCSVデータから時間軸の両端を抽出
      var n = dataSet.length;
      time_start = new Date(dataSet[0]["日付"]);
      time_end = new Date(dataSet[n-1]["日付"]);
      
      // 時間軸のスケール関数を生成
      var time_scale = d3.time.scale()
        .domain([time_start, time_end])
        .range([0, width]);
      
      // 縦軸のスケール関数を生成
      var y_scale = d3.scale.linear()
        .domain([14000,18000])
        .range([height, 0]);
    
      // 描画するデータと色を指定
      var label = ["始値", "高値", "安値", "終値"];
      var labelColor = ["red", "blue", "purple", "orange"];    
      
      // ローソク足チャートを作成する関数
      function box(vHajimene, vTakane, vYasune, vOwarine, date){
          // 各ローソクの幅
          var w = 15;
          svg.append("rect")
            .attr("x", time_scale(date) - w/2)
            .attr("y", function(){
              if (vHajimene < vOwarine) return y_scale(vOwarine);
              else return y_scale(vHajimene);
            })
            .attr("width", w)
            .attr("height", function(){
              return Math.abs(y_scale(vHajimene) - y_scale(vOwarine));
            })
            // 始値<終値なら青色、始値>終値なら赤色
            .style("fill", function(){
              if (vHajimene < vOwarine) return "blue";
              else return "red";
            });
            
          // 高値を示す横線を描画
          svg.append("line")
            .attr("x1", time_scale(date) - w/2)
            .attr("y1", y_scale(vTakane))
            .attr("x2", time_scale(date) + w/2)
            .attr("y2", y_scale(vTakane))
            .style("stroke", "black");
          // 安値を示す横線を描画
          svg.append("line")
            .attr("x1", time_scale(date) - w/2)
            .attr("y1", y_scale(vYasune))
            .attr("x2", time_scale(date) + w/2)
            .attr("y2", y_scale(vYasune))
            .style("stroke", "black");
          // 高値と安値を結ぶ縦線を描画
          svg.append("line")
            .attr("x1", time_scale(date))
            .attr("y1", y_scale(vTakane))
            .attr("x2", time_scale(date))
            .attr("y2", y_scale(vYasune))
            .style("stroke", "black");
      };
      
      // 日毎のデータをもとにローソク足チャートを描画
      for(var i = 0; i < n-1; i++){
        time = new Date(dataSet[i]["日付"]);
        box(dataSet[i]["始値"],dataSet[i]["高値"],dataSet[i]["安値"],dataSet[i]["終値"],time);
      };
    
      // X軸を描画
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.svg
          .axis()
          .scale(time_scale)
          .orient("bottom")
          .tickFormat(function(d,i){
            var fmtFunc = d3.time.format("%b-%d");
            return fmtFunc(d);
          })
        )
        .selectAll("text")
        .attr("transform", "rotate(45)")
        .attr("dy", 10)
        .attr("dx", 10)
        .style("text-anchor", "start");
      
      // Y軸を描画
      svg.append("g")
        .attr("class", "axis")
        .call(d3.svg.axis()
          .scale(y_scale)
          .orient("left")
        );
    });
    


     
    このエントリーをはてなブックマークに追加
    | 応用 | 10:09 | comments(0) | - | - |
    スポンサーリンク