SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

03
--
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

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

    前回は日経平均株価データ (CSVファイル) を読み込んで、始値・高値・安値・終値のそれぞれを色を変えながら折れ線グラフで描画する JavaScript プログラムを作成しました。しかし、分かりやすさを優先させたため、やってることの単純さに比べてプログラムが長く (134 行) なってしまいました。そこで今回は、前回のプログラムを改良することにします。

    具体的には、前回は始値・高値・安値・終値のそれぞれについて、折れ線グラフを描画するプログラムを書いていました。しかし、これらはほぼ同じプログラムの繰り返しになっていました。そこで、繰り返しになっていた部分は 1 つの関数に纏めて、始値・高値・安値・終値のそれぞれの描画に必要な差分を引数で渡すことにします。

    作成したプログラムを下記に示します。35 行目以降が、今回作成した関数になります。出力は前回と同じですが、こうして繰り返しの部分を 1 つの関数に纏めることで、プログラムの長さは 99 行まで短縮することができました。

    // 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 drawLine(i){
        var line = d3.svg.line()
          .x(function(d,i){
            var tmp = new Date(d["日付"]);
            return time_scale(tmp);
          })
          .y(function(d){
            return y_scale(d[label[i]]);      
          });
    
          svg.append("path")
          .attr("d", line(dataSet))
          .style("stroke", labelColor[i])
          .style("fill", "none");      
      };
      
      // 始値、高値、安値、終値のそれぞれについて折れ線グラフを生成
      for (var i=0 ; i<4 ; i++){
        drawLine(i);
      };
    
      // 凡例を作成  
      svg.selectAll("text")
        .data(label)
        .enter()
        .append("text")
        .text(function(d){
          return d;
        })
        .style("fill", function(d,i){
          return labelColor[i];
        })
        .attr("x", width - 40)
        .attr("y", function(d, i){
          return 20*(i+1);
        });
    
      // 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")
        );
    });
    
    
     
    このエントリーをはてなブックマークに追加
    | D3.js | 21:02 | comments(0) | - | - |
    スポンサーリンク