インタラクティブ機能
ズーム、ホバー、パンを行います
「インタラクティブ機能」はCoddyKit上の無料Python Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはPython Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Python Academyコースには全4レッスンが含まれています。
インタラクティブ性が重要な理由
静的なライブラリと比べたPlotlyの最大の利点は、チャートがユーザーの操作に応答することです。読者は、ラベルでチャートを埋め尽くさなくても、特定の範囲をズームしたり、データ上をパンしたり、ポイントにホバーして正確な値を読んだりできます。
インタラクティブ性により、1つのチャートで概要と詳細の両方を提供できます。
ホバーツールチップ
デフォルトでは、ポイントにホバーするとxとyの値が表示されます。hover_data=['col1', 'col2']を指定して列を追加したり、hover_name='name'を指定してツールチップの太字のタイトルを設定したりできます。
優れたツールチップを用意すれば、プロット自体に情報を詰め込む必要がなくなります。
ツールチップ文字列の作成
ツールチップは、概念的にはデータの1行から組み立てた、書式付きのテキストにすぎません。同じ考え方を通常のPythonで表すと、次のようになります。
point = {'name': 'Berlin', 'pop': 3700000, 'gdp': 154}
tooltip = point['name'] + '\nPop: ' + format(point['pop'], ',') + '\nGDP: ' + str(point['gdp'])
print(tooltip)ズームとパン
PlotlyのFigureには、ズーム、パン、範囲選択のツールを備えたモードバーが含まれています。ユーザーはドラッグして長方形の範囲をズームしたり、ダブルクリックしてリセットしたりすることもできます。
これらの動作はデフォルトで有効になっているため、通常はそのためのコードを書く必要はありません。
範囲とリセット
ズームすると、軸の範囲が一時的に変わります。fig.update_xaxes(range=[0, 100])で初期範囲を設定でき、ユーザーはいつでもその範囲にリセットできます。
ズームとは、データ全体の範囲から一部分のウィンドウを選ぶことだと考えてください。
full_min, full_max = 0, 1000
zoom_min, zoom_max = 200, 400
visible = zoom_max - zoom_min
total = full_max - full_min
print('Zoom shows', round(visible / total * 100), '% of the range')ホバーモード
fig.update_layout(hovermode='x unified')を指定すると、ホバーしたx位置にあるすべての系列を一覧表示する1つのツールチップが表示されます。同じ時点で複数の線を比較するのに最適です。
その他のモードには'closest'や'x'があります。
凡例のインタラクティブ性
Plotlyの凡例はクリックできます。1回クリックすると系列が非表示になり、ダブルクリックするとその系列だけが表示されます。これにより、別々のチャートを用意しなくても、ユーザーは関心のあるデータに集中できます。
チャートに複数のトレースがある場合は、常に自動的に機能します。
レンジスライダー
時系列データには、fig.update_xaxes(rangeslider_visible=True)を指定してレンジスライダーを追加できます。下部に小さな概要チャートが表示され、ユーザーはドラッグして日付の範囲を選択できます。
1m、6m、YTDなどのレンジセレクターボタンと組み合わせると便利です。
カスタムホバーテンプレート
完全に制御したい場合は、%{x}や%{y}のようなプレースホルダーを含む文字列であるhovertemplateを使います。ホバー時に表示する正確なテキストや数値の書式を決められます。
テンプレートの設計は、書式付き文字列を設計するのと同じです。
x, y = 2021, 42.567
template = 'Year %{x}: $%{y:.1f}M'
rendered = template.replace('%{x}', str(x)).replace('%{y:.1f}', format(y, '.1f'))
print(rendered)使いどきを見極める
インタラクティブ性は強力ですが、コストがないわけではありません。操作項目が多すぎると、気軽に見る読者を圧倒してしまいます。実際の疑問に答える機能だけを有効にし、それ以外は適切なデフォルト設定に任せてください。
モードバー
すべてのFigureの右上にあるツールバーがモードバーです。ズーム、パン、自動スケール、PNGをダウンロードするカメラボタンなどを備えています。Figureを表示するときにconfig引数を指定して、設定を変更したり非表示にしたりできます。
使わないボタンを非表示にすると、技術に詳しくない利用者にとってチャートがすっきりします。
理解度チェック
インタラクティブ機能についての知識を確認しましょう。
まとめ
Plotlyのインタラクティブ性について学びました。
hover_dataやhovertemplateで情報を追加できるホバーツールチップ- 組み込みのモードバーによるズームとパン
- 統合されたツールチップを表示する
hovermode='x unified' - クリックできる凡例と、時系列用のレンジスライダー
これらの機能は、実際の疑問に答える目的で意図的に使い分けてください。
よくある質問
「インタラクティブ機能」レッスンは無料ですか？
はい。「インタラクティブ機能」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Python Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Python Academyコースには全4レッスンが含まれています。
「インタラクティブ機能」で何を学びますか？
ズーム、ホバー、パンを行います ブラウザで直接実行するハンズオンコードでPython Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Python Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのPython Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「インタラクティブ機能」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このPython Academyレッスンでコードを書いて実行できますか？
はい。すべてのPython Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Plotly Expressの基礎
- インタラクティブ機能
- ダッシュボードの概念
- エクスポートと埋め込み