LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

09
--
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】 ローソク足チャートの作成 | main | D3.js で六角形を描く (hexbin) >>
【D3.js】2つの色を補完する (interpolateLabメソッド)
0
    JUGEMテーマ:JavaScript

    データの可視化をする際に、しばしばデータの数値を色の変化で表現したくなるときがあります。そんなときは、D3.js の interpolateLab() メソッドを使うと便利です。

    このメソッドは、指定した2つの色の間を自動的に補完してくれるメソッドです。このメソッドを使うと、例えば 0% から 100% までのデータに対して、数値に応じた青色 (0%) と赤色 (100%) の間の色でデータをプロットすることができます。

    例えば青と赤の間を補完するには、いちばん単純な形だと下記のようにして使うことができます。
     
     var color = d3.interpolateLab("blue", "red");

    この場合、関数 color() は引数として 0 から 1 までの数値を取り、color(0) が blue、color(1) が red を返します。引数として 0 と 1 の間の数値を指定すると、関数 color() はその引数に応じて blue と red の間の色を返します。

    これはこれで良いのですが、今回は引数の数値の範囲や、引数の変化と色の変化の関係 (通常は linear = 線形) などを明示的に指定することにしました。下記のサンプルプログラムでは、0 から 20 までの数値によって white から steelblue までの色を生成する関数と、blue から red までの色を生成する関数を定義しています。

    サンプルページ

    // SVGのサイズを指定
    var width = 800;
    var height = 180;
    
    // 白からスティールブルー(Steelblue)へのグラデーション
    var color = d3.scale
      .linear()
      .domain([0, 20])
      .range(["white", "steelblue"])
      .interpolate(d3.interpolateLab);
    
    // 青から赤へのグラデーション
    var color2 = d3.scale
      .linear()
      .domain([0, 20])
      .range(["blue", "red"])
      .interpolate(d3.interpolateLab);
      
    // SVG要素の円を20個追加するための配列
    var numData = d3.range(0,20);
    
    // SVGの幅と高さを指定
    var svg = d3.select("#MyGraph")
      .attr("width", width)
      .attr("height", height)
      .append("g")
    
    // 白からスティールブルー(Steelblue)へのグラデーションのテスト
    svg.append("g")
      .selectAll("circle")
      .data(numData)
      .enter()
      .append("circle")
      .attr({
        "cx" : function(d){return 20 + d*40},
        "cy" : 60,
        "r" : 20,
        "fill-opacity" : 1,
        "fill" : function(d){return color(d)}
      });
    
    // 青から赤へのグラデーションのテスト
    svg.append("g")
      .selectAll("circle")
      .data(numData)
      .enter()
      .append("circle")
      .attr({
        "cx" : function(d){return 20 + d*40},
        "cy" : 120,
        "r" : 20,
        "fill-opacity" : 1,
        "fill" : function(d){return color2(d)}
      });
    
    


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