見出し画像

【データ可視化】プロンプトでプレゼンで使える見栄えの良いグラフを作成するには？(chatGPT, Claude)

Gota@Data Analyst

こんにちは、Gotaです。

Claude 3.5 SonnetのArtifactsやchatGPTのCode Interpreterでのデータ分析など、UI上で簡単にデータ分析を行うことが可能になってきました！個人的にも生成AIを使ったデータ分析エージェントは特に「データ可視化」に非常に便利で、自分だけのエージェントを作ったりしてます。

LLMエージェントを利用したデータ可視化は非常に便利ではあるものの、可視化の細かい調整を行うには、グラフに関する基礎知識やライブラリの特徴を知っておく必要があります。

そこで本記事では、
・良いデータ可視化ってどのようなものか？
・プレゼンテーションにでも使えるようなデータ可視化を自然言語で調整するテクニック
を紹介していきます！

プログラミングやデータ分析の経験がなくとも、生成AIで素早く効果的にグラフを分かりやすく作ることができれば、プレゼンでも差をつけることが出来るはず！美しいグラフを作成してアッと驚かせましょう！

記事が参考になれば是非「いいね」と「フォロー」お願いします。


良いデータ視覚化とはどのようなものか？

自然言語でのデータ可視化の調整方法のご紹介の前に、プレゼンに適切なデータ視覚化がどのようなものかをまず整理していきましょう。（アニメーション等インタラクティブなグラフについては今回は除外します）

データ視覚化の目標は、データの持つストーリーを正確かつ効果的に伝え、ターゲットの行動変容を促すこと。

1. 明確な目的設定とストーリーがある

データ可視化を行う前に、視覚化を行うことで「誰」に「何」を「どのような文脈（ストーリー）」で伝えたいのかを明確にすることが重要です。目的を明確にすることで、適切なグラフの種類や表現方法を選択できるようになります。

いくら美しいグラフでも、伝えたいターゲットに伝わらなければ作り甲斐がないものですし、グラフ作成せずとも伝わる相手ならラクして伝えたほうが良いです。


2. 適切な可視化手法の選択されている

伝えたい内容やデータの種類に応じて、適切なグラフの種類を選択することが重要です。例えば、時系列データには折れ線グラフが適しており、商品カテゴリーごとの比較には棒グラフが適しています。

数量を伝えるグラフ…どのように伝えるかの選択肢は多数ある

伝えたい内容ごとに最適な可視化手法をざっくりまとめました。

  • 数量：棒グラフ、ヒートマップ、ドットプロット、ロリポップチャート

  • 分布：ヒストグラム、確率密度グラフ、箱ひげ図、バイオリンプロット

  • 割合：棒グラフ、円グラフ、モザイク プロット、ツリーマップ

  • 関係性（x-y）：

    • 散布図、バブルチャート、スロープ図、等高線、Bin図、折れ線グラフ、株価チャート

  • 地理空間：フローマップ、コロプレス地図、等高線図

  • 不確実性（確率、範囲）：エラーバー、信頼区間

※数値の比較が難しい円グラフや3D効果、グラデーションのようなチャートを使うのは出来る限り避けたほうが良いです。


3. 内容が正確かつ負荷なく伝わるデザインとなっている

効果的なデータ可視化は、単にデータがグラフィックに変換されているだけではなく、データの背後にある意味を明らかにし、ターゲットがデータから重要な示唆を引き出すのに役立ちます。

データ視覚化に関わる要素（Fundamentals of Data Visualizationから引用）

そのためには、伝えたい内容がターゲットにスムーズに受け入れられるデザインとなっている必要があります。

  • グラフ内に認知的負荷を高める要素が存在しない

    • マーカー、ラベルやフォントの種類や位置、サイズは適切か？

    • 不要な枠やラベルが存在しないか？

    • 色を無駄にたくさん使っていないか？一貫性のある色の使い方をしているか？

  • 比例インクの原理（The principle of proportional ink）に従っている

    • 比例インクの原理（The principle of proportional ink）はデータビジュアリゼーションの権威であるEdward Tufteの「Data Ink Ratio」の考え方を拡張したものです。非常にシンプルな原理で、「数値を表現するために網掛け領域（塗りつぶし）のある領域を使用する場合、その網掛け領域の面積は対応する数値に比例するべき」というものです。つまり、数値を示すために使用されるインクの量は、数値自体に比例するべきだということです。

  • 伝えたい内容を正確かつ迅速に理解することが出来る

    • 伝えたい内容が歪められていないか、適切に強調されているか？

データ可視化はアートと論理のどちらもバランス良く求められるため、良いグラフィックを作れるようになるにはかなりの試行錯誤が必要です…個人的にもまだまだ修行が必要だなと感じております。


効果的な可視化を実現するためのプロンプト例

ここまで良い視覚化がどのようなものかをまとめていきました。

ここからはプレゼンにも使えるデータ可視化をchatGPTやClaudeのデータ分析機能でどのように実現していくかをご紹介します。

LLMのチャットUI上で効果的なデータ可視化を実現するステップ

LLMのデータ可視化は下記のステップで行います。プレゼンテーションでも使えるデータ可視化を行う上で肝となるステップが3と4です。自然言語で何度も繰り返してグラフを調整していきます。

データ可視化のステップ

  1. データの準備

  2. 初期のグラフ生成

  3. フィードバックと調整

  4. 調整の繰り返し（Human in the Loop）

  5. 最終的なグラフの生成


初期のグラフ生成

データの準備完了後、chatGPT、ClaudeのUI上にデータをアップロードします。

今回は消費者物価指数（CPI）の2020年から2024年5月までの月別時系列データをGPT-4oを用いて可視化していきます。とりあえず読み込んだデータを雑に可視化してみます。（静的グラフにしています）

chatGPT Code Interpreterによる消費者物価指数の可視化（データはe-Statから取得）
GPT-4oの文字化け防止は日本語フォント（ipaexg.ttf等）を直接アップロードする


フィードバックと調整で雑に使えるプロンプト例

グラフを作成後、伝えたい内容により現在のグラフに対する改善案をプロンプトとして与えて可視化を調整していきます。

しかし、一つずつ調整していくのはなかなか大変です。そこで、良いデータ可視化がどういうものか？を実現するためのフィードバックループを回せるプロンプト例を載せました！

ステップに従いグラフを修正してください

# ステップ
1. データ可視化を行う前に、視覚化を行うことで「誰」に「何」を「どのような文脈（ストーリー）」で伝えたいのかを明確にする。伝えたい内容が明確ではない場合、ユーザーに対して可視化の目的を明確にする質問と現在のグラフから読み取れる示唆を投げかける。
2. 目的が明確ではない場合、1に戻る。2が完了するまで次のステップを実行しない
3. 最初の可視化を修正する前に、現在のグラフの改善点を原則ごとに列挙する
4. 修正が必要であれば、可視化を修正する
5. 修正後のグラフで原則が適用されているかどうか批判的に評価する。修正点がある場合、3に戻る。修正は3回まで許可されている。

# 原則
1. グラフ内に認知的負荷を高める要素が存在しない
- ラベルやフォントの種類や位置、サイズは適切か？
- 不要な枠やラベルが存在しないか？
- 色を無駄に使っていないか？一貫性のある色の使い方をしているか？
2. 比例インクの原理（The principle of proportional ink）に従っている
3. ゲシュタルト理論（Gestalt Theory）に従っている
3. 伝えたい内容を正確かつ迅速に理解することが出来るよう強調されている
4. 適切な可視化手法の選択されている

このような感じで、伝えたい内容を整理知たあとにグラフが修正されるようになっています。

今回の伝えたい内容は「一般消費者に、インフレの影響が大きいカテゴリが何かを伝え、支出を抑えるように説得したい」に設定してみる

カテゴリの選定基準はわかりませんが、特徴あるカテゴリが強調され、ずいぶん分かりやすくなりました。

雑にやっても少し伝わりやすいグラフに変身！

グラフの各要素の微調整を行うプロンプト例

グラフの微調整をしたいけど、各要素をどのように表現すればよいのか分からないこともあるかと思います。

各要素を調整するときに、日本語/英語でどのような単語を使えば特定の要素を指定して指示出来るかをまとめました！日本語でうまく調整出来なかった際には、英語で指示を出すとグラフの調整が上手く出来ると思います。

Claude3.5のArtifacts、chatGPT Data Analysisのどちらでも使えます！

matplotlibのドキュメントを参考に作成
---------------------
横軸の目盛り線を内向きにしてください
---------------------
グラフのタイトルを「売上の推移」に変更し、タイトルのフォントをArialに設定してください
---------------------
マーカーを逆三角形（星型）に変更し、マーカーの色を青色（#0000FF）にしてください
---------------------
凡例の位置をグラフエリアの左上に移動してください
---------------------
rightとtopの枠線を非表示にしてください
---------------------
横軸の目盛りラベルを45度回転させ、フォントサイズを16pxにしてください
---------------------


具体的に指示を出し、微調整を加えた最終的なグラフが完成しました！

最初のグラフと比べて、伝えたい内容が伝わる可視化が出来たかなと思います。

Claude 3.5 Sonnetでも挑戦

ClaudeのArtifacts機能でも同様のことが出来るか試してみます。

「2022年以降、食料と光熱・水道の価格が大きく上昇している」を伝えるための可視化を行います。

調整前


フィードバックループを回せるプロンプトでのみ調整した結果

実際の調整した結果、不必要な情報が減り伝えたいメッセージを補強するグラフになりました。

しかし、ClaudeのArtifacts機能ではGPT-4oのCode Interpreterとは異なり、大量のデータを可視化しようとするとエラーが出ました。今回の可視化は2020年から2024年5月までの半年おきのデータのみサンプリングして表示しています。

Artifacts機能は可視化ではなく、あくまでも現時点ではUI/UXをデザインすることに特化した機能でしょうか。（ゲームとかは作れるから十分楽しいけど！）

Artifacts機能でグラフを書くには、プレゼン用というよりもカテゴリを選択出来る時系列折れ線グラフとかが良さげです！本当に動的に動いて分かりやすいです！

まとめ

本記事では、生成AIを活用して自然言語でプレゼンにも活用出来るデータ可視化を調整する方法について解説しました。

参考になれば是非「いいね」と実際に活用してみたフィードバックくれると嬉しいです！他にこういう使い方をしているよなどあれば、是非是非教えて下さい！

本記事では、chatGPTやClaudeのようなチャットUI上で可視化を行いましたが、データ可視化をプレゼンに使えるレベルになるように自動で修正を繰り返すエージェントもAutoGenにて作ったりしています。

これからはGPTsだけでなく、AIエージェントやRAG、データ分析の記事も積極的に書いていきますのでいいねとフォローお願いします！

参考文献

この記事が気に入ったらサポートをしてみませんか？