SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

07
--
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
スケールや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) | - | - |
        【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) | - | - |
              D3.jsによる円グラフの描画
              0
                JUGEMテーマ:JavaScript

                今回はD3.jsを使って円グラフを作成してみます。

                まずはサンプルデータとして、5つの要素を持つ配列 dataSet = [40, 30, 15, 10, 5] をもとに円グラフを作成してみましょう。ここでは簡単のために配列内の要素の合計が100になるように設定しました。また、要素の値が降順となるように並べています。

                ■sample.js
                var dataSet = [40, 30, 15, 10, 5];
                
                // D3.jsが用意する標準10色
                var color = d3.scale.category10();
                
                // SVGの表示領域を生成
                var svg = d3.select("#MyGraph");
                
                // 円グラフを生成
                var pie = d3.layout.pie()
                    .value(function(d){ return d; });
                
                // 円グラフのサイズを指定
                var arc = d3.svg.arc().innerRadius(0).outerRadius(100);
                
                // 円グラフを描画
                svg.selectAll("path")
                    .data(pie(dataSet))
                    .enter()
                    .append("path")
                    .attr("d", arc)
                    .attr("stroke", "white")
                    .attr("transform", "translate(" + 150 + ", " + 150 + ")")
                    .style("fill", function(d,i){
                      return color(i);
                    })
                

                D3.jsではメソッドチェーンを使って次々とSVG要素を足していきます。このため作成する図が複雑になればなるほど、どんどんプログラムが長くなってしまいます。このため、分かりやすいように区切って作成してみました。

                まず4行目は、D3.jsが用意する標準10色のカラーパレットです。ちなみにD3.jsにはこれ以外にも標準20色のカラーパレット3種類 (d3.scale.category20(), d3.scale.category20b(), d3.scale.category20c()) が用意されています。

                次に10〜11行目ではd3.layout.pie()メソッドを使って、サンプルデータから円グラフ用のデータ (正確にはパイチャート用のデータなのですが、これについては後の記事で説明します) を生成しています。また、14行目ではd3.svg.arc()メソッドを使って、作成する円グラフのサイズ (この例では半径100px) を指定しています。そして最後に、これらのメソッドによって生成された中間データを使って、17行目以降で円グラフを作成しています。

                なお、今回は簡単のためにデータの配列として要素の合計が100となるようにしましたが、100にならない場合でもD3.jsがパーセンテージを自動的に計算して円グラフを生成してくれます。ただ、配列の要素が降順に並んでいない場合、D3.jsは親切にも (というよりお節介にも…?) 配列の要素を降順に並べ替えたうえで円グラフを生成するので、若干の注意が必要です。

                次回はパイチャートを作成しながら、d3.svg.arc()メソッドについてより詳しく見てゆきましょう!

                 
                このエントリーをはてなブックマークに追加
                | グラフ作成 | 21:51 | comments(0) | - | - |
                D3.jsによる折れ線グラフの描画
                0
                  JUGEMテーマ:JavaScript

                  今回は折れ線グラフを作ってみます。

                  このブログではこれまで棒グラフを作ってきましたが、なかには「グラフの基本は折れ線グラフなのに、なんで棒グラフから始めるんだう?」と疑問に思ったかたがおられるかもしれません。その理由は、今回折れ線グラフを作っていくなかで分かってくると思いますが、一言でいうと「棒グラフのほうが簡単!」だからです。

                  折れ線グラフを作るには、データの (x,y) 座標を線で結ぶ必要があります。SVGで線を描画するにはpathという要素を使うのですが、このpath要素の指定の仕方が、かなりのクセモノなんです。

                  例えば今回のサンプルプログラムでは、(x,y)=(0,30), (100,100), (200,80), (300,150) という4点を赤色の線で結ぶ折れ線グラフを作成しますが、これをSVGのpath要素として生成するには、

                  <path d="M50,170L150,100L250,120L350,50" stroke="red" stroke-width="2" fill="none"></path>

                  という、まるで暗号のような要素を生成しなければなりません。

                  でもご安心を。D3.jsには (x,y) データをもとにSVGのpath要素を生成するメソッドが、ちゃんと用意されています。今回はこのメソッドについて見てゆきましょう。

                  まずはサンプルプログラムを示します。

                  ■sample.js
                  // テストデータ
                  var testData = [
                    {"x":0, "y":30},
                    {"x":100, "y":100},
                    {"x":200, "y":80},
                    {"x":300, "y":150}];
                  
                  // 折れ線グラフの描画  
                  var line = d3.svg.line()
                    .x(function(d){return 50+d.x;})
                    .y(function(d){return 200-d.y;});
                  
                  d3.select("#MyGraph")
                    .append("path")
                    .attr("d",line(testData))
                    .attr("stroke","red")
                    .attr("stroke-width",2)
                    .attr("fill","none");
                  
                  // x軸とy軸の作成
                  var xScale = d3.scale.linear()
                    .domain([0, 300])
                    .range([0, 300]);
                  
                  var yScale = d3.scale.linear()
                    .domain([0, 160])
                    .range([160, 0]);
                  
                  d3.select("#MyGraph")
                    .append("g")
                    .attr("class", "axis")
                    .attr("transform","translate(50,200)")
                    .call(d3.svg.axis()
                      .scale(xScale)
                      .orient("bottom")
                    );
                  
                  d3.select("#MyGraph")
                    .append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(50,40)")
                    .call(d3.svg.axis()
                      .scale(yScale)
                      .orient("left")
                    );
                  

                  今回のポイントは、9行目から18行目の部分です。順を追って見てゆくことにしましょう。

                  まず9行目こそが今回の主役、d3.svg.line()メソッドです。このメソッドこそ、その後ろのx()およびy()メソッドで指定された (x,y) 座標の数値から、先の暗号のようなパス情報を生成してくれる、ありがたいメソッドなのです。今回のx()メソッドでは、単純にデータのx座標を指定するのではなく、50だけ右にシフトさせた値を指定しています。これは、後からグラフの左側にy軸を生成するためのスペースを確保するためです。次の11行目では、y()メソッドで200からデータのy座標を引いた値を指定していることに注意してください。これは、SVG画像のx,y座標系では、画像のいちばん上がゼロになっていて下にいくほどyの値が増加するような座標系になっているためです。そこで、SVG画像の上辺から200だけ下に行ったところを「折れ線グラフのy=0」として、そこからデータのy座標値分だけ上にデータの点を指定しているのです。

                  d3.svg.line()メソッドの動作は、ウェブブラウザのデベロッパーツールを使うとよく分かります。デベロッパーツールのJavaScriptコンソールで、2行目から18行目までを入力してみましょう。次に、コンソール上でline(testData)と入力してください。すると、次のような出力が得られます。

                  "M50,170L150,100L250,120L350,50"

                  つまりd3.svg.line()メソッドは、(x,y)データ系列をもとに、path要素の例の "暗号部分" (?) を生成してくれているのです。こうして生成したpathメソッドで折れ線を生成しているのが13行目から18行目です。

                  21行目以降はx軸とy軸を作成しています。ここでy軸のスケールの指定が、数値[0, 160] をSVG画像上における座標系で [160, 0] の範囲にマッピングしている点に注意してください。ちなみに、x軸はorient()メソッドの引数を"bottom"と指定すれば良く (35行目)、y軸は"left"と指定してください (44行目)。

                  次回は円グラフを作成してみましょう!
                   
                  このエントリーをはてなブックマークに追加
                  | グラフ作成 | 22:48 | comments(0) | - | - |
                  棒グラフに数値を表示させる
                  0
                    JUGEMテーマ:JavaScript

                    SVGでは円や四角形だけでなく、テキストも図の構成要素として扱うことができます。そこで今回は、これまでに作成した棒グラフにデータを数値として表示させることにしましょう。

                    ■sample.js
                    // テストデータ
                    var testData = [30, 100, 320, 150];
                    
                    // 棒グラフを作成
                    d3.select("#MyGraph")
                      .selectAll("rect")
                      .data(testData)
                      .enter()
                      .append("rect")
                      .attr("x", 10)
                      .attr("y", function(d,i){
                        return i*25;
                      })
                      .style("fill", "blue")
                      .attr("height", "20px")
                      .attr("width", function(d,i){
                        return d+"px";
                      });
                    
                    // 棒グラフの右隣に数値を表示
                    d3.select("#MyGraph")
                      .selectAll("text")
                      .data(testData)
                      .enter()
                      .append("text")
                      .attr("x", function(d,i){
                        return d+15;
                      })
                      .attr("y", function(d,i){
                        return i*25+15;
                      })
                      .text(function(d,i){
                        return d;
                      });
                    
                    // 軸を作成
                    var xScale = d3.scale.linear()
                      .domain([0, 350])
                      .range([0, 350]);
                     
                    d3.select("#MyGraph")
                      .append("g")
                      .attr("class", "axis")
                      .attr("transform", "translate(10, "+((1+testData.length)*20+5)+")")
                      .call(d3.svg.axis()
                        .scale(xScale)
                        .orient("bottom")
                      )
                    

                    そろそろプログラムも長くなってきたので、分かりやすくするためにプログラムを適度に区切って、コメントを加えました。まず1行目から18行目までは、以前解説した棒グラフを作成する部分ですね。36行目から47行目は軸を作成するためのプログラムです。ここまでは、これまでのおさらいです。

                    今回追加した部分は、20行目から34行目の部分です。それでは順番に見てゆきましょう。

                    まず21行目は、ID名「MyGraph」のSVG要素を選択するという、おなじみの1行ですね。つづく22行目は、selectAll()メソッドを使って、後から追加するtext要素をセレクトしています。つづいてテストデータを読み込んだうえで、25行目でappend()メソッドを使ってテキスト要素をSVGに追加しています。

                    今回のポイントは26行目から34行目、テキストの表示位置と表示内容を決める部分です。まず26行目から28行目では、テキストが各棒グラフの右側に表示されるように、x座標を棒の長さ+15 pxの位置としています。続く29行目から31行目では、各棒グラフの高さ分づつ表示位置がずれるようにy座標を決めています。最後に32行目から34行目の部分で、配列testDataのそれぞれの要素をテキストとして表示しています。

                    D3.jsの入門として、棒グラフを作りながらいろいろと勉強してきました。次回はいよいよ、他のタイプのグラフも作ってみることにしましょう!
                     
                    このエントリーをはてなブックマークに追加
                    | グラフ作成 | 21:21 | comments(0) | - | - |
                    棒グラフを描く 【その2】
                    0
                      JUGEMテーマ:JavaScript

                      それでは、前回作成した棒グラフに横軸を追加してゆきます。D3.jsにはグラフの軸を描画するためのメソッドが用意されています。今回はこれを使って、グラフに横軸を追加することにします。

                      まずは準備として、sample.htmlファイルに軸のスタイルを指定しておきます。<style></style>タグで囲まれた範囲が、今回新たに追加した部分になります。

                      ■sample.html
                      <!DOCTYPE html>
                      <html>
                      <head>
                      <meta charset="utf-8">
                      <style>
                      svg {
                      width: 400px;
                      height: 240px;
                      }
                      .axis text{
                      font-family: sans-serif;
                      font-size: 18px;
                      }
                      .axis path,
                      .axis line{
                      fill: none;
                      stroke: black;
                      }
                      </style>
                      <script type="text/javascript" src="js/d3.js"></script>
                      </head>
                      <body>
                      <svg id="MyGraph"></svg>
                      <script src="js/sample.js"></script>
                      </body>
                      </html>
                      
                      次にsample.jsファイルを開いて軸を追加しましょう。今回は手始めにいちばんシンプルなリニアスケールの軸を作成します (logスケールの軸については今後説明します) 。リニアスケールの軸は、d3.scale.linear()メソッドで生成することができます。次に、この軸のスケール (縮尺) を決めます。今回はデータの値が最大で320ですので、0から350までの長さの軸を作成してみましょう。まず、domain()で元データの範囲を指定します。次に、range()で表示範囲を指定します。今回の場合は、データの数値をそのまま棒グラフの長さ (ピクセル値) にしているため、どちらも0から350までに指定しています。

                      最後にhtmlファイルのなかのID名「MyGraph」のSVG要素に、作成した軸を追加して完成です。sample.jsのソースコードは以下のようになります。

                      ■sample.js
                      var testData = [30, 100, 320, 150];
                      
                      d3.select("#MyGraph")
                      .selectAll("rect")
                      .data(testData)
                      .enter()
                      .append("rect")
                      .attr("x", 10)
                      .attr("y", function(d,i){
                      return i*25;
                      })
                      .style("fill", "blue")
                      .attr("height", "20px")
                      .attr("width", function(d,i){
                      return d+"px";
                      })
                      
                      var xScale = d3.scale.linear()
                      .domain([0, 350])
                      .range([0, 350]);
                      
                      d3.select("#MyGraph")
                      .append("g")
                      .attr("class", "axis")
                      .attr("transform", "translate(10, "+((1+testData.length)*20+5)+")")
                      .call(d3.svg.axis()
                      .scale(xScale)
                      .orient("bottom")
                      )
                      

                      次回は、いよいよグラフに動きをつけてる方法について見てゆくことにしましょう。
                      このエントリーをはてなブックマークに追加
                      | グラフ作成 | 13:32 | comments(0) | - | - |