カテゴリー

YouTubeもやってるやで

Plotly全般

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

2021年12月17日

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

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

続きを見る
デスク環境
【デスクツアー2023上半期】モノは少なく、でも効率的に Desk Updating #0

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

続きを見る

こんな人にオススメ

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

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

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

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

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

こんな人にオススメ plotlyで棒グラフを描きたいんだけど、どうやったらいい？ という ...

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

こんな人にオススメ plotlyのpxで棒グラフを作成するにはどうしたらいい？ ということで ...

続きを見る

今回は公式の「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
目次（クリックでジャンプ）
  1. 作成したコード全文
  2. 下準備（import）
  3. シンプルに棒グラフを作成
  4. pattern_shapeでパターンを追加
  5. pattern_shape_sequenceでパターンを指定
  6. pattern_shape_mapでパターンとデータを指定
  7. 棒グラフのパターンに色付け
  8. 棒グラフの背景色の変更
  9. solidityとsizeで背景とパターンの大きさを指定
  10. goを使ってパターンの編集
  11. 色以外にも違いを
  12. 関連記事

運営者のメガネです。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）

こんな人にオススメplotlyで画像を保存するときに色々と警告とかエラーが出てきて保ढ ...

続きを見る

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


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

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

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

こんな人にオススメ plotlyのpxで棒グラフを作成するにはどうしたらいい？ ということで ...

続きを見る

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

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

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

こんな人にオススメ plotlyでグラフを描く時に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&グラフテーマ】plotly既存のthemasをグラフ化

こんな人にオススメ plotlyでグラフを描くときのテンプレートを自分で作成するのが面Ì ...

続きを見る

白黒なグラフにするために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でバーチャートを作成

こんな人にオススメ plotlyで棒グラフを描きたいんだけど、どうやったらいい？ という ...

続きを見る

以下のように初めに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で塗りつぶしをしたいけど、referenceに書いてある内容がよくわか ...

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

こんな人にオススメ plotyで3Dプロットをする際にはどうやって書けばいいの？ それにど ...

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

こんな人にオススメ plotlyでガントチャートを作りたいんだけど、どうやってコードをć ...

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

こんな人にオススメ plotlyっていじれる項目が多くて設定が面倒。何かいいテンプレー| ...

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

こんな人にオススメ plotlyのとっかかりとして散布図（scatter）を描きたいけど、どうやっӗ ...

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

こんな人にオススメ plotlyってグラフ内にボタンをつけて、そのボタンでプロットを表Ķ ...

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

こんな人にオススメ plotlyではグラフにスライダーをつけることができるらしいけど、{ ...

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

こんな人にオススメ plotlyでボタンを追加して動作を割り当てることはできたけど、も{ ...

続きを見る

スマホ

2023/1/21

【Galaxy S22 Ultraレビュー】これが最高峰

こんな人におすすめ 2022年最強のスマホGalaxy S22 Ultraって実際使った感じどうなの ...

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

2023/1/15

【SENNHEISER MOMENTUM True Wireless 3レビュー】高レベルでバランス型の高音質イヤホン

こんな人におすすめ SENNHEISER MOMENTUM True Wireless 3って実際のところどうなの？ 評判は良い ...

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

2023/1/14

【SONY WF-1000XM4 vs SENNHEISER MTW3】MTW3を選んだ決定的な3つの理由

こんな人におすすめ 執筆者は「SONY WF-1000XM4」「SENNHEISER MOMENTUM True Wireless 3」両方を持っている ...

スマホ

2023/1/15

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

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

マウス

2023/1/5

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

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

マウス

2023/1/14

【Logicool MX ERGOカスタム】Logi Optionsのジェスチャーボタン設定内容

こんな人におすすめ Logicool MX ERGOをもっと上手に効率的に使いこなしたい。 ボ| ...

生活に役立つ

2023/1/8

【メガネ厳選】クソ便利に使っているサービスやアイテム達

このページでは執筆者「メガネ」が実際に使って便利だと感じているサ ...

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

2023/1/15

【SONY WF-1000XM4レビュー】神とゴミのハーフ&ハーフ

こんな人におすすめ SONYのフラグシップモデル「SONY WF-1000XM4」ってどれくらい性 ...

スイッチボット

2023/1/14

【SwitchBot Hub Mini】アプリにないエアコンなどの家電をその他で登録する方法

こんな人におすすめSwitchBot Hub Miniに我が家のエアコンを登録したいけど、SwitchBotア ...

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

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

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

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

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

  • この記事を書いた人

メガネ

ベンチャー企業のWebエンジニア駆け出し。独学のPythonで天文学系の大学院を修了→新卒を1.5年で辞める→転職→今に至る。
常時金欠のガジェット好きでM1 MacBook Pro x Galaxy S22 Ultraの狂人。

自己紹介と半生→変わって楽しいの繰り返し レビュー依頼などお問い合わせ Twitter@m_ten_pa

-Plotly全般
-, , , ,