D3.js v5 カラーテーマまとめ (d3-scale-chromatic)
D3のv5から追加されたカラーテーマです。
v4でもHTMLファイルのヘッダーに下記を追加して呼び出すと使うことができます。
|
1 2 |
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> |
カテゴリー分け用カラーテーマ
9つのカラーテーマが用意されています。配列として定義されているので
|
1 |
colorValue = d3.schemeSet1[0] |
のように呼び出して使います。
■テーマ一覧
d3.schemeCategory10[]
d3.schemeAccent[]
d3.schemeDark2[]
d3.schemePaired[]
d3.schemePastel1[]
d3.schemePastel2[]
d3.schemeSet1[]
d3.schemeSet2[]
d3.schemeSet3[]
それぞれ設定されているカラー数が異なりますが、配列を繰り返し呼び出す関数を作成するd3.scaleOrdinal(詳細はこちら)を使うとデータ数にか関わらず用いることができます。
|
1 2 |
var colorScale = d3.scaleOrdinal(d3.schemeSet1); colorScale(0) |
グラデーション用カラーテーマ
35のカラーテーマが用意されています。関数として定義されているので
|
1 |
colorValue = d3.interpolateBrBG(0.2) |
のように呼び出して使います。入力する変数の範囲は0.0～1.0です。
■テーマ一覧
d3.interpolateBrBG()
d3.interpolatePRGn()
d3.interpolatePiYG()
d3.interpolatePuOr()
d3.interpolateRdBu()
d3.interpolateRdGy()
d3.interpolateRdYlBu()
d3.interpolateRdYlGn()
d3.interpolateSpectral()
d3.interpolateBlues()
d3.interpolateGreens()
d3.interpolateGreys()
d3.interpolateOranges()
d3.interpolatePurples()
d3.interpolateReds()
d3.interpolateViridis()
d3.interpolateInferno()
d3.interpolateMagma()
d3.interpolatePlasma()
d3.interpolateWarm()
d3.interpolateCool()
d3.interpolateCubehelixDefault()
d3.interpolateBuGn()
d3.interpolateBuPu()
d3.interpolateGnBu()
d3.interpolateOrRd()
d3.interpolatePuBuGn()
d3.interpolatePuBu()
d3.interpolatePuRd()
d3.interpolateRdPu()
d3.interpolateYlGnBu()
d3.interpolateYlGn()
d3.interpolateYlOrBr()
d3.interpolateYlOrRd()
d3.interpolateRainbow()
これらは0.0～1.0値を引数とします。入力するレンジを変えたい場合は、入力値を0.0～1.0の値に変換して関数に入力するメソッドd3.scaleSequential(詳細はこちら)を使って変換することができます。
|
1 2 |
var colorScale = d3.scaleSequential(d3.interpolateRainbow).domain([0, 20]); colorScale(0) |
変換例
まとめ
カラーテーマが複数用意されていますが、自分で設定することも可能です。詳しくはこちらを参照ください。