Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【初学者向け】Chroma.js の使い方

[17.03.15] - 細かい誤りを修正しました🌟

chroma.jsとは?

アメリカの新聞「The New York Times」でデータビジュアリゼーション(データの視覚化)を専門とされるグレガー・エイッシュ(Gregor Aisch)さんが、視認性の良い色をマッピングするためのツールとして作成されたもののようです。グレガーさんのHPの一つvis4.netを訪サイトしてみると、美麗なインフォグラフィックスが沢山掲載されています。

準備

  • chroma.jsをダウンロード
  • インポート (HTML)
HTML
<!DOCTYPE html>
    <html>
    <head> 
    </head>
    <body>
    
    
    <script src="chroma.jsファイルのurl"></script>
    <script> 
    // これから解説するchroma.js 実行コード 
    </script>
    </body>
    </html>

 

分かりやすさ優先のため、chroma.jsの機能の一部しか説明しておらず、また、不正確・不十分な説明の箇所もあります。ご了承下さい。 chroma.jsには、他にも沢山の機能が実装されています。
正確性・全機能を優先される場合は、chroma.js Documentationページをご覧下さいませ(•ᵕᴗᵕ•)⁾⁾🌟

使い方

chroma.scale().hex()

 

パレット数: 30

0
1

 

chroma.scale() はざっくり説明すると、「任意の2色を左右端に位置付け、グラデーションを実現するfunction」です。この記事では解説しませんが、2色以上にも対応しており、カラフルなグラデーションを作成することもできます。
chroma.jsの醍醐味でもある「グラデーションパレット」を作成するためにも、先ずはこのグラデーションから一色を取得する方法を見ていきましょう。

 

★基本: 単色
 

 

HTML
<div id="elm"></div>
JS
var scl = chroma.scale(['crimson', '#fafcee']);
var val = scl(0.5).hex(); //  val => #eb8895


// もしくは一行で書くなら
var val = chroma.scale(['crimson', '#fafcee'])(0.5).hex() // val => #eb8895

先ずはscale([color1, color2])でグラデーションさせる両端の色を指定します。そして、先ほど見たような2色間のグラデーションで、どのあたりの色を取得するかをscl()内に数値を記述します。

 

0
1

 

0~1までの値を区番(domain)と言い、左(0) → 右(1)となっています。0~1の間の区切り方は任意ですので、10段階中の左辺りを取得したいならなら0.3、100段階中の右端辺りなら0.75。幾らでも細分化可能です。(ホント素晴らしい機能ですね✨)

 

取得した値を背景色にする

指定した色を、ブロック要素の背景色にしたい場合は、element.style.backgroundでvalを割り当てればOKです。

 

HTML
<div id="elm"></div>
JS
var elm = document.getElementById('elm');
var scl = chroma.scale(['crimson', '#fafcee']);
var val = scl(0.5).hex();

elm.style.background = val; // 背景 => #eb8895 💮



// 分かりやすさのために分けましたが、var val に分けなくてOK
/*=====================================*/

var elm = document.getElementById('elm');
var scl = chroma.scale(['crimson', '#fafcee']);

elm.style.background = scl(0.5).hex(); // 背景 => #eb8895 💮

 

 

  • chroma.scale().hsl() | chroma.scale.lab() ...etc

    .hex() の他にも、.hsl(), .lab() などでも値を取得できます。カラー値変換もchroma.jsのメイン機能の一つです。ディスプレイによる色表示の方法には、カラースペース(色空間)(or カラーモデル) と呼ばれる「使用する色の範囲」を定めたスキームscheme*1がいくつかあります。そしてそれぞれのスキーム毎に色の範囲が定められています。

  • Color Space --- Wiki
  • chroma.js で扱えるカラースペースはchroma.js公式github-wiki-をご覧下さい。ほぼ全て? のカラースペースを扱え、更にDeomまで付いています✨
    chroma.js -github/wiki- Colors
    chroma.js -github/wiki- Color Spaces

★★★応用: グラデーションパレット作成

 

グラデーションパレット(10区画)作る場合

先の応用です。()内にscl(0.1), scl(0.2), scl(0.3)... 1.0 を代入したものを各要素の背景色にし、左から順に並べればOK。

 

力技で、実現すると…

HTML
<style>
.elm {
   display: inline-block;
   width: 10%;
   height: 200px;
   }
</style>
<body>
<div class="elm" id="elm1"></div>
<div class="elm" id="elm2"></div>
<div class="elm" id="elm3"></div>
<div class="elm" id="elm4"></div>
<div class="elm" id="elm5"></div>
<div class="elm" id="elm6"></div>
<div class="elm" id="elm7"></div>
<div class="elm" id="elm8"></div>
<div class="elm" id="elm9"></div>
<div class="elm" id="elm10"></div>

<script>
var e1 = getElementById('elm1');
var e2 = getElementById('elm2');
var e3 = getElementById('elm3');
var e4 = getElementById('elm4');
var e5 = getElementById('elm5');
var e6 = getElementById('elm6');
var e7 = getElementById('elm7');
var e8 = getElementById('elm8');
var e9 = getElementById('elm9');
var e10 = getElementById('elm10');

var scl = chroma.scale(['crimson', '#fafcee']);


e1.style.background = scl(0.1);
e2.style.background = scl(0.2);
e3.style.background = scl(0.3);
e4.style.background = scl(0.4);
e5.style.background = scl(0.5);
e6.style.background = scl(0.6);
e7.style.background = scl(0.7);
e8.style.background = scl(0.8);
e9.style.background = scl(0.9);
e10.style.background = scl(1.0);
</scrit>

となります。

JavaScriptで実現する場合の一例は、以下になります。

HTML
<div id="elm"></div>
JS
var elm = document.getElementById('elm');
var scl = chroma.scale(['crimson', '#fafcee']);
var i;

for (i = 1; i <= 10; i++) {
    var pale = document.createElement('div');
    pale.style.width =  10 + '%';  // 1パレット幅 = 100% × (1 / 欲しいパレット数) 
    pale.style.display = 'inline-block';
    pale.style.height = '160px';
    pale.style.background = scl(i/10);  // scl(1/10), scl(2/10), scl(3/10)...
    pale.innerHTML = scl(i/10);  // カラー値が分かるように、値をhtmlにも出力
    elm.appendChild(pale);
}

pale.style.background = scl(i/pales).hex()としなくても可。デフォルト設定値が、rgbカラースペース

これをもう少し煮詰め、スマートにしたものが以下になります。

JS
var elm = document.getElementById('elm');
var scl = chroma.scale(['crimson', '#fafcee']);
var pales = 10;
var i;

for (i = 1; i <= pales; i++) {
    pale = document.createElement('div');
    pale.style.width = (100/pales) + '%';  // 1パレット幅 = 100% × (1 / 欲しいパレット数) 
    pale.style.display = 'inline-block';
    pale.style.height = '160px';
    pale.style.background = scl(i/pales);  // scl(1/10), scl(2/10), scl(3/10)...
    pale.innerHTML = scl(i/pales);  // カラー値が分かるように、値をhtmlにも出力
    elm.appendChild(pale);
}

思考の足あと🐾

●パレット10個作る → for loop で '新要素' を作成 [ document.createElement('div') ]
●要素10個 → 幅100%とした時、1要素の幅は10% になる [ 100% ÷ 10(パレット数) ]
●一つづつの要素の背景を1ループ毎に0.1, 0.2となるように [ scl(x) :: (1ループ目) x = 0.1 | (2ループ目) x = 0.2 になるように、「ループ毎に変化する値」 を上手く活用できれば… → i を使う ]
●作ったバレットをどこかくっ付ける( 親要素.appendChild(付け要素);

 

煮詰め前・後js | 見比べ用

js1
js2
var elm = document.getElementById('elm');
var scl = chroma.scale(['crimson', '#fafcee']);

var i;

for (i = 1; i <= 10; i++) {
    var pale = document.createElement('div');
    pale.style.width =  10 + '%';  // 1パレット幅 = 100% × (1 / 欲しいパレット数) 
    pale.style.display = 'inline-block';
    pale.style.height = '160px';
    pale.style.background = scl(i/10);  // scl(1/10), scl(2/10), scl(3/10)...
    pale.innerHTML = scl(i/10);  // カラー値が分かるように、値をhtmlにも出力
    elm.appendChild(pale);
}
var elm = document.getElementById('elm');
var scl = chroma.scale(['crimson', '#fafcee']);
var pales = 10;
var i;

for (i = 1; i <= pales; i++) {
    pale = document.createElement('div');
    pale.style.display = 'inline-block';
    pale.style.width = (100/pales) + '%';  // 1パレット幅 = 100% × (1 / 欲しいパレット数) 
    pale.style.height = '160px';
    pale.style.background = scl(i/pales);  // scl(1/10), scl(2/10), scl(3/10)...
    pale.innerHTML = scl(i/pales);  // カラー値が分かるように、値をhtmlにも出力
    elm.appendChild(pale);
}

このように書き換えると、始めのvar pales = の右側を「作成したいパレット数」に変えるだけで、パレット作成数を簡単に調整できます。

パレット数: 5

 

パレット数: 15

 

パレット数: 30

 

Remove all ads
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️