最近サイバーパンク風グラフ流行っていません？

13519 ワード
ggplot2 R Python matplotlib Python テキストリンク

まずはどんなグラフか？

その特徴は
* ネオンカラーを使う。
* 基本線の前後に透明度の低い線を引いて、ボケ感を出す。
* 透明度の低い面装飾を追加して、ボケ感を追加する。
* 使用するフォントをサイバーっぽい物を使用する。

投稿のキッカケ

  • 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)

ggCyberPunk
alt

  • 立て続けにこのようなグラフイメージを見るにつけ、この状況なので「見えない敵」に準えてサイバー感のあるグラフニーズがあるようです。

レシピ

  • まず基本的なプロットを描く
  • ダーク系の背景を設定する
  • カラーをネオン色系に設定する
  • ネオン管のようにグロー感を出す（透明度の低い線を基本線の前後に引く）
  • サイバー感を強めるため、面領域を透明度の低いネオンカラーで塗りつぶす

公式ブログの投稿には、全コードが記載されていますので参考にしてください。

自分的にカスタマイズ

  • このサイバーパンク風にアニメーションを加えたらどんな感じ？
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をコメントアウトして以下の動画となりました。

まとめ

  • 「全然、サイバーぽっく無いじゃん！」というコメントはスルーで、、、
  • サイバーパンク風は意外と簡単に実装できる。
  • 「見えない敵と戦う」この状況に、ならではのニーズがあると思いました。