LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

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

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
D3.js v4 によるパイチャートの描画 (2)
0

    前回は、d3.arc() メソッドを使ったパイチャートの作成方法について説明しました (D3.js v4 によるパイチャートの描画 (1)) 。ただ、前回は簡単のためにアークの開始角度を固定していました。そこで今回は、アークの開始角度と終了角度の両方をデータにあわせて設定できるようにして、より現実的なパイチャートにしてみましょう。

     

    せっかくなので、前回と同様にパイチャートと数字が変化するようにしてみました。ただ、今回はアークの数が複数になっているので、変化前の状態を保持しておくために each() メソッドを使ってデータを保持しておくようにしています (55行目など) 。

     

    JavaScriptのソースコードを確認するには、下記の "JavaScript" タブをクリックして下さい。

     

     

     

    過去の関連記事

    D3 v4 によるパイチャートの描画 (1)

    D3による円グラフの描画

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | グラフ作成 | 20:02 | comments(0) | - | - |
    D3.js v4 によるパイチャートの描画 (1)
    0

      以前、このブログで「D3.jsによるパイチャートの描画」という記事を書きました。ところが D3 の v4 へのバージョンアップに伴って、d3.svg.arc() が d3.arc() に変更されたため、以前のコードのままでは v4 でパイチャートを描画できなくなってしまいました。そこで、あらためて D3 v4 を使ってパイチャートを描画してみます。

       

      ただ、前回と同じものを作っても面白くないので、ちょっとだけインタラクティブに動くグラフを作ってみました。

       

      今回のポイントは以下の 3つです。

       

      • d3.arc() によるアークの設定 (20~23行目)
      • attrTween() によるアークの連続的な変化 (66~72行目)
      • tween() によるテキスト表示内容の変化 (56~62行目)

       

      それでは順番に見ていきます (下記のJavaScriptタグやHTMLタグをクリックすると、それぞれの中身が表示されます)。

       

      1. d3.arc() によるアークの設定

      d3.arc() は、円弧の形のPath要素を生成するための関数を生成します。そこに outerRadius(), innerRadius() メソッドによって、それぞれ円弧の外側の半径と内側の半径を指定します。さらに、今回は円弧の開始角度を常に 0度 (時計の12時の位置) に設定するため、startAngle() メソッドで開始角度を指定しています。ウェブブラウザの JavaScriptコンソール上で toString.call(arc) として変数 arc の型を確認すると、関数型になっていることが分かると思います。

       

      2. attrTween() によるアークの連続的な変化

      これまで作成したアニメーションは、円の半径のようなSVG要素の基本的な属性を変更するもので、transition(), duration() などのメソッドで簡単にアニメーションとして表示することができました。ところが今回は円弧のPath要素を連続的に変化させる必要があります。そんなときに使うのが attrTween() メソッドです。

      55行目以降で定義しているgrapUpdate関数が最初に呼び出されたとき、66行目の attrTween() の第1引数 "d" は、31行目でバインドした変数 {endAngle: 2*Math.PI} です。このため、67行目の interpolate() の第1引数は d.endAngle、つまり 2*Math.PI になっています。ちなみに interpolate() メソッドは第1引数と第2引数の間を内挿 (interpolate) するための関数です。

      69行目では、この interpolate() を使って、更新前の角度と更新後の角度の間を連続的にスイープさせて d.endAngle に設定しています。つまり、68行目から71行目全体で、角度を連続的に変更させたPath要素が次々と生成されているわけです。

       

      3. tween() によるテキスト表示内容の変化

      これはパイチャートのアニメーション化に必要というわけではありませんが、せっかくなので使ってみました。

      インタラクティブなデータの可視化をする際、しばしばテキストの表示内容も連続的に変更させたくなることがあります。そのような場合には tween() メソッドが役に立ちます。やっていることは基本的には attrTween() でやったことと同じです。まず interpolate() メソッドで、ある値と別の値を内挿するための関数を作成して (58行目)、それを使って連続的に変化するテキストを生成している (69~61行目) というわけです。

       

       

       

      JUGEMテーマ:JavaScript

      このエントリーをはてなブックマークに追加
      | グラフ作成 | 14:10 | comments(0) | - | - |
      スケールやticksの設定値によるx軸の変化を確認する
      0

        D3.js の醍醐味は、なんといってもブラウザ上でダイナミックに動くグラフの作成ができることです。このブログでも、いよいよD3.jsを使って動きのある、さまざまな "魅せる" データ可視化手法を紹介していく予定です。でもその前に、ちょっとした腕ならしとして、まずはスケールやticksの設定によって軸の描画がどのように変化するかを確認しておきましょう。

         

        せっかくなので、プルダウンメニューからインタラクティブに値を設定できるようにしてみましょう。

         

        プログラムの28行目までは、これまでと同じように x軸を描画しています。そのうえで、30~31行目ではスケールとticksそれぞれのプルダウンメニューのDOMを取得しています。DOMの指定は、HTMLファイルでタグ内にあらかじめ埋め込んでおいたIDを指定することで実現しています。

         

        35~42行目では、それぞれのプルダウンメニューが変更されたときのコールバック関数です。それぞれのコールバック関数によって、プルダウンメニューで選択された値を取得して、x軸の描画をアップデートするための関数 updateAxis を呼び出しています。

         

        updateAxis関数の内容は45行目以降です。ここでは、x軸のスケールとticksを新たに取得した値で更新したうえで、55行目以降で表示中のx軸を更新しています。ここでは、更新の様子を分かりやすく見るために、  duration(1000) とすることで1秒 (=1000ミリ秒) かけてx軸の表示を更新しています。

         

         

        ここまでで準備は整いました。いよいよ次回からは、これまでに作成した折れ線グラフやIrisデータセットの散布図がインタラクティブに動くようにするにはどうすれば良いか、順を追って見ていくことにします。

         

        JUGEMテーマ:JavaScript

        このエントリーをはてなブックマークに追加
        | グラフ作成 | 20:45 | comments(0) | - | - |
        【D3.js】CSVからデータを読み込んで散布図を作成する
        0

          データを可視化するうえで、ファイルからデータを読み込んでグラフにするという処理は基本中の基本です。今回は、一般的によく用いられるカンマ区切りのCSVデータファイルからデータを読み込んで、散布図を表示するプログラムを作成してみましょう。

           

          せっかくなので、機械学習の練習によく使われる Iris データセットを使ってみましょう。D3.js でCSVデータを読み込むときには、 d3.csv というメソッドを使います。このメソッドの入力引数として、読み込むCSVファイル名を指定します。入力引数には、外部サイトのCSVファイルのURLを指定することもできるので、今回は統計処理ソフト R のデータセットレポジトリで公開されているIrisdataセットのURLを使用してみました。

           

          14行目では、D3.js で用意されている基本10色を呼び出しています。以前の記事にも書きましたが、基本10色の呼び出し方が以前の Ver.3 と 現行の Ver.4 では異なっているので注意が必要です。なお、Ver.4 では基本10色を使うには d3-scale-chromatic.v1.min.js を呼び出す必要がありますので、この点も注意が必要です。

           

          そしていよいよ、18行目から23行目の部分で、IrisデータセットをCSVから読み込んで変数 dataSet として保存しています。25行目から50行目までは、前回やった x,y 軸の描画ですね。その後、53行目以降ではIrisデータセットから散布図を作成しています。なお、Irisデータセットは4個の連続変数 (説明変数) と1個のカテゴリー変数 (目的変数) から成る、合計 150個のデータで構成されていますが、今回はそのうち最初の2個の変数をx,y平面上でプロットしました。また、データ点の色は目的変数に対応しています。

           

          JUGEMテーマ:JavaScript

          このエントリーをはてなブックマークに追加
          | グラフ作成 | 23:45 | comments(0) | - | - |
          【D3.js】Ver.4での折れ線グラフの作成・その1
          0

            バージョンアップしたD3.jsを使って、さっそく折れ線グラフを作成してみます。前回お話したように、バージョンアップによって、 d3.scale.linear() d3.scaleLinear() に変わったことに注意して下さい。また、軸の目盛りの表示位置を指定するためのメソッドとして、 d3.axisBottom() , d3.axisTop() , d3.axisRight() , d3.axisLeft() の4つが新たに導入されています。

            それでは、これらを使って基本的な折れ線グラフを作成してみましょう。なお、27行目や33行目に出てくる .nice() というメソッドは、スケールの両端の数値を、なるべくキリの良い数字になるように、"いい感じ (nice) " に丸めてくれるメソッドです。

             

             

            JUGEMテーマ:JavaScript

            このエントリーをはてなブックマークに追加
            | グラフ作成 | 22:29 | comments(0) | - | - |
            グラフにグリッド線を追加する
            0
              D3.js でグリッド線を追加する方法はいくつかありますが、今回はいちばん簡単な方法を紹介します。

              それでは前回作成したグラフにグリッド線を追加してみましょう。まず、html ファイルの <style>〜</style> タグ内 (CSS) に以下を追加します。

                .tick line{
                  opacity: 0.2;
                }

              次に、軸の目盛り線の長さを指定する innerTickSize() メソッドでマイナスの値を指定して、目盛り線をグラフの内側に伸ばしてしまいます。内側に伸ばす線の長さをグラフのサイズにすることで、グラフのグリッド線にしてしまうというわけです。

              軸の描画とグリッド線の描画を分けることで、軸の目盛り用に表示する数値の数とグリッド線の数とを個別に指定することもできます。今回の例では、Y軸に対して軸の描画 (54行目〜63行目) とグリッド線の描画 (66行目〜74行目) を個別に指定しています。

              軸の目盛り用に表示する数値の数とグリッド線の数とが一致する場合には、軸の描画とグリッド線の描画を同時にすることができます。今回の例では、X軸に対してこれらを同時に実行しています (78行目〜88行目)。

              サンプルページ



              var dataSet = [];
              
              // X,Y軸を表示できるようにグラフの周囲にマージンを確保する
              var margin = {top: 40, right: 40, bottom: 40, left: 100};
              var width = 800 - margin.left - margin.right;
              var height = 500 - margin.top - margin.bottom;
              
              d3.csv("./js/WorldPopulation.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 + ")");
                  
                // スケール関数を作成。
                var xScale = d3.scale.linear()
                  .domain([1000,2200])
                  .range([0,width]);
              
                var yScale = d3.scale.log()
                  .domain([0.1,10])
                  .range([height,0]);
              
                var line = d3.svg.line()
                  .x(function(d,i){
                    return xScale(d.Year);
                  })
                  .y(function(d,i){
                    return yScale(d.Population);      
                  });
              
                // 折れ線グラフを生成
                svg.append("path")
                  .attr("class", "line")
                  .attr("d", line(dataSet));
                  
                // 散布図を描画
                svg.selectAll("circle")
                  .data(dataSet)
                  .enter()
                  .append("circle")
                  .attr("r", 5)
                  .attr("cx", function(d){
                    return xScale(d.Year);
                  })
                  .attr("cy", function(d){
                    return yScale(d.Population);
                  })
                  .attr("fill","orange");
              
                // Y軸を描画
                svg.append("g")
                  .attr("class", "axis")
                  .call(d3.svg
                    .axis()
                    .scale(yScale)
                    .orient("left")
                    .tickValues([0.1,0.2,0.4,0.6,0.8,1,2,4,6,8,10])
                    .tickPadding(10) // 軸と数値の間のスペースを指定
                    .tickFormat(d3.format(".1f"))
                );
                
                // Y軸のグリッドを描画
                svg.append("g")
                  .attr("class", "axis")
                  .call(d3.svg
                    .axis()
                    .scale(yScale)
                    .orient("left")
                    .innerTickSize(-width)
                    .tickFormat("")
                );
              
                
                // X軸を描画
                svg.append("g")
                  .attr("class", "axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(d3.svg
                    .axis()
                    .scale(xScale)
                    .orient("bottom")
                    .innerTickSize(-height) // X軸のグリッドを描画
                    .tickPadding(10) // 軸と数値の間のスペースを指定
                    .tickFormat(function(d){return d;})
                );
                
                // 凡例
                svg.append("g")
                  .attr("class", "axis")
                  .append("text")
                  .attr("x", -40)
                  .attr("y", -20)
                  .text("[単位: 10億人]");
              
                svg.append("g")
                  .attr("class", "axis")
                  .append("text")
                  .attr("x", width/2)
                  .attr("y", margin.top + height)
                  .text("Year");
              
              })
              
              


               
              このエントリーをはてなブックマークに追加
              | グラフ作成 | 11:08 | comments(0) | - | - |
              世界の総人口の推移を片対数グラフで描画する
              0
                JUGEMテーマ:JavaScript

                急速に増加するようなデータを可視化するには、対数グラフが便利です。今回は D3.js で片対数グラフを作成する方法を紹介します。

                一例として、国連 (United Nations) による世界の総人口の推計値データをグラフ化してみました。まず、データをCSV形式で保存します。

                Year,Population
                1000,0.31
                1250,0.4
                1500,0.5
                1750,0.79
                1800,0.98
                ・・・

                このCSVファイルを読み込んで、片対数グラフで表示するプログラムを作成します。CSVファイルを読み込んでグラフ化する基本的な方法については、過去の記事 (D3.js を使ったCSVファイルの読み込み) を参照して下さい。

                片対数グラフを作成するには、これまで使ってきた線形 (linear) のスケール関数 d3.scale.linear() の代わりに、対数 (log) のスケール関数 d3.scale.log() を使います。それでは具体的な作成例とプログラムを見てみましょう。

                サンプルページ



                対数のスケール関数は、22行目から24行目で作成しています。これだけでも片対数グラフを作成できるのですが、より見やすくするために、いくつか手を入れることにしました。まず、Y軸の目盛りの数字をすべて表示すると数字が重なって見にくくなるため、60行目で ticsValues() メソッドを使って表示する目盛りの数値を指定しています。また、61行目で ticsFormat() メソッドを使って、目盛りの数値を小数点以下1桁で表示するように指定しました。

                var dataSet = [];
                
                // X,Y軸を表示できるようにグラフの周囲にマージンを確保する
                var margin = {top: 40, right: 40, bottom: 40, left: 100};
                var width = 800 - margin.left - margin.right;
                var height = 500 - margin.top - margin.bottom;
                
                d3.csv("./js/WorldPopulation.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 + ")");
                    
                  // スケール関数を作成。
                  var xScale = d3.scale.linear()
                    .domain([1000,2200])
                    .range([0,width]);
                
                  var yScale = d3.scale.log()
                    .domain([0.1,10])
                    .range([height,0]);
                
                  var line = d3.svg.line()
                    .x(function(d,i){
                      return xScale(d.Year);
                    })
                    .y(function(d,i){
                      return yScale(d.Population);      
                    });
                
                  // 折れ線グラフを生成
                  svg.append("path")
                    .attr("class", "line")
                    .attr("d", line(dataSet));
                    
                  // 散布図を描画
                  svg.selectAll("circle")
                    .data(dataSet)
                    .enter()
                    .append("circle")
                    .attr("r", 5)
                    .attr("cx", function(d){
                      return xScale(d.Year);
                    })
                    .attr("cy", function(d){
                      return yScale(d.Population);
                    })
                    .attr("fill","orange");
                
                  // Y軸を描画
                  svg.append("g")
                    .attr("class", "axis")
                    .call(d3.svg
                      .axis()
                      .scale(yScale)
                      .orient("left")
                      .tickValues([0.1,0.2,0.4,0.6,0.8,1,2,4,8,10])
                      .tickFormat(d3.format(".1f"))
                  );
                  
                  // X軸を描画
                  svg.append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(d3.svg
                      .axis()
                      .scale(xScale)
                      .orient("bottom")
                      .tickFormat(function(d){return d;})
                  );
                  
                  // 凡例
                  svg.append("g")
                    .attr("class", "axis")
                    .append("text")
                    .attr("x", 20)
                    .attr("y", 20)
                    .text("[単位: 10億人]");
                
                  svg.append("g")
                    .attr("class", "axis")
                    .append("text")
                    .attr("x", width/2)
                    .attr("y", margin.top + height)
                    .text("Year");
                
                })
                
                


                 
                このエントリーをはてなブックマークに追加
                | グラフ作成 | 09:51 | comments(0) | - | - |
                【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")
                      );
                  });
                  
                  
                   
                  このエントリーをはてなブックマークに追加
                  | グラフ作成 | 21:02 | comments(0) | - | - |
                  【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")
                        );
                    });
                    
                    
                     
                    このエントリーをはてなブックマークに追加
                    | グラフ作成 | 22:32 | comments(0) | - | - |
                    【D3.js】 折れ線グラフの作成
                    0
                      JUGEMテーマ:JavaScript

                      D3.js によるデータ可視化について紹介しているこのブログですが、そういえばまだ折れ線グラフの作例を紹介していませんでした。せっかくなので、これまで取り上げたいろいろなメソッドを織り交ぜながら、日経平均株価のデータを例に折れ線グラフを作成してみましょう。

                      まずは日経平均株価のデータをもとに、CSVファイルを準備します。今回は次のようなCSVファイルを読み込んだうえで、終値の変化を折れ線グラフで表示するプログラムを作成します。

                      ■nikkei.csv
                      日付,始値,高値,安値,終値
                      2016/2/1,17699.60,17905.37,17666.48,17865.23
                      2016/2/2,17716.52,17864.70,17684.66,17750.68
                      ・・・・
                      2016/2/25,15983.47,16218.29,15953.93,16140.34

                      サンプルページ


                       
                      // 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 = 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("class", "line")
                          .attr("d", line(dataSet));
                        
                        // 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")
                          );
                      });
                      
                      


                       
                      このエントリーをはてなブックマークに追加
                      | グラフ作成 | 00:14 | comments(0) | - | - |