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】 折れ線グラフの作成 | main | 【D3.js】 折れ線グラフの作成・その3 >>
【D3.js】 折れ線グラフの作成・その2
0
    JUGEMテーマ:JavaScript

    前回は日経平均株価データ (CSVファイル) のうち、終値の変化だけを折れ線グラフで描画してみました。でも前回読み込んだ CSV ファイルには終値だけではなく、始値・高値・安値のデータも含まれています。そこで今回は、せっかくなのでこれら4つのデータ (始値・高値・安値・終値) のそれぞれを、色を変えながら折れ線グラフで描画してみました。

    サンプルページ


     
    // 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 line_1 = d3.svg.line()
        .x(function(d,i){
          var tmp = new Date(d["日付"]);
          return time_scale(tmp);
        })
        .y(function(d,i){
          return y_scale(d["始値"]);      
        });
    
      var line_2 = d3.svg.line()
        .x(function(d,i){
          var tmp = new Date(d["日付"]);
          return time_scale(tmp);
        })
        .y(function(d,i){
          return y_scale(d["高値"]);      
        });
    
      var line_3 = d3.svg.line()
        .x(function(d,i){
          var tmp = new Date(d["日付"]);
          return time_scale(tmp);
        })
        .y(function(d,i){
          return y_scale(d["安値"]);      
        });
    
      var line_4 = d3.svg.line()
        .x(function(d,i){
          var tmp = new Date(d["日付"]);
          return time_scale(tmp);
        })
        .y(function(d,i){
          return y_scale(d["終値"]);      
        });
        
      // 折れ線グラフを生成
      svg.append("path")
        .attr("d", line_1(dataSet))
        .style("stroke", "red")
        .style("fill", "none");
    
      svg.append("path")
        .attr("d", line_2(dataSet))
        .style("stroke", "blue")
        .style("fill", "none");
    
      svg.append("path")
        .attr("d", line_3(dataSet))
        .style("stroke", "purple")
        .style("fill", "none");
    
      svg.append("path")
        .attr("d", line_4(dataSet))
        .style("stroke", "orange")
        .style("fill", "none");
    
      // 凡例を作成  
      var label = ["始値", "高値", "安値", "終値"];
      var labelColor = ["red", "blue", "purple", "orange"];
    
      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 | 22:32 | comments(0) | - | - |
    スポンサーリンク