カテゴリー

当サイトはアフィリエイトプログラムによる収益を得ています〈景品表示法に基づく表記です）

Plotly全般

【plotly&pattern】棒グラフとかのパターンまとめ

2021年12月17日

徹底レビュー
【SONY WF-1000XM5】これは最高のイヤホン（良い意味でも悪い意味でも

続きを見る
デスク環境
【デスクツアー2023上半期】着実にアップデートしているデスク環境 Desk Updating #3

続きを見る

こんな人にオススメ

plotlyの棒グラフとかで使えるパターンってどんな種類があってどうやってカスタムするの？

ということで、今回はplotlyの棒グラフ（px.bar, go,Bar）などで使われるパターン（Patterns, Hatching, Texture）=模様について解説する。

基本的にグラフってのは色やマーカーでプロットを区別するけど、面がある棒グラフなどではパターンでプロットの区別をする事が可能。

goとpxの棒グラフについては以下の記事参照。

【plotly&棒グラフ】go.Barでバーチャートを作成

続きを見る
【plolty&棒グラフ】px.barでバーチャートを作成

続きを見る

今回は公式の「Patterns, Hatching, Texture in Python」をベースにして解説する。なお、詳しいドキュメントは「Python Figure Reference: bar Traces」参照。

python環境は以下。

  • Python 3.10.0
  • pandas 1.3.4
  • plotly 5.4.0
  • plotly-orca 3.4.2

運営者のメガネです。YouTube、Twitter、Instagram、自己紹介はこちら、お問い合わせはこちらから。

運営者メガネ

作成したコード全文

下準備（import）

import pandas as pd
import plotly.graph_objects as go
import plotly.express as px
import plotly.io as pio

まずは下準備としてのimport関連。plotlyだけでデータフレームは作成できるが、pandasでデータフレームを自作するタイミングがあるのでpandasをimport。

今回は基本的にpxで解説するが、最後にgoでも同じようにできるよってことに軽く触れるためgoもimport。

pioはグラフ保存のために使用。詳しくは以下の記事参照。

plotlyでグラフを静止画として保存する際に出るポップアップ
【plotly&orca】plotlyで静止画保存（orca）

続きを見る

シンプルに棒グラフを作成


まずはシンプルに棒グラフを作成。ただの棒グラフの場合、パターンはなく全て塗りつぶしの状態で作成される。

px.barの引数colorを指定していないと、色分けされないので注意が必要。詳しくは以下の記事で解説している。

【plolty&棒グラフ】px.barでバーチャートを作成

続きを見る

pxの場合、グラフはデータフレームを用いて作成することが多い。そのため、ここでもデータフレームからグラフを作成し、フォントサイズを大きくしてグラフ表示・保存を行なった。

フォントサイズの変更はfig.update_layoutを使用したが、fig.updateシリーズについては以下の記事参照。

【plotly&fig作成と更新】add_traceやupdate_layoutの使い方

続きを見る

 
import plotly.express as px
import plotly.io as pio

# シンプルに棒グラフを作成

df = px.data.medals_long()
print(df)
#         nation   medal  count
# 0  South Korea    gold     24
# 1        China    gold     10
# 2       Canada    gold      9
# 3  South Korea  silver     13
# 4        China  silver     15
# 5       Canada  silver     12
# 6  South Korea  bronze     11
# 7        China  bronze      8
# 8       Canada  bronze     12

fig = px.bar(
    df,  # 使用するデータフレーム
    x='medal', y='count',  # 横軸、縦軸の列名
    color='nation',  # 色分けする列名
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_simple"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

pattern_shapeでパターンを追加


この記事の本題である、棒グラフへのパターンの追加はpx.barの引数pattern_shapeで行う。pattern_shapeにパターン分けに使いたいデータフレームの列名を指定する。

ここではnation列を指定。こうすることで、横軸のmedalに対してnationごとに異なったパターンがつけられる。ただし、初めのデータは模様がつくわけではなく無地であることには注意。

import plotly.express as px
import plotly.io as pio

# パターンを追加

df = px.data.medals_long()
print(df)
#         nation   medal  count
# 0  South Korea    gold     24
# 1        China    gold     10
# 2       Canada    gold      9
# 3  South Korea  silver     13
# 4        China  silver     15
# 5       Canada  silver     12
# 6  South Korea  bronze     11
# 7        China  bronze      8
# 8       Canada  bronze     12

fig = px.bar(
    df,  # 使用するデータフレーム
    x='medal', y='count',  # 横軸、縦軸の列名
    color='nation',  # 色分けする列名
    pattern_shape='nation'  # パターン分けする列名
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_pattern_shape"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

pattern_shape_sequenceでパターンを指定


引数pattern_shape_sequenceに使いたいパターンを格納した配列を指定することで、自分好みにパターンを決められる。使用できるパターンは'', '/', '\\\\', 'x', '-', '|', '+', '.'の8つ。

ただ、’’は指定してもグラフ化されないので注意。上のグラフだとy=1の棒グラフが表示されていない。

上のグラフは全てのデータをx=1で作成したので横軸はx=1のみ。px.barだとデフォルトで積み上げ式の棒グラフになってしまうので、引数barmode=’group’で横並びになるようにした。

import pandas as pd
import plotly.express as px
import plotly.io as pio

# pattern_shape_sequenceでパターン指定
# <https://plotly.com/python/reference/bar/#bar-marker-pattern-shape>

# データフレームの列作成
x = (1, 1, 1, 1, 1, 1, 1, 1)
y = (1, 2, 3, 4, 5, 6, 7, 8)
patterns = ('', '/', '\\\\', 'x', '-', '|', '+', '.')
# データフレーム作成
df = pd.DataFrame(dict(x=x, y=y, pattern=patterns))
print(df)
#    x  y pattern
# 0  1  1
# 1  1  2       /
# 2  1  3       \\
# 3  1  4       x
# 4  1  5       -
# 5  1  6       |
# 6  1  7       +
# 7  1  8       .

fig = px.bar(
    df, x='x', y='y',  # データフレームと横軸・縦軸
    color='pattern',  # 色分けする列名
    pattern_shape='pattern',  # パターン分けする列名
    barmode='group',  # 棒グラフは横に並べる
    pattern_shape_sequence=patterns  # パターンを指定
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_pattern_shape_sequence"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

パターンとカラーバーはかぶる


パターンから話は逸れるが、px.barの引数colorを文字列から数値に変更すると自動でカラーバーが作られる。

しかし、カラーバーと凡例は被ってしまうので調節する必要がある。調節は次で行う。

import pandas as pd
import plotly.express as px
import plotly.io as pio

# colorに数値を指定するとカラーバーと凡例が被る

# データフレームの列作成
x = (1, 1, 1, 1, 1, 1, 1, 1)
y = (1, 2, 3, 4, 5, 6, 7, 8)
patterns = ('', '/', '\\\\', 'x', '-', '|', '+', '.')
# データフレーム作成
df = pd.DataFrame(dict(x=x, y=y, pattern=patterns))

fig = px.bar(
    df, x='x', y='y',  # データフレームと横軸・縦軸
    color='y',  # 色分けする列名を数値であるyに変更
    pattern_shape='pattern',  # パターン分けする列名
    barmode='group',  # 棒グラフは横に並べる
    pattern_shape_sequence=patterns  # パターンを指定
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_pattern_shape_sequence_colorbar"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

凡例の位置とカラーバーの長さを調節


凡例とカラーバーのかぶり問題が解決するには色々なアプローチがある。ここでは凡例の位置とカラーバーの長さを変更することで解決することにする。

凡例の位置はlegendのxで位置自体を、xanchorで位置の基準を変更。カラーバーの長さはcoloraxisのcolorbarのlenで変更。

なお、coloraxis_colorbar_lenはcolorbaraxis=dict(colorbar=dict(len=0.5))と書いても問題にない。マジックアンダースコアという機能だ。

import pandas as pd
import plotly.express as px
import plotly.io as pio

# データフレームの列作成
x = (1, 1, 1, 1, 1, 1, 1, 1)
y = (1, 2, 3, 4, 5, 6, 7, 8)
patterns = ('', '/', '\\\\', 'x', '-', '|', '+', '.')
# データフレーム作成
df = pd.DataFrame(dict(x=x, y=y, pattern=patterns))

fig = px.bar(
    df, x='x', y='y',  # データフレームと横軸・縦軸
    color='y',  # 色分けする列名を数値であるyに変更
    pattern_shape='pattern',  # パターン分けする列名
    barmode='group',  # 棒グラフは横に並べる
    pattern_shape_sequence=patterns  # パターンを指定
)
# 凡例の横位置をx=1にして、基準を右側に
fig.update_layout(legend=dict(x=1, xanchor='right'))
# カラーバーを短くする
fig.update_layout(coloraxis_colorbar_len=0.5)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_pattern_shape_sequence_colorbar_adjust"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

pattern_shape_mapでパターンとデータを指定


pattern_shape_mapを使うことで、データとパターンを紐づけることが可能。ここではそれぞれの国ごとにパターンを紐づけている。

こうすることで、自分の思った通りのパターンでグラフを作成することができる。

import plotly.express as px
import plotly.io as pio

# pattern_shape_mapでパターンの名称指定

df = px.data.medals_long()
print(df)
#         nation   medal  count
# 0  South Korea    gold     24
# 1        China    gold     10
# 2       Canada    gold      9
# 3  South Korea  silver     13
# 4        China  silver     15
# 5       Canada  silver     12
# 6  South Korea  bronze     11
# 7        China  bronze      8
# 8       Canada  bronze     12

# この組み合わせでパターンを決める
pattern_shape_map = {
    'China': '.',
    'Canada': '/',
    'South Korea': '+'
}

fig = px.bar(
    df, x='medal', y='count',  # データフレームと横軸・縦軸
    color='nation',  # 色分けする列名
    pattern_shape='nation',  # パターン分けする列名
    pattern_shape_map=pattern_shape_map  # パターンの名称指定
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_pattern_shape_map"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

pattern_shape_mapで部分的にパターンを指定


pattern_shape_mapでは全てのデータに対してパターンを紐づけなくてはいけない、というわけではない。以下のように一部のデータにのみ紐付けすることも可能。

上のグラフではChinaとxを紐づけ、その他の国は指定なしでグラフを作成した。その結果、指定していない国は自動でパターンが追加される。

import plotly.express as px
import plotly.io as pio

# pattern_shape_mapの部分的な指定も可能

df = px.data.medals_long()

# この組み合わせでパターンを決める
pattern_shape_map = {
    'China': 'x',
}

fig = px.bar(
    df, x='medal', y='count',  # データフレームと横軸・縦軸
    color='nation',  # 色分けする列名
    pattern_shape='nation',  # パターン分けする列名
    pattern_shape_map=pattern_shape_map  # パターンの名称指定
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_pattern_shape_map_part"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

pattern_shape_mapにはpattern_shapeが必要


なお、余談になるがpattern_shape_mapを使用する際にはpx.barの引数pattern_shapeが必要。もしこの引数を使わなかった場合はパターンが使われず、塗りつぶしだけになる。

上のグラフではpattern_shape_mapで国名とパターンの紐付けを行ったが、pattern_shapeを指定しなかったのでグラフが塗りつぶしに。そしてパターン指定が反映されていない。

import plotly.express as px
import plotly.io as pio

# pattern_shape_mapはpattern_shape必須

df = px.data.medals_long()

# この組み合わせでパターンを決める
pattern_shape_map = {
    'China': 'x',
}

fig = px.bar(
    df, x='medal', y='count',  # データフレームと横軸・縦軸
    color='nation',  # 色分けする列名
    # # pattern_shapeを指定しないとパターンは追加されない
    # pattern_shape='nation',  # パターン分けする列名
    pattern_shape_map=pattern_shape_map  # パターンの名称指定
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_pattern_shape_map_noshape"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

棒グラフのパターンに色付け

pattern_fillmode='replace'でパターンに色付け


ここまでは棒グラフに色をつけ、その上から白色のパターンをつけてグラフを作成した。上のグラフはその逆でパターンに色をつけている。

パターンに色をつけるにはfig.update_tracesでmarker_pattern_fillmode='replace'と指定する必要がある。なお、_が多かったので以下のコードではmarker=dictの形式でコードを書いている。

ただし、pattern_shapeでパターンを指定した場合、最初のデータに対しては塗りつぶしが適用されるので注意。ここではSouth Koreaのデータが塗りつぶしになっている。

import plotly.express as px
import plotly.io as pio

# パターンに色を付ける

df = px.data.medals_long()
print(df)
#         nation   medal  count
# 0  South Korea    gold     24
# 1        China    gold     10
# 2       Canada    gold      9
# 3  South Korea  silver     13
# 4        China  silver     15
# 5       Canada  silver     12
# 6  South Korea  bronze     11
# 7        China  bronze      8
# 8       Canada  bronze     12

fig = px.bar(
    df, x='medal', y='count', color='nation',
    pattern_shape='nation',
)
# pattern_fillmodeをreplaceに変更
# デフォルトはoverlay
fig.update_traces(marker=dict(pattern_fillmode='replace'))
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_pattern_fillmode"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

パターン指定と枠線の追加


全てのデータに対してパターンに色付けしたいならpx.barの引数pattern_shape_sequenceを使用してデータとパターンの紐付けを行うといい。

また、パターンでデータの区別をすると、データ同士の境界線がわかりにくい。そんな時はfig.update_tracesのmarkerの引数line_colorで色を指定して境界線の色を指定すると良い。ここでは’grey’を指定。

import plotly.express as px
import plotly.io as pio

# パターン指定と枠線の追加

df = px.data.medals_long()

fig = px.bar(
    df, x='medal', y='count', color='nation',
    pattern_shape='nation',
    pattern_shape_sequence=['.', 'x', '+'],  # パターン指定
)

fig.update_traces(
    marker=dict(
        line_color='grey',  # 棒グラフの枠線
        pattern_fillmode='replace'  # 色分けをパターンに変更
    )
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_pattern_fillmode_line_color"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

simple_whiteで白黒のグラフに


plotlyのグラフにはtemplateを反映させることができる。このテンプレートの中の’simple_white’を使うことで白黒（モノクロ）なグラフに仕上げることが可能。plotlyのテンプレートについては以下。

テンプレート適用後のplotlyでのグラフ
【plotlyテンプレート】plotlyのグラフ作成テンプレート

続きを見る
【plotly&グラフテーマ】plotly既存のthemasをグラフ化

続きを見る

白黒なグラフにするためにmarkerのcolorで棒グラフのパターンの色やline_colorで棒グラフの枠線（境界線）を’black’に変更。あとはパターンに色付けするためにpattern_fillmode='replace'とする。

import plotly.express as px
import plotly.io as pio

# 白黒のグラフに変更

df = px.data.medals_long()

fig = px.bar(
    df, x='medal', y='count', color='nation',
    pattern_shape='nation',
    pattern_shape_sequence=['.', 'x', '+'],  # パターン指定
    template='simple_white'  # グラフのテンプレートを指定
)

fig.update_traces(
    marker=dict(
        color='black',  # 棒グラフの塗りつぶしの色は黒に統一
        line_color='black',  # 棒グラフの枠線の色
        pattern_fillmode='replace'  # 色分けをパターンに変更
    )
)

# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_pattern_fillmode_simple_white"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

marker_pattern_fgcolorでパターンに色付け


marker_pattern_fgcolorを使うことで棒グラフの塗りつぶしはそのままに、パターンの色付けが可能。上の例だとパターンに’red’を採用。わかりにくいが、各棒グラフの真ん中の赤のデータではパターンが見づらくなっている。

後で紹介するcolor_discrete_sequenceと組み合わせることで、背景色とパターンの色の同時指定も可能。

import plotly.express as px
import plotly.io as pio

df = px.data.medals_long()
print(df)
#         nation   medal  count
# 0  South Korea    gold     24
# 1        China    gold     10
# 2       Canada    gold      9
# 3  South Korea  silver     13
# 4        China  silver     15
# 5       Canada  silver     12
# 6  South Korea  bronze     11
# 7        China  bronze      8
# 8       Canada  bronze     12

fig = px.bar(
    df, x='medal', y='count', color='nation',
    pattern_shape='nation',
    pattern_shape_sequence=[".", "x", "+"],
)

# パターン自体の色を指定
fig.update_traces(marker_pattern_fgcolor='red')
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_marker_pattern_fgcolor"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

marker_pattern_fgcolorに配列を指定


marker_pattern_fgcolorに配列を指定すると、配列の最後の色が反映されるようだ。上のグラフだと'pink', 'red', 'white'の3色を指定しているが、反映されているのはwhiteのみ。

なお、色がわかりやすいように次に解説するcolor_discrete_sequenceで背景色をblackにしている。

import plotly.express as px
import plotly.io as pio

# marker_pattern_fgcolorで配列を指定すると最後の色のみ反映

df = px.data.medals_long()

fig = px.bar(
    df, x='medal', y='count', color='nation',
    pattern_shape='nation',
    pattern_shape_sequence=[".", "x", "+"],
    color_discrete_sequence=('black',),  # 棒の色を変更
)

# パターン自体の色を配列で指定すると、最後の色だけ反映
fig.update_traces(marker_pattern_fgcolor=('pink', 'red', 'white'))
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_marker_pattern_fgcolor_array"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

棒グラフの背景色の変更

color_discrete_sequenceで背景色を変更


px.barの引数color_discrete_sequenceで色を指定することで棒グラフ自体の塗りつぶしが可能。ただし、色は配列で指定しないといけないので、ここでは(’black’,)としてtupleで色を指定した。

1色だけの指定の場合、全てのデータに対してその色をが反映される。今回は黒だけ指定したので黒一色となる。

import plotly.express as px
import plotly.io as pio

df = px.data.medals_long()
print(df)
#         nation   medal  count
# 0  South Korea    gold     24
# 1        China    gold     10
# 2       Canada    gold      9
# 3  South Korea  silver     13
# 4        China  silver     15
# 5       Canada  silver     12
# 6  South Korea  bronze     11
# 7        China  bronze      8
# 8       Canada  bronze     12

fig = px.bar(
    df, x='medal', y='count', color='nation',
    pattern_shape='nation',
    # 棒グラフの背景色を変更（配列にしないとblackのbから色を判定するからエラー）
    color_discrete_sequence=('black',),
)

# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_color_discrete_sequence"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

marker_pattern_bgcolorでパターン部分だけ色付け


棒グラフの塗りつぶしの方法は他にもあり、fig.update_tracesでmarker_pattern_bgcolorを使用することも可能。

ただし、この場合はパターンになっている部分にだけ色がつくので、pattern_shapeの指定で生まれる初めの塗りつぶしだけのデータは元の色のままなことに注意。

ここではSouth Koreaだけが塗りつぶしじゃないから、marker_pattern_bgcolorの色指定が反映されていない。

import plotly.express as px
import plotly.io as pio

# update_tracesで変更するとパターン部分だけ色付け

df = px.data.medals_long()

fig = px.bar(
    df, x='medal', y='count', color='nation',
    pattern_shape='nation',
)

# 棒グラフの背景色を変更
fig.update_traces(marker_pattern_bgcolor='black')
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_marker_pattern_bgcolor"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

color_discrete_sequenceで複数要素の色指定


引数color_discrete_sequenceで1色だけの指定をすると全ての棒グラフに色が反映された。では複数の色にした場合はどうなるのか。

上のグラフでは('orange', 'violet')で2要素の配列を色として指定した。グラフのデータ数は3なので色が足りていない場合は、色が繰り返される。orangeが初めの要素なのでSouth Koreaに加えCanadaでも繰り返されている。

なお、3データに対して3色指定する場合はもちろんそれぞれのデータに色が振り分けられる。

import plotly.express as px
import plotly.io as pio

# color_discrete_sequenceに複数要素を渡すと1データずつ色分け

fig = px.bar(
    df, x='medal', y='count', color='nation',
    pattern_shape='nation',
    pattern_shape_sequence=['.', 'x', '+'],  # パターン指定
    # 棒グラフの背景色を複数要素で指定
    color_discrete_sequence=('orange', 'violet'),
)

fig.update_traces(
    marker=dict(
        line_color='black',  # 棒グラフの枠線の色
    )
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_color_discrete_sequence_array"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

pattern_bgcolorで複数要素の色指定


一方でpattern_bgcolorで複数要素の色指定をすると各xごとに色分けされる。上のグラフだとgold, silver, bronzeごとに色分けされる。

ただし、足りない色に関してはcolor_discrete_sequenceのように補填されるわけではなく、無色透明のグラフとなる。

ここではgoldとsilverのみ色をつけるようにしたが、bronze分の色は指定しなかった。その結果、bronzeのみ無色透明となる。

import plotly.express as px
import plotly.io as pio

# pattern_bgcolorに複数要素を渡すと1つの棒ずつ色分け

fig = px.bar(
    df, x='medal', y='count', color='nation',
    pattern_shape='nation',
    pattern_shape_sequence=['.', 'x', '+'],  # パターン指定
)

fig.update_traces(
    marker=dict(
        # 棒グラフの背景色を複数要素で指定
        pattern_bgcolor=('gold', 'silver'),
        line_color='black',  # 棒グラフの枠線の色
    )
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_marker_pattern_bgcolor_array"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

solidityとsizeで背景とパターンの大きさを指定

solidityで背景の割合を変更


fig.update_tracesでmarker_pattern_solidityを指定することで、パターンに対する背景の割合を変更することが可能。上のグラフだと右に行くほどsolidityの値が大きくなる用にしている。

solidityが大きくなると背景の割合が大きくなるので、パターンの大きさが小さくなる。ただ、棒グラフの棒の色が薄くなるから、solidityは背景的な意味じゃないかもしれない。堅牢性ってどういう意味だ。

import pandas as pd
import plotly.express as px
import plotly.io as pio

# solidityでパターンに対する背景の割合を変更
# データフレームの列作成
x = (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11)
y = (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11)
solidity = (0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0)
# データフレーム作成
df = pd.DataFrame(dict(x=x, y=y, solidity=solidity,))
print(df)
#      x   y  solidity
# 0    1   1       0.0
# 1    2   2       0.1
# 2    3   3       0.2
# 3    4   4       0.3
# 4    5   5       0.4
# 5    6   6       0.5
# 6    7   7       0.6
# 7    8   8       0.7
# 8    9   9       0.8
# 9   10  10       0.9
# 10  11  11       1.0

fig = px.bar(
    df, x='x', y='y',  # color=None,
    pattern_shape_sequence='+',  # +パターンを例にする
    barmode='group',  # 棒グラフは横に並べる
)
# solidityで背景の密度を変更
fig.update_traces(marker_pattern_solidity=df['solidity'])
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_solidity"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

sizeでパターンのサイズを変更


一方で、fig.update_tracesでmarker_pattern_sizeを指定することでパターンの大きさを変更することが可能。sizeで指定する値が大きくなるにつれて、パターンが大きくなる。

上のグラフだと右にいくにしたがってパターンが大きくなるので、パターンが視認しやすい。

import pandas as pd
import plotly.express as px
import plotly.io as pio

# データフレームの列作成
x = (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11)
y = (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11)
solidity = (0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0)
# データフレーム作成
df = pd.DataFrame(dict(x=x, y=y, solidity=solidity,))
print(df)
#      x   y  solidity
# 0    1   1       0.0
# 1    2   2       0.1
# 2    3   3       0.2
# 3    4   4       0.3
# 4    5   5       0.4
# 5    6   6       0.5
# 6    7   7       0.6
# 7    8   8       0.7
# 8    9   9       0.8
# 9   10  10       0.9
# 10  11  11       1.0

fig = px.bar(
    df, x='x', y='y',  # color=None,
    pattern_shape_sequence='+',  # +パターンを例にする
    barmode='group',  # 棒グラフは横に並べる
)
# sizeでパターンのサイズを変更
fig.update_traces(marker_pattern_size=df['y'])
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_size"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

solidityとsizeを同時に使用


solidityとsizeを両方使用することで、どちらの特徴も持つグラフを作成することができる。

ただ、上のグラフのようにsizeによる影響があまりないように感じる。パターンが大きくなるというよりもパターンによってできる隙間が大きくなっている印象。

import pandas as pd
import plotly.express as px
import plotly.io as pio

# solidityとsizeを両方使用

# データフレームの列作成
x = (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11)
y = (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11)
solidity = (0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0)
# データフレーム作成
df = pd.DataFrame(dict(x=x, y=y, solidity=solidity,))
print(df)
#      x   y  solidity
# 0    1   1       0.0
# 1    2   2       0.1
# 2    3   3       0.2
# 3    4   4       0.3
# 4    5   5       0.4
# 5    6   6       0.5
# 6    7   7       0.6
# 7    8   8       0.7
# 8    9   9       0.8
# 9   10  10       0.9
# 10  11  11       1.0

fig = px.bar(
    df, x='x', y='y',  # color=None,
    pattern_shape_sequence='+',  # +パターンを例にする
    barmode='group',  # 棒グラフは横に並べる
)
# solidityとsizeを指定
fig.update_traces(
    marker_pattern_solidity=df['solidity'],
    marker_pattern_size=df['y']
)
# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_solidity_size"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

goを使ってパターンの編集


ここまでpxを使ってパターンの解説をした。ただ、goを使っても棒グラフやパターンの編集は可能。go.Barを使った棒グラフについては以下の記事参照。

【plotly&棒グラフ】go.Barでバーチャートを作成

続きを見る

以下のように初めにgo.Figure()でfigを作成してからグラフを作成してもいいし、次に紹介するように、プロットデータなどを予めまとめてから最後にfigにするという方法もある。

上のグラフではmarker_pattern_shapeを使ってパターンの指定を行った。

import plotly.express as px
import plotly.io as pio

# goで作成パターン付きの棒グラフ作成

fig = go.Figure()

# プロット作成
x = ['a', 'b']
fig.add_trace(go.Bar(x=x, y=[1, 2], marker_pattern_shape='.'))
fig.add_trace(go.Bar(x=x, y=[3, 1], marker_pattern_shape='x'))
fig.add_trace(go.Bar(x=x, y=[2, 3], marker_pattern_shape='+'))

# グラフ全体とホバーのフォントサイズ変更
fig.update_layout(font_size=20, hoverlabel_font_size=20)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_go_fig"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

最後にfigを作成


先ほど書いたように、予めプロットデータなどをまとめたから最後にfigを作成してもいい。できるグラフは同じだが、各自で使いやすい方法をとっていただきたい。

import plotly.graph_objects as go
import plotly.io as pio

# 最後にfigを作成してもいい

# プロット作成
x = ['a', 'b']
plot = [
    go.Bar(x=x, y=[1, 2], marker_pattern_shape='.'),
    go.Bar(x=x, y=[3, 1], marker_pattern_shape='x'),
    go.Bar(x=x, y=[2, 3], marker_pattern_shape='+'),
]

# レイアウト設定
layout = go.Layout(font_size=20, hoverlabel_font_size=20)

# figの作成
fig = go.Figure(data=plot, layout=layout)
fig.show()

# グラフ保存
prefix = 'plotly-patterns'  # 保存ファイル名の接頭辞
save_name = f"{prefix}_go_plot"
pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'
pio.write_html(fig, f"{save_name}.html")
pio.write_image(fig, f"{save_name}.png")

色以外にも違いを

今回はplotlyの棒グラフなどで使われるパターン（模様）についてpx.barを中心に使って解説した。色だけだとどうしても違いが大きく出てしまう場面でもパターンを使えば同類ってのがわかりやすい。

例えば赤系の色で同類を括ろうとするとオレンジっぽい要素が入ってきたりして同類感が失われることもある。また、赤系と青系で別物だけど、パターン+という観点では同類っていうように違う切り口のグラフも作成可能。

今回の記事で棒グラフでのパターンの入れ方を理解していただけると幸いだ。

関連記事

【plotly&fill】goで領域を塗りつぶし

続きを見る
【plotly&3D】goで3Dグラフを作成

続きを見る
【plotly&ガントチャート】px.timelineでGantt Chartsを作成

続きを見る
【随時更新　備忘録】plotlyのグラフ即席作成コード

続きを見る
【plotly&go.Scatter】plotlyの散布図グラフの描き方

続きを見る
【plotly&ボタン】plotlyのupdatemenusにbuttonsを追加

続きを見る
【plotly&スライダー】plotlyのslidersにスライダーを追加

続きを見る
【plotly&ボタン】plotlyのupdatemenusに2回押し対応のbuttonsを追加

続きを見る

ガジェット

2023/9/18

【デスクツアー2022下半期】モノは少なく、でも効率的に Desk Updating #0

今回はガジェットブロガーなのにデスク環境を構築していない執筆者の ...

ライフハック

2023/9/16

【Audible vs YouTube Premium】耳で聴く音声学習コンテンツを比較

ワイヤレスイヤホンが普及し耳で学習することへのハードルが格段に下 ...

完全ワイヤレスイヤホン（TWS）

2023/9/18

【SENNHEISER MOMENTUM True Wireless 3レビュー】全てが整ったイヤホン

今回は高音質・高機能なSENNHEISERのフラグシップ完全ワイヤレスイヤホン「SENNH ...

ライフハック

2023/3/11

【YouTube Premiumとは】メリットしかないから全員入れ

今回はYouTube Premiumを実際に使ってみてどうなのか、どんなメリット/デメリット ...

マウス

2023/8/17

【Logicool MX ERGOレビュー】疲れない作業効率重視トラックボールマウス

こんな人におすすめ トラックボールマウスの王道Logicool MX ERGOが気になるけどऩ ...

ベストバイ

2023/9/18

【ベストバイ2022】今年買って良かったモノのトップ10

2022年ベストバイ この1年を振り返って執筆者は何を買ったのか。ガジェッ& ...

スマホ

2023/1/15

【楽天モバイル×povo2.0の併用】月1,000円の保険付きデュアルSIM運用

こんな人におすすめ 楽天モバイルとpovo2.0のデュアルSIM運用って実際のとこ ...

マウス

2023/9/16

【Logicool MX ERGO vs MX Master 3】ERGOをメインにした決定的な理由

こんな疑問・お悩みを持っている人におすすめ 執筆者はLogicoolのハイエンӠ ...

macOSアプリケーション

2022/9/30

【Chrome拡張機能】便利で効率的に作業できるおすすめの拡張機能を18個紹介する

こんな人におすすめ Chromeの拡張機能を入れたいけど、調べても同じような ...

macOSアプリケーション

2023/5/3

【Automator活用術】Macで生産性を上げる作業の自動化術

今回はMacに標準でインストールされているアプリ「Automator」を使ってできる ...

Pythonを学びたいけど独学できる時間なんてない人へのすゝめ

執筆者は大学の研究室・大学院にて独学でPythonを習得した。

でも社会人になったら独学で行うには時間も体力もなくて大変だ。

時間がない社会人だからこそプロの教えを乞うのが効率的。

ここでは色んなタイプに合ったプログラミングスクールの紹介をする。

  • この記事を書いた人

メガネ

Webエンジニア駆け出し。独学のPythonで天文学系の大学院を修了。常時金欠のガジェット好きでM2 Pro MacBook Pro（30万円） x Galaxy S22 Ultra（17万円）使いの狂人。自己紹介と半生→変わって楽しいの繰り返しレビュー依頼など→お問い合わせ・運営者情報、TwitterX@m_ten_pa、 YouTube@megatenpa、 Threads@megatenpa

-Plotly全般
-, , , ,