SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

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

Python+pandasとD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< D3.jsを使ったCSVファイルの読み込み | main | D3.jsによるパックレイアウトの作成 >>
D3.jsを使った動きのある散布図の作成
0
    JUGEMテーマ:JavaScript

    前回は日本の総人口データをCSVファイルから読み込んで描画するプログラムを書きましたが、これに少し手を加えて、ダイナミックに動く散布図を作成してみましょう。

    D3.jsを使ったアニメーションを作成する基本的な流れは、以下の通りです。

    1. アニメーション開始時の値を設定する。
    2. transition() メソッドを追加して、その後ろにアニメーション終了時の値を設定する。
    3. duration(), delay() メソッドで、アニメーション継続時間や開始時間を設定する。

    これだけだとイメージしにくいので、サンプルプログラムを以下に示します。
    var dataSet = [];
    
    // X,Y軸を表示できるようにグラフの周囲にマージンを確保する
    var margin = {top: 10, right: 40, bottom: 40, left: 100};
    var width = 800 - margin.left - margin.right;
    var height = 400 - margin.top - margin.bottom;
    
    d3.csv("./js/population.csv", function(error, dataSet){
      console.log(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([1920,2000])
        .range([0,width]);
    
      var yScale = d3.scale.linear()
        .domain([0,130000])
        .range([height,0]);
    
        
      // 散布図を描画
      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","rgba(0, 0, 255, 0.0)")
        .transition()
        .delay(function(d,i){
          return i*20;
        })
        .duration(500)
        .attr("fill","rgba(0, 0, 255, 1.0)");
    
      // Y軸を描画
      svg.append("g")
        .attr("class", "axis")
        .call(d3.svg.axis()
          .scale(yScale)
        .orient("left")
      );
      
      // X軸を描画
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.svg
          .axis()
          .scale(xScale)
          .orient("bottom")
      );
      
      // 凡例
      svg.append("g")
        .append("text")
        .attr("x", 20)
        .attr("y", 20)
        .text("[単位:千人]");
    
    })
    
    ⇒ サンプルページ

    前回のプログラムとの違いは、40行目から46行目までのたった6行だけです。順を追って見てゆきましょう。まず40行目では、アニメーション開始時の値、この例ではデータ点をすべて透明にしています。次の41行目は transition() メソッドで、その後ろの42行目から44行目で各データ点に対するアニメーション開始時間を指定しています。ここでは i 番目のデータ点は i×20 ミリ秒後にアニメーションを開始するように指定しています。45行目はアニメーションの継続時間、つまり transition() 前の開始時の値から transition() 後の終了時の値まで、どれだけの時間 (単位はミリ秒) をかけて変化するかを指定しています。最後の46行目はアニメーション終了時の値、この例ではデータ点をすべて青色にするよう指定しています。

    これを実行すると、散布図のデータ点がグラフ上に順番に表示されてゆきます。今回は transition() 前後で1つのパラメータしか変化させませんでしたが、2つ以上のパラメータ (例えばX座標とY座標と色、など) を指定すれば、これらを同時に変化させることもできます。
    このエントリーをはてなブックマークに追加
    | D3.js | 06:25 | comments(0) | - | - |
    スポンサーリンク