カテゴリー

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

Plotly全般

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

2021年4月10日

こんな人にオススメ

plotlyっていじれる項目が多くて設定が面倒。何かいいテンプレートとかって作ってませんかね?

ということで、今回はplotlyでグラフを描画する際のテンプレートを列挙する。本記事は、自分用の備忘録としての役割も果たしているので、文章量が少なめ。コード閲覧・確認・コピー用。

python環境は以下。

  • Python 3.9.4
  • numpy 1.20.3
  • plotly 4.14.3

なお、ここに書かれた内容は執筆者のPC内で「plotly_layout_template.py」というファイルに書かれており、他のpyファイルでplotlyのグラフを作成する際に読み込まれる。

その際にはディレクトリが「plotly_layout_template.py」方が2階層上なので、それぞれのグラフの方には読み込みディレクトリとして../../が書かれる。イメージは以下。

.
└── plotly_layout_template.py
    ├── folder1
    │   └── plotly1.py
    └── folder2
        └── plotly2.py

運営者のメガネです。YouTubeTwitterInstagramも運営中。自己紹介お問い合わせページあります。

運営者メガネ

layoutテンプレート

plotlyのレイアウトはgo.Layoutで行う。dict形式で各項目と副項目を設定する。

[box class="box27" title="2021年6月27日追記"]テンプレート内にhoverlabelを入れれば、毎回Scatterの部分でhoverlabelを設定しなくてもいい![/st-mybox]

def plotly_layout():
    """plotlyのlayoutのtemplate

    Returns
    -------
    dict
        plotlyのlayoutのtemplate
        各グラフのlayout作成時に上書きすることも可能
    """

    layout_template = dict(
        layout=go.Layout(
            title=dict(
                x=0., y=0.99, xanchor='left', yanchor='top',
                xref='paper', yref='container',
            ),
            xaxis=dict(
                ticks='inside', zeroline=False, linewidth=1,
                showline=True, linecolor='black', mirror='allticks',
            ),
            yaxis=dict(
                ticks='inside', zeroline=False, linewidth=1,
                showline=True, linecolor='black', mirror='allticks',
            ),
            yaxis2=dict(
                gridcolor='#d5d5d5',
                ticks='inside', zeroline=False, linewidth=1,
                showline=True, linecolor='black', mirror=False,
                overlaying='y', side='right',
            ),
            font=dict(family='Times New Roman', color='black', size=20),
            paper_bgcolor='rgba(0,0,0,0)',
            plot_bgcolor='rgba(0,0,0,0)',
            legend=dict(
                x=1, y=1, orientation='v',
                xanchor='right', yanchor='top',
                itemclick='toggleothers', itemdoubleclick='toggle',
                bgcolor='rgba(0,0,0,0)',
                bordercolor='black', borderwidth=1,
            ),
            margin=dict(l=50),
            hoverdistance=30,
            showlegend=True,
            hovermode='closest',
            # この部分を追記するとScatterで毎回指定しなくてもいい!
            hoverlabel=dict(font=dict(family='Times New Roman', size=30)),
        )
    )
    return layout_template

config

configplotlyのグラフの右上の方に表示される、グラフの拡大・縮小や追加で図形の描画などを決めるボタン。

[box class="box27" title="2021年7月11日追記"]軸ラベルとかを自由に変更できるか否かを決める引数tfのデフォルト値をFalseに設定[/st-mybox]

[box class="box27" title="2021年8月9日追記"]plotlyのv5以降では、デフォルトでtoggleSpikeLinesなどが非表示なるようなので明示[/st-mybox]

def plotly_config(tf=False):
    """plotlyのconfigの設定一覧

    Parameters
    ----------
    tf : bool
        軸ラベルや凡例の位置を編集可能にするか否か, by default False

    Returns
    -------
    dict
        設定したplotlyのconfig
    """
    config = {
        # プロット領域上でスクロールするとズームイン、ズームアウトが可能
        'scrollZoom': True,
        # タイトルとかの編集可能
        'editable': tf,
        # ダブルクリックの許容時間/ms
        'doubleClickDelay': 1000,
        # お絵描きツール追加
        'modeBarButtonsToAdd': [
            'drawline',
            'drawopenpath',
            'drawclosedpath',
            'drawcircle',
            'drawrect',
            'eraseshape',
            'togglehover',
            'togglespikelines',
            'hoverclosest',
            'hovercompare',
            'v1hovermode',
        ],
        # ディスプレイにconfigのメニューバーを常に表示する
        'displayModeBar': True,

        # 一部編集可能に
        'edits': {
            'legendText': True,
            'titleText': True,
            'axisTitleText': True,
            'annotationText': True,
        },

        # # デフォルトで表示されているconfigを消したい時
        # 'modeBarButtonsToRemove': [
        #     'toImage',
        #     'zoom2d',
        #     'pan2d',
        #     'select2d',
        #     'lasso2d',
        #     'zoomIn2d',
        #     'zoomOut2d',
        #     'autoScale2d',
        #     'resetScale2d',
        #     'toggleSpikelines',
        #     'hoverClosestCartesian',
        #     'hoverCompareCartesian',
        # ],
        # # plotlyのロゴを消したい時
        # 'displaylogo': False,
    }

    return config

プロット作成

プロット点の作成。今回は以下の式のaの値を0から4まで変化させたデータをforで回しながら使用した。

$$y\ =\ ax$$

レイアウトについてはgo.Layoutの引数templateに、configについてはグラフ描画時のplotly.offline.iplotの引数configに入れて使用。

HTMLでのグラフ保存時にconfigを効かせるかどうかも指定でき、今回はconfigを効かせておいた。本記事のグラフもconfigが効いているのでぜひいじってみてほしい。

[box class="box27" title="2021年6月27日追記"]テンプレート内にhoverlabelを入れているので、Scatterの部分でhoverlabelを設定しなくてもいい![/st-mybox]

def graph():
    """レイアウト、configのテンプレートを読み込んだ
    plotlyのグラフを作成してみる
    """

    x = np.arange(10)
    y = x
    colors = ('red', 'blue', 'green', 'black', 'deeppink')

    # プロットするデータを配列に入れる
    plot = []
    for num, color in enumerate(colors):
        name = f"y={num}x"
        d = go.Scatter(
            mode='lines+markers',
            x=x,
            y=y * num,
            name=name,
            marker=dict(symbol='circle'),
            line=dict(dash='solid', color=color),
            # hoverlabel=dict(
            #     font=dict(
            #         family='Times New Roman', size=40
            #     )
            # ),
            hovertemplate=f"{name}<br>"
            + 'x=%{x} <br>'
            + 'y=%{y} <br>'
            + "<extra></extra>",
        )
        plot.append(d)

    # レイアウトを決める
    layout = go.Layout(
        template=plotly_layout(),
        title=dict(
            text='title',
        ),
        xaxis=dict(
            title='x',
        ),
        yaxis=dict(
            title='y',
        ),
        legend=dict(
            xanchor='right',
        )
    )

    # 作成したデータの入った配列と、レイアウトの配列を図にする
    fig = go.Figure(data=plot, layout=layout)
    plotly.offline.iplot(fig, config=plotly_config(tf=True),)

    # 作成したグラフを保存
    pio.orca.config.executable = '/Applications/orca.app/Contents/MacOS/orca'

    # ファイル保存
    pio.write_html(
        fig, 'test_plotly.html', auto_open=False,
        config=plotly_config(tf=False),
    )
    pio.write_image(fig, 'test_plotly.png')

graph()

グラフ描画

以上の設定を行なって実際に作成したグラフが上。実際にHTML表記にしたのが以下のグラフだ。


プログラムを1つにして表示

layoutconfigplotを一つにしたコードを示す。以下をコピペすればとりあえずはグラフができる(モジュールとかが揃っていれば)。

保守性を高めるために

今回はひたすらplotlyの設定についての記事だった。この記事に書いているテンプレート(layout, config)を予めどこかに設定し、毎回読み込むことで毎回同じクオリティのグラフが出来上がる。

毎回ファイルに上記のテンプレートを書き込むことは大変なのは目に見えているが、何よりも大切なのが「保守性」。

これは機能の拡張のしやすさとか修理のしやすさとかを表す言葉で、もし、テンプレートの一部を変更するとなると、毎回ファイルのにテンプレートを書いている場合は全てのファイルで変更を加えないといけない。

しかし、今回のように予めテンプレートとして他の場所に置いておけば、このファイルだけ変更すれば事足りる。すると

  • 変更忘れ
  • 変更ミス
  • 無駄な変更時間

が無くなってWinWIn。これからプログラミングを学ぶ人はこういう点も頭に入れておいていただければ幸いだ。執筆者自身まだまだ保守性の向上の余地ありなので共に成長しましょう。

関連記事

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

続きを見る

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

続きを見る

自作したplotlyのマーカーのシンボル一覧
【plotly&マーカー】plotlyのマーカーのシンボル

続きを見る

【plotly&config】グラフのツールバーを編集する

続きを見る

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

続きを見る

【plotly&バブルチャート】plotlyで各国の収入と平均寿命の時代変化をバブルチャートで描く

続きを見る

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

続きを見る

e-typingのスコア軌跡
【Mac&タイピング】タッチタイピングで分間300打を超える方法

続きを見る

【python&独学】独学である程度pythonを習得するマインド

続きを見る

【python&初級】のlistとかforとかifとかまとめ

続きを見る

ガジェット

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全般
-, , ,