まずはどんなグラフか？
その特徴は
* ネオンカラーを使う。
* 基本線の前後に透明度の低い線を引いて、ボケ感を出す。
* 透明度の低い面装飾を追加して、ボケ感を追加する。
* 使用するフォントをサイバーっぽい物を使用する。
投稿のキッカケ
- matplotlib公式サイトにmatplotblogがあるのは、皆さんご存知でした？
- このサイトの最新の投稿がMatplotlib Cyberpunk Styleで上記のグラフの作成について解説しています。(2020/03/27 投稿)
- NHKスペシャル▽新型コロナウイルス瀬戸際の攻防〜感染拡大阻止（2020/4/11 PM9:00-PM10:04)でもサイバーパンク風グラフが使用されていました。(2020/4/11放送)
[引用：NHKスペシャル：NHKプラス再配信から] - R界隈でもサイバーパンク風グラフパッケージがリリースされています。(リリース日:2020/04/02)
- 立て続けにこのようなグラフイメージを見るにつけ、この状況なので「見えない敵」に準えてサイバー感のあるグラフニーズがあるようです。
レシピ
- まず基本的なプロットを描く
- ダーク系の背景を設定する
- カラーをネオン色系に設定する
- ネオン管のようにグロー感を出す（透明度の低い線を基本線の前後に引く）
- サイバー感を強めるため、面領域を透明度の低いネオンカラーで塗りつぶす
公式ブログの投稿には、全コードが記載されていますので参考にしてください。
自分的にカスタマイズ
- このサイバーパンク風にアニメーションを加えたらどんな感じ？
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.animation as animation
# from IPython.display import HTML
fig = plt.figure(figsize=(8, 4.5), dpi=144)
ax = fig.add_subplot(111)
plt.style.use("dark_background")
for param in ['text.color', 'axes.labelcolor', 'xtick.color', 'ytick.color']:
plt.rcParams[param] = '0.9' # very light grey
for param in ['figure.facecolor', 'axes.facecolor', 'savefig.facecolor']:
plt.rcParams[param] = '#212946' # bluish dark grey
colors = [
'#08F7FE', # teal/cyan
'#FE53BB', # pink
'#F5D300', # yellow
'#00ff41', # matrix green
]
n_shades = 10
diff_linewidth = 1.05
alpha_value = 0.3 / n_shades
ims = []
def plot(data):
plt.cla()
rand = np.random.randint(1,8,(50,))
for n in range(1, n_shades+1):
# 基本線の前後にアルファ値の低い線を描画する
im = plt.plot(rand, color=colors[3], linewidth=2+(diff_linewidth*n), alpha=alpha_value)
# 基本線を描画する
im2 = plt.plot(rand, color=colors[3], marker='o', markersize=3)
# 線以下を描画する
im3 = ax.fill_between(x=np.arange(50), y1=rand, y2=[0]*len(rand), color=colors[3], alpha=0.03)
ims.append(im)
ims.append(im2)
ims.append(im3)
ani = animation.FuncAnimation(fig, plot, interval=50)
ax.grid(color='#2A3459')
ax.set_xlim([ax.get_xlim()[0] - 0.2, ax.get_xlim()[1] + 0.2]) # to not have the markers cut off
ax.set_ylim(0)
# グラフ枠を消去
ax.spines["top"].set_linewidth(0)
ax.spines["right"].set_linewidth(0)
ax.spines["left"].set_linewidth(0)
ax.spines["bottom"].set_linewidth(0)
ani.save('./cyberpunk.mp4', writer='ffmpeg', fps=15)
plt.show()
改良点：（公式ブログの骨格を残して、アニメしただけです）
* 基準線の前後にアルファ値の低い線を描く。
* 基本線を描く。
* 面領域を塗りつぶす。
* それをimsに追加して、それをFuncAnimationで実行する。
* なぜかグラブ領域の枠が表示されるので非表示設定をしました。
* 作成したgif画像がQiita.comには上げられなかったのでmp4形式で作成
* その結果グラフ領域の背景が白くに変更されたため、styleをコメントアウトして以下の動画となりました。
まとめ
- 「全然、サイバーぽっく無いじゃん！」というコメントはスルーで、、、
- サイバーパンク風は意外と簡単に実装できる。
- 「見えない敵と戦う」この状況に、ならではのニーズがあると思いました。