第 3 章 Aesthetic scales

每個geom有它可以使用的aes，geom裡的aes只是指定不同美學的決定資料變數，然而資料變數「值」如何映到「美學呈現」透過scale來更動。

ggplot2的所有aesthetic specifications: https://ggplot2.tidyverse.org/articles/ggplot2-specs.html

3.1 color/colour

3.1.1 常用套件

library(grDevices) # 不同顏色模型代碼的呈現及轉換
library(scales) # show_col()螢幕立即顯示顏色
library(colorspace) # 調色盤選擇及ggplot應用工具
library(shinyjs) # 支援套件

3.1.2 顏色模型

光的三原色為R(紅)G(綠)B(藍)，三種光原色一起發光就會產生俗稱的白光。事實上光是沒有顏色的。而人類眼睛所看物體的顏色，是光線照在物體上所反射的波長被眼睛擷取到而決定人類所看到的顏色。白色就是所有的光都被反射所呈現的顏色，反之，黑色則是吸收了所有的光。

顏色常見有三種三維度的表現形式：

RGB

• RGB（Red, Green, Blue）：\((R,G,B)\in [0,1]^3\)

  三原色以其最高顏色強度（255）的比例呈現。

library(grDevices)
rgb(0,0,1) # 即對應顏色強度(0,0,255)

[1] “#0000FF”

rgb(0.5,0,0.7) # 即對應顏色強度(0.5*255,0,0.7*255)進位到整數

[1] “#8000B3”

library(scales)
show_col(c(rgb(0,0,1),rgb(0.5,0,0.7)))

HSV

• HSV（Hue, Saturation, Value）:\((H,S,L)\in [0,1]^3\)

  Hue（色像）: 以360度色環所要「角度/360」選擇基本色。
  Saturation（飽合度）: 可以想成白色與所選擇基本色的混合比例，0＝全白色，1＝全基本色。 Value（lightness value照度）: 可以想成要在多亮的環境下看，0＝全暗，1＝全亮。

圖 3.1: 360度色像Hue

圖 3.2: HSV意示圖

show_col(
  c(
    hsv(30/360,0,0),hsv(30/360,0.5,0),hsv(30/360,1,0), # (,,lightness=0) 全暗
    hsv(30/360,0,0.5),hsv(30/360,0.5,0.5),hsv(30/360,1,0.5), # (,,lightness=0.5)
    hsv(30/360,0,1),hsv(30/360,0.5,1),hsv(30/360,1,1) # (,,lightness=1) 全亮
  )
)

HCL

HCL是以人眼感受出發的色彩選擇，因此成品較能傳達作者所要的視覺感受。

• HCL（Hue, Chroma, Luminance）: \((H,C,L)\in [0,360]\times[0,\bar{c}]\times[0,100]\) HSL是以感官出發點的顏色描繪系統。
  Hue（色像）: 以360度色環選擇基本色。
  Chroma（彩度）: 彩度越低顏色感受越有陰影感。
  Luminance（流明度）: 流明度越高代表在越亮的環境觀看。

由於HCL是以人眼感受出發，每一種色像會有眼睛感觀的上下限，它受到彩度及流明度的設定影響，故HCL在不同色像下它的眼睛可感受C-L空間大小及位置會不同，我們可以使用colorspace::choose_color()來協助參數選擇：

choose_color()

3.1.3 調色盤palette

choose_palette(gui="shiny")

• 使用choose_palette(gui="shiny")選完palette可以copy下來對應的palette hcl函數並修改函數的register參數成為所要名稱。

調色盤（palette）是將N個顏色進行排序，排序原則依視覺化目的分成：

• Qualitative：只要突顯不同類別就好。

pal_qual <- colorspace::qualitative_hcl(
  n = 7, 
  h = c(0, 360), c = 35, l = 85, 
  register = "myQualitative"
  )
pal_qual %>% specplot(hcl=F)

圖 3.3: Qualitative：維持亮度、彩度，只改變色像

在hcl座標上，固定c=35,l=85,只改變色像由0角開始到360度結束。

• Sequential: 要突顯不同類同時有排序感。

pal_seq <- colorspace::sequential_hcl(
  n = 7, 
  h = 135, c = c(45, NA, NA), l = c(35, 95), 
  power = 1.3, 
  register = "mySequential")
pal_seq %>% specplot(hcl=F)

圖 3.4: Sequential：維持色像，逐步調高亮度、降低彩度

hcl由(135,45,35)高彩度走到(135,0,95)低彩度，走法的由power參數控制。

• Diverging: 要突顯不同類且強調極端族群的資料。

pal_diverge <- colorspace::diverging_hcl(
  n = 7, 
  h = c(260, 0), c = 80, l = c(30, 90), 
  power = 1.5, 
  register = "myDiverge")
pal_diverge %>% specplot(hcl=F)

圖 3.5: Diverging：兩段Sequential走法。

hcl由(260,80,30)高彩度走到(260,0,95)無彩度灰色（即sequential走法），再走到(0,80,30)。由於無彩度時hue不重要，下半段走法可以想成(0,0,95)走到(0,80,30)（而一次的sequential走法) ，走法的由power參數控制。

3.2 ggplot應用

3.2.1 基本概念

ggplot是透過+scale_colour/scale_fill...()來改變顏色與變數值的對應：

• scale_color_...用來改變aes為color的顏色。

• scale_fill_...用來改變aes為fill的顏色。

data.frame(
  x1 = factor(sample(c(1L,2L,3L),100,replace=T)),
  x2 = runif(100),
  y = runif(100),
  z1 = rnorm(100),
  z2 = factor(sample(letters[1:4],100,replace=T))
) -> df_example

df_example %>%
  ggplot()+
  geom_boxplot(
    aes(x=x1,y=y,fill=z2)
  ) -> basicBoxplot
basicBoxplot

df_example %>%
  ggplot()+
  geom_point(
    aes(x=x2,y=y,color=z1)
  ) -> basicScatterPlot
basicScatterPlot

3.2.2 套用調色盤palette

colorspace套件額外增加了以下的scale_...()函數：

scale_<geom裡的色彩aes>_<aes變數類型>_<色彩使用目的>

basicBoxplot +
  scale_fill_discrete_qualitative(palette="myQualitative",nmax=5) # 由於色圈會由0度出發回到360度所以第1個及第5個會是同色，因此4類要創出5個顏色才不會有1,4類同色問題。

basicScatterPlot +
  scale_color_continuous_sequential(palette = "mySequential")

basicScatterPlot +
  scale_color_continuous_diverging(palette="myDiverge")

3.2.3 顏色變化率

有時用來對應顏色的資料太集中在某一類或某些數值範圍，這時圖面上反而區分不了資料差異，此時有必要改變調色盤的顏色變化率。

data.frame(
  x1 = factor(sample(c(1L,2L,3L),100,replace=T)),
  x2 = runif(100),
  y = runif(100),
  z1 = c(rnorm(30,-1,0.05),rnorm(70,1,2))
) -> df_example2

df_example2 %>%
  ggplot()+
  geom_point(
    aes(x=x2,y=y,color=z1),size=2
  )

3.2.4 範例：使用顏色突顯

處理資料

library(readr)
transcriptEachYear <- read_csv("https://www.dropbox.com/s/hsuuedc7wyvq7n5/transcriptEachYear.csv?dl=1")

transcriptEachYear %>%
  spread(
    年級,學年平均成績
  ) -> transcriptEachYear_spread

選色

colorspace::sequential_hcl(n = 7, h = c(300, 200), c = c(60, NA, 0), l = c(25, 95), power = c(0.7, 1.3), register = "Custom-Palette") -> color7
color7 %>% scales::show_col()

color7

[1] “#6B0077” “#724E95” “#7C7BB2” “#8DA3CA” “#A7C6DD” [6] “#C8E2EB” “#F1F1F1”

套用

transcriptEachYear_spread %>%
  ggplot()+
  geom_point(
    aes(x=`1`, y=`2`), alpha=0.1,color="#C8E2EB"
  ) +
  geom_point(
    data=transcriptEachYear_spread %>%
      filter(學系=="社會學系"),
     aes(x=`1`, y=`2`), color="#724E95"
  ) +
  labs(x="一年級成績",y="二年級成績")

圖 3.6: 一二年級成績關連，紫色為社會學系

3.3 其他

3.3.1 色盲

• deutan: green cones in the eye detect too much red light and not enough green light. As a result red, yellow, green, and brown can appear similar, especially in low light.

• protan: the red cones do not detect enough red and are too sensitive to greens, yellows, and oranges. As a result, greens, yellows, oranges, reds, and browns may appear similar, especially in low light.

• tritan: a loss of color discrimination for shades of blue and yellow but it is not typically a form of color blindness.

3.4 練習

下載台灣五等距家庭所得家庭可支配所得：

disposableIncome <- read_csv("https://www.dropbox.com/s/z80sbjw94cjex8x/disposableIncome.csv?dl=1",
locale = locale(encoding = "BIG5"), skip = 4)

計設一圖突顯不同家庭所得在2003年金融海嘯後的所得上升速度差異。

3.5 參考資料

https://www.r-graph-gallery.com/colors.html

https://www.nceas.ucsb.edu/~frazier/RSpatialGuides/colorPaletteCheatsheet.pdf

https://cran.r-project.org/web/packages/colorspace/vignettes/colorspace.html#usage_with_ggplot2

Thinking design by Adobe:

• Part 1: Adaptive Color in Design Systems

• Part 2: Introducing Adaptive Color Palettes

• Part 3: Adaptive Color in Spectrum, Adobe’s Design System

colorspace website: http://colorspace.r-forge.r-project.org/articles/colorspace.html