特定データ(例:都市名など)と不特定データ(例:数字範囲 -1~1)を分類します
- 色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
- 特定データ:数え切れる、数が多くないなどの特徴
- 例:都市名:東京、大阪など)
- 特定の色で表現できます(赤➡東京、青➡大阪、など)
- 不特定データ:数えるのは難しい、数が多い、数値の範囲がある
- 例:数値:‐1~1 の間、少数点の一桁(-1, -0.9, -0.8 ...)で表現すると21個、少数点2桁(-1, -0.99, -09.8 ...)では201個となります
- 予め特定の色を用意することが難しいです
d3.scaleOrdinalで特定データの色表現
- d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
- バーチャート、凡例などはよく見られた例となります
- データのセット、色のセットの数が同じの場合、1対1の関係になります
// 色セット、データセットの数:3個 var city = ["New York", "San Francisco", "Los Angeles"]; var colors = ["#FF0000", "#009933" , "#0000FF"]; // データと色をマッピング var color_scale = d3.scaleOrdinal() .domain( city ) // 入力 .range(colors) ; // 出力
- データセットの数>色セットの数: 最初の色から再度循環使用されます
// データセット(city)の数が色セットより多い var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"]; var colors = ["#FF0000", "#009933" , "#0000FF"];
d3.scaleLinearで不特定データの色表現
- データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
- d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します
- 今回のデータ入力範囲、出力の色範囲が決まった場合の例では
// 入力データ、出力の色範囲を決める var color_scale = d3.scaleLinear() .domain([-1,0,1]) // 入力データ範囲:-1~1 .range(['red','yellow','green']) // 出力色範囲: 赤―黄色―緑 ; var data_set = d3.range(-1, 1, 0.2) ;// データを10個生成