ChatGPTを使ったデータの⾒える化テクニック・別冊

2023/05/25
NOB DATA株式会社
代表取締役 ⼤城 信晃

概要• ChatGPTは会話を中⼼とした利⽤が主な⽤途ですが、アスキーアートやプログラミング、また最近ではプラグインを⽤いた「データの可視化」も可能となっています• この資料ではChatGPTを⽤いた「データの⾒える化」について解説します(なんとか10個)

Copyright © 2023 NOB DATA All Rights Reserved.

今回のお題：広告効果のサンプルデータ• 次のようなデータが与えられた場合を想定• 実際は表形式のデータだが、コピペでそのまま引っ張ってきた状態を想定▪ローデータ
Googleリスティング広告： 週 予算 (USD) CPA (USD) リード数 累積リード数 1 1000 50 20 20 21000 50 20 40 3 1000 50 20 60 4 1000 50 20 80 5 1000 50 20 100 6 1000 50 20 120 7 1000 40 25
145 8 1000 40 25 170Yahooバナー広告： 週 予算 (USD) CPA (USD) リード数 累積リード数 1 1000 60 16 16 2 1000 60
17 33 3 1000 60 17 50 4 1000 55 18 68 5 1000 55 18 86 6 1000 50 20 106 7 1000 50 20 126 81000 50 20 146
LINE広告： 週 予算 (USD) CPA (USD) リード数 累積リード数 1 1000 70 14 14 2 1000 70 14 28 31000 65 15 43 4 1000 65 15 58 5 1000 60 16 74 6 1000 60 16 90 7 1000 60 16 106 8 1000 60 16122

Copyright © 2023 NOB DATA All Rights Reserved.

① 表形式で表⽰• データを表形式に整形して、などの依頼も可能• ⼀応、念のためちゃんと変換されているかは要チェック

Copyright © 2023 NOB DATA All Rights Reserved.

② アスキーアートで表⽰• ただし、⼤雑把な数字になるため、厳密性が必要な場合は注意

Copyright © 2023 NOB DATA All Rights Reserved.

③ html/css/jsで表⽰• html/css/javascriptのコードは、テキストファイルに貼り付けて「.html」拡張⼦にすることで、ローカル環境のブラウザで表⽰が可能になる

test.htmlなど名前で保存し、ブラウザで開く

Copyright © 2023 NOB DATA All Rights Reserved.

<!DOCTYPE html><html><head><title>累積リード数グラフ</title><script src="https://cdn.jsdelivr.net/npm/chart.js"></script></head><body><canvas id="myChart"></canvas><script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {type: 'bar',
data: {
labels: ['1週⽬', '2週⽬', '3週⽬', '4週⽬', '5週⽬', '6週⽬', '7週⽬', '8週⽬'],
datasets: [{label: 'Googleリスティング広告',
data: [20, 40, 60, 80, 100, 120, 145, 170],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',borderWidth: 1},{
label: 'Yahooバナー広告',
data: [16, 33, 50, 68, 86, 106, 126, 146],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',borderWidth: 1},{
label: 'LINE広告',
data: [14, 28, 43, 58, 74, 90, 106, 122],
backgroundColor: 'rgba(153, 102, 255, 0.2)',
borderColor: 'rgba(153, 102, 255, 1)',borderWidth: 1},]},
options: {scales: {y: {beginAtZero: true}}}});</script></body></html>④ html/css/jsで表⽰ (グラフ形式の指定)• いくつかの条件を指定しつつ、円グラフで⽐較してください、などの指定も可能

ソースコードは割愛。
test2.htmlなどの名称で保存し、ブラウザで開く
Copyright © 2023 NOB DATA All Rights Reserved.

⑤ google colab & Pythonで描画• Google colabとPythonで出⼒してもらうことも可能(google colabはWebでPythonを動かせるノートブック環境。無料で使える)• Google colabはこちら https://colab.research.google.com/?hl=ja• ⽂字化けして居る場合はそれを直してもらう依頼をかけるなど。

ソースコードは割愛。
Google Colabにコピペし、pythonコードを実⾏する
Copyright © 2023 NOB DATA All Rights Reserved.

⑥ ChatGPTプラスのプラグイン活⽤(Wolﬂam)• 有料ユーザーはChatGPT-4のプラグインが利⽤可能• プラグインは設定画⾯からONにしたのち、利⽤するプラグインを選択して利⽤する• 以下は科学演算⽤のWolﬂamプラグインで可視化した例 (ただし、結構遅いしうまくいかないケースも)Copyright © 2023 NOB DATA All Rights Reserved.

⑦ ChatGPTプラスのプラグイン活⽤(Show me)• 有料ユーザーはChatGPT-4のプラグインが利⽤可能• Show meプラグインはフロー図などの描画が得意• なお今回は条件分岐がないのであまり⾯⽩くない結果に・・

Copyright © 2023 NOB DATA All Rights Reserved.

⑧ 可視化のアイディア⾃体をChatGPTに聞く(GPT-4)• どういう視覚化が良さそうかをChatGPTに聞くアイディア• (プラグインの質問はスルーされて居る・・)

Copyright © 2023 NOB DATA All Rights Reserved.

⑨ 可視化のアイディア⾃体をChatGPTに聞く(Web検索)• WebPilotプラグインを使ってWeb検索をしてもらい、アイディアをもらう• いくつか類似のものを例⽰するのがコツ。あとたまにリンク先がないこともあるので、要チェック

Copyright © 2023 NOB DATA All Rights Reserved.

⑩ twitterやその他情報源をあたる• 特にtwitter上はChatGPTのプラグイン等をいろいろ実験している⽅々が多いです• ⼿前味噌ですが、ChatGPT部のnoteでも定期的に情報発信していますので、もしよろしければご覧になってみてください• 「ChatGPT活⽤の先⼈たち」シリーズ https://note.com/chatgpt_nobdata/m/m19a93b99d0e5

Copyright © 2023 NOB DATA All Rights Reserved.