三角グラフを描いてみる

 三角グラフというのは、3成分をパーセンテージで表して、三角形の枠に嵌め込んでグラフ化したもの。
 3成分の正三角形内部の点から各辺への垂線の長さで表現する方式と、正三角形の各辺を軸としてベクトルの合計とする方式がある。
 今回は後者の方法で説明する。やっていることは、数値を三角グラフの適切な配置に入るように変形するだけなので、ここで説明している内容を理解できればどちらの方式のグラフも作れるはずである。
 3成分系の元となるデータが必要だが、以前使ったCCDの波長感度分布のグラフを利用する。

 グラフタイトルにはCMOSと書いてあるけど、カラーフィルターの波長特性を示しているのでCCDとかCMOSとかで分類すること自体が適切ではない。元データは20190621のエントリーでは必要ないかと思ってアップしてなかったけど、一応上げておく。
CMOS.xlsx

 具体的にやることは3段階ある。これらをクリアすることで晴れて三角グラフが完成する。
・グラフの枠を作る
・3成分を%に変換
・3成分の%の値から三角グラフ上の点を決定

①グラフの枠を作る
 普通、エクセルでグラフを描く場合は第一象限だけを使う。枠となる三角形はここに設置することになる。
 できるだけ単純にしたいので、原点を三角形の頂点の1つに合わせる。もちろん別の頂点の1つは底辺とx軸を共有させるので、x軸上となる。基本的に%を使うので、値は100とする。2つの頂点が決まる。残りの1つは原点から60°の角度で斜め上に100の位置となる。
 具体的な座標は(0,0) (0,100) (100sin(π/3), 100cos(π/3))となる。

 これだけだとグラフとして不親切すぎるので、補助目盛りを20%刻みでつける。補助目盛りは三角形の各辺を5等分した点を設定してテキトーに繋げるとできる。ちなみに、それぞれの値は次のようになる。

x y
10 17.32
60 69.28
80 0.00
20 34.64
70 51.96
60 0.00
30 51.96
80 34.64
40 0.00
40 69.28
90 17.32
20 0.00

 ついでに、3色の方向を表す矢印も付けておくと良い。

 実は、この三角グラフの枠と補助目盛りを作るのは結構面倒なので、一度作ったら使い回すようにすると良い。といっても、三角グラフを作る機会なんてあんまりないと思うが。

②3成分を%に変換して規格化
 これはすごく簡単。3成分の合計でそれぞれの成分を割ったら出てくる。ただし、%で表記するので100倍すること。
 3成分を%で表記しているが、2成分がわかれば100から2成分の合計を弾けば残りの成分が得られるので、実は3つとも求める必要はない。のだけど、折角なので求めておいて損はない。
 以下のグラフが得られる。このグラフ自体は使わないから、あえて作る必要はない。


③3成分の%の値から三角グラフ上の点を決定
 いわゆる座標変換というもの。当エントリーの本題はここになる。
 軸の取り方として、上の図では左上の辺を青、右上の辺を緑、下の辺を赤とした。
 試しにグラフのスタート地点となる374nmを例に座標を変換してみる。各数値は次の通り。

波長 Blue(%) Green(%) Red(%)
374 18.62 26.95 54.43

 例えば、青の18.62%は左下のBlueの起点から18.62だけ矢印に進んだ点から、まっすぐ右側に伸びる線分を示す。
 この線分の長さが残りの81.38%を示しており、緑と赤で分け合うことになる。
 同様に緑(26.95%)と赤(54.43%)も下図のように表すことが出来る。


 そして、各線の交わる点がR(54.43%), G(26.95%), B(18.62%)を示す。

 結果、374nmの色の配分は次の点を示すことになる。

 三角形の中の点を見たときにRGBがそれぞれどのような配分になっているかイメージしづらいと感じるかもしれないけど、次のような図を想像すると理解の助けになるかと思う。



 以上は、作図によって表記する方法であるが、計算機を使って多数の点をグラフとして表示する場合はどうしても代数解が欲しくなる。
 R(54.43%), G(26.95%), B(18.62%)を直交座標の上で表記しなければならない。
 座標は3色のうち2色を使って表すことが出来るので、3通りの表現がある。ここでは青(18.62%)と赤(54.43%)を使って説明することにする。
 考え方としては、赤の基準点である右下の頂点から三角形の底辺に沿って真左に54.43%移動する、そこから右上60°方向に18.62%移動する。この点が求める座標である。
 赤の基準点(100,0)から、右下の頂点から三角形の底辺に沿って真左に54.43%移動→(100-54.43, 0) = (45.57, 0)
 そこ(45.57, 0)から右上60°方向に18.62%移動(45.577 + 18.62cos(3/π), 0 + 18.62sin(3/π))する。この点(36.26, 16.13)が求める座標である。
 以上より、青をB(%)、赤をR(%)とすると求める点は、
{ \displaystyle \left( 100-R+B\cos\left( \frac{3}{\pi}\right), B\sin\left( \frac{3}{\pi}\right)\right) }
と表記できる。

 これを374nmから800nmまで全ての値で求めると、相図を描くことが出来る。なお、三角グラフでは波長を表現できないので、必要があれば明示しなければならない。ここでは始点の374nmと終点の800nm、及び400~750nmを50nm刻みに表示した。


 例によって、グラフを描くのに使ったエクセルファイルをアップしておく。ここから三角グラフの枠線だけを抜き出すのもいいんじゃないかな。
三角グラフ


関連エントリー
 20190621 グラフの画像から数値を読み取る