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によるパイチャートの描画 >>
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()メソッドについてより詳しく見てゆきましょう!

     
    このエントリーをはてなブックマークに追加
    | D3.js | 21:51 | comments(0) | - | - |
    スポンサーリンク