LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

11
--
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 v4 によるパイチャートの描画 (2) | main | D3.js v4によるVoronoi図の作り方 >>
D3.js v4でオリジナルのカラーマップを作成する方法
0

    以前、d3-scale-chromatic.v1.min.js を使ってグラデーションを作成する方法を紹介しました (D3.js v4で利用可能なカラーマップ一覧)。今回は、d3-scale-chromatic.v1.min.js を読み込まずに、任意のカラーマップを作成する方法を紹介します。

     

    このブログで D3.js v4 で折れ線グラフを作成する方法について紹介したときに、scaleLinear() というメソッドが出てきました。そのときは、データの値の範囲をSVG画像の座標軸にマッピングするために、このメソッドを使っていました。ところがこのメソッド、使い方によっては、数値の範囲をRBGの色の範囲にマッピングすることも可能です。試しに 0~1 の範囲の数値を、0 => cyan, 0.5 => yellow, 1 => orange となるようなオリジナルのカラーマップを作ってみました。

     

    ポイントは、14~16行目の部分です。この部分で、0~1の数値を入力引数として、cyan~yellow~orange の範囲で連続的に変化するRGB値を出力する関数を作成しています。色の指定は、この例のように既に定義されているカラーネームを使うこともできますし、RGB値を直接入力することもできます (せっかくなので、サンプルコードにアニメーションも加えてみました)。

     


     

    JUGEMテーマ:JavaScript

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