からっぽのしょこ

読んだら書く!書いたら読む!同じ事は二度調べ(たく)ない

ハロプロメンバーカラーの色見本の作図

はじめに

 ハロー!プロジェクトの歴史を可視化しようシリーズです。
 この記事では、メンバーカラーの色見本をR言語で作成します。

【他の内容】

www.anarchive-beta.com

【目次】

色見本の作成

 ハロー!プロジェクトのグループのメンバーカラーの一覧を作成します。

 利用するパッケージを読み込みます。

# 利用パッケージ
library(tidyverse)

 この記事では、基本的にパッケージ名::関数名()の記法を使うので、パッケージを読み込む必要はありません。ただし、作図コードがごちゃごちゃしないようにパッケージ名を省略しているため、ggplot2は読み込む必要があります。
 magrittrパッケージのパイプ演算子%>%ではなく、ベースパイプ(ネイティブパイプ)演算子|>を使っています。%>%に置き換えても処理できます。

データの読込

 メンバーカラーとカラーコードの対応データを読み込みます。

 対応表は次のGitHubリポジトリに保存しています。

github.com

 現在活動中のグループの歴代メンバーのメンバーカラーに対応したカラーコードのcsvファイルです(過去のグループについても更新予定)。
 ダウンロードしてローカルフォルダに保存しておきます。

 保存先のフォルダパスを指定します。

# 保存先のパスを指定
dir_path <- "ColorPalette/data/"

 ファイルの読み込み時にファイル名を結合する(ファイルパスにする)ので、末尾を/にしておきます。

 各グループのメンバーとカラーコードの対応表を読み込みます。

# UTF8のcsvファイルを読み込み
all_df <- readr::read_csv(
  file = paste0(dir_path, "membercolor_utf8.csv"), 
  col_types = readr::cols(
    group_id = "i", 
    group_name = "c", 
    member_id = "i", 
    member_gen = "i", 
    member_name = "c", 
    color_code = "c"
  )
)
all_df
## # A tibble: 120 × 6
##    group_id group_name     member_id member_gen member_name color_code
##       <int> <chr>              <int>      <int> <chr>       <chr>     
##  1        1 モーニング娘。         1          1 福田明日香  <NA>      
##  2        2 モーニング娘。         2          1 石黒彩      <NA>      
##  3        3 モーニング娘。         3          1 中澤裕子    #006400   
##  4        4 モーニング娘。         4          1 安倍なつみ  #FF0000   
##  5        5 モーニング娘。         5          1 飯田圭織    #000080   
##  6        6 モーニング娘。         6          2 市井紗耶香  #87CEEB   
##  7        7 モーニング娘。         7          2 保田圭      #FFB6C1   
##  8        8 モーニング娘。         8          2 矢口真里    #9370DB   
##  9        9 モーニング娘。         9          3 後藤真希    #FFA500   
## 10       10 モーニング娘。        10          4 辻希美      <NA>      
## # … with 110 more rows

 read_csv()でcsvファイルを読み込みます。Shift-JISのデータの場合は、locale引数にlocale(encoding = "CP932")を指定します。ダウンロードしたファイルはUTF8です。

 読み込んだデータを使って、色見本を作成します。

色見本の作図

 グループを指定して、そのグループのデータを取り出します。

# グループを指定
group_name_val <- "モーニング娘。"

# 指定したグループを抽出
color_df <- all_df |> 
  dplyr::filter(group_name == group_name_val)
color_df
## # A tibble: 45 × 6
##    group_id group_name     member_id member_gen member_name color_code
##       <int> <chr>              <int>      <int> <chr>       <chr>     
##  1        1 モーニング娘。         1          1 福田明日香  <NA>      
##  2        2 モーニング娘。         2          1 石黒彩      <NA>      
##  3        3 モーニング娘。         3          1 中澤裕子    #006400   
##  4        4 モーニング娘。         4          1 安倍なつみ  #FF0000   
##  5        5 モーニング娘。         5          1 飯田圭織    #000080   
##  6        6 モーニング娘。         6          2 市井紗耶香  #87CEEB   
##  7        7 モーニング娘。         7          2 保田圭      #FFB6C1   
##  8        8 モーニング娘。         8          2 矢口真里    #9370DB   
##  9        9 モーニング娘。         9          3 後藤真希    #FFA500   
## 10       10 モーニング娘。        10          4 辻希美      <NA>      
## # … with 35 more rows

 group_name列の要素が指定したグループである行をfilter()で抽出します。

 取り出したデータを使って、棒グラフを作成します。

# 色見本の作成:縦方向
ggplot(color_df, aes(x = member_id, color = member_name, fill = member_name)) + 
  geom_bar(mapping = aes(y = 1), stat = "identity") + # カラーバー
  geom_text(mapping = aes(y = 0, label = paste(member_name, " ")), 
            hjust = 1, angle = 90) + # メンバー名ラベル
  geom_text(mapping = aes(y = 0, label = paste(" ", color_code)), 
            hjust = 0, angle = 90, color = "black") + # カラーコードラベル
  scale_color_manual(breaks = color_df[["member_name"]], values = color_df[["color_code"]]) + # 線の色
  scale_fill_manual(breaks = color_df[["member_name"]], values = color_df[["color_code"]]) + # バーの色
  scale_x_continuous(breaks = color_df[["member_id"]], expand = c(0, 0)) + # x軸目盛
  scale_y_continuous(expand = c(0, 0)) + # y軸目盛
  coord_cartesian(clip = "off") + 
  theme(
    axis.title.x = element_blank(), # 横軸のラベル
    axis.title.y = element_blank(), # 縦軸のラベル
    axis.text.x = element_blank(), # 横軸の目盛ラベル
    axis.text.y = element_blank(), # 縦軸の目盛ラベル
    axis.ticks.y = element_blank(), # 縦軸の目盛指示線
    panel.grid.major.y = element_blank(), # 縦軸の主目盛線
    panel.grid.minor.x = element_blank(), # 横軸の補助目盛線
    panel.grid.minor.y = element_blank(), # 縦軸の補助目盛線
    panel.border = element_blank(), # グラフ領域の枠線
    panel.background = element_blank(), # グラフ領域の背景
    plot.title = element_text(color = "black", face = "bold", size = 20, hjust = 0.5), # 全体のタイトル
    plot.subtitle = element_text(color = "black", size = 15, hjust = 0.5), # 全体のサブタイトル
    plot.background = element_rect(fill = "gray92"), # 全体の背景
    plot.margin = margin(t = 10, r = 20, b = 90, l = 20, unit = "pt"), # 全体の余白
    legend.position = "none" # 凡例の位置
  ) + # 図の体裁
  labs(
    title = paste0(group_name_val, "のメンバーカラー一覧"), 
    subtitle = paste0("総メンバー数:", max(color_df[["member_id"]]), "人")
  ) # ラベル

モーニング娘。の歴代メンバーカラー

 scale_color_manual()で線の色、scale_fill_manual()でバーの色を設定します。aes()color, fill引数に指定した(列の)値をbreaks引数に指定し、values引数に色名やカラーコードを指定します。

 続いて、横向きの棒グラフで色見本を作成します。

# 色見本の作成:横方向
ggplot(color_df, aes(x = member_id, color = member_name, fill = member_name)) + 
  geom_bar(mapping = aes(y = 1), stat = "identity") + # カラーバー
  geom_text(mapping = aes(y = 0, label = paste(member_name, " ")), 
            hjust = 1) + # メンバー名ラベル
  geom_text(mapping = aes(y = 0, label = paste(" ", color_code)), 
            hjust = 0, color = "black") + # カラーコードラベル
  scale_color_manual(breaks = color_df[["member_name"]], values = color_df[["color_code"]]) + # 線の色
  scale_fill_manual(breaks = color_df[["member_name"]], values = color_df[["color_code"]]) + # バーの色
  scale_x_reverse(breaks = color_df[["member_id"]], expand = c(0, 0)) + # x軸目盛
  scale_y_continuous(expand = c(0, 0)) + # y軸目盛
  coord_flip(clip = "off") + # 軸の入れ替え
  theme(
    axis.title.x = element_blank(), # 横軸のラベル
    axis.title.y = element_blank(), # 縦軸のラベル
    axis.text.x = element_blank(), # 横軸の目盛ラベル
    axis.text.y = element_blank(), # 縦軸の目盛ラベル
    axis.ticks.x = element_blank(), # 横軸の目盛指示線
    panel.grid.major.x = element_blank(), # 横軸の主目盛線
    panel.grid.minor.x = element_blank(), # 横軸の補助目盛線
    panel.grid.minor.y = element_blank(), # 縦軸の補助目盛線
    panel.border = element_blank(), # グラフ領域の枠線
    panel.background = element_blank(), # グラフ領域の背景
    plot.title = element_text(color = "black", face = "bold", size = 20, hjust = 0.5), # 全体のタイトル
    plot.subtitle = element_text(color = "black", size = 15, hjust = 0.5), # 全体のサブタイトル
    plot.background = element_rect(fill = "gray92"), # 全体の背景
    plot.margin = margin(t = 10, r = 20, b = 10, l = 120, unit = "pt"), # 全体の余白
    legend.position = "none" # 凡例の位置
  ) + # 図の体裁
  labs(
    title = paste0(group_name_val, "のメンバーカラー一覧"), 
    subtitle = paste0("総メンバー数:", max(color_df[["member_id"]]), "人")
  ) # ラベル

モーニング娘。の歴代メンバーカラー

 coord_flip()でx軸とy軸を入れ替えることで、横方向に伸びる棒グラフになります。

利用例

 カラーコードの対応表の利用例としては次の記事を参照してください。

www.anarchive-beta.com

 以降は、カラーパレットとしての利用例の試作です。

 利用するメンバーカラー(カラーコード)を取り出します。

# カラーパレットを作成
color_vec <- color_df |> 
  dplyr::filter(member_gen == 10) |> # 期を指定
  dplyr::pull(color_code) |> # ベクトルとして取得
  (\(x){x[c(2, 3, 1, 4)]})() # 色順を並べ替え
color_vec
## [1] "#0233CB" "#00A59E" "#FFF33F" "#FFA500"

 この例では、モーニング娘。の10期メンバーの色を抽出して、ラムダ関数\()の記法で順番を入れ替えます。

 2乗和を計算して、最大値で割ります。

# 値を作成
res_df <- tidyr::expand_grid(x = 1:100, y = 1:100) |> # 2次元の点を作成
  dplyr::mutate(z = x^2 + y^2, z = z / max(z)) # 2乗和を最大値で割る
res_df
## # A tibble: 10,000 × 3
##        x     y       z
##    <int> <int>   <dbl>
##  1     1     1 0.0001 
##  2     1     2 0.00025
##  3     1     3 0.0005 
##  4     1     4 0.00085
##  5     1     5 0.0013 
##  6     1     6 0.00185
##  7     1     7 0.0025 
##  8     1     8 0.00325
##  9     1     9 0.0041 
## 10     1    10 0.00505
## # … with 9,990 more rows

 expand_grid()で格子状の点を作成します。
 mutate()パッケージを使って、2乗和の計算結果列を作成します。

 2乗和のヒートマップを作成します。

# ヒートマップを作成
ggplot(res_df, aes(x = x, y = y, color = z, fill = z)) + 
  geom_tile() + # ヒートマップ
  scale_color_gradientn(colours = color_vec) + # グラデーション
  scale_fill_gradientn(colours = color_vec) + # タイルの色
  coord_fixed(ratio = 1) # アスペクト比

カラーパレットの利用例

 geom_tile()でヒートマップを作成できます。
 scale_color_gradientn()scale_color_gradientn()でグラデーションに使う色を指定します。
 (綺麗なグラデーションにするには色の順序を調整する必要があるため、自動で処理できません。カラーコードのソートができるといいのですが。)

おわりに

 このブログを開設して数記事目に書いた内容を書き換えようと思ったら、はてな記法で書いていて後からMarkdown記法に変更できなかったので、新たな記事として更新します。過去記事の方を削除した方が検索デブリにならずいいのでしょうが、そもそもアクセスがほぼないしこの記事へのリンクを張った上で、過去の自分の頑張りを日記として残しておくのもたまにはありかなと今のところ思っています。
 書き換えの際に、ハロプロの歴史を可視化しようシリーズに組み込みました。

 さて数時間オーバーしてしまいましたが寝るまでが今日ということで、2022年7月13日は元モーニング娘。のリーダーである道重さゆみさんの33歳のお誕生日です!!!

 おめでとうございます!!!いつまでもお美しくかつとっても可愛いです🐰