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
<< データの変化をSVG要素に反映する | main | グラフにグリッド線を追加する >>
世界の総人口の推移を片対数グラフで描画する
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");
    
    })
    
    


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