ChatGPT Canvasメモ：Chart.jsとD3.jsでグラフ
Canvasを使わない回答
消費支出の「家計調査報告－2024年(令和６年)12月分及び2024年平均－」のPDFから数値をコピペしてChatGPTに問いかけます。
以下は消費支出の推移です。 集計期間は2023年12月から2024年12月です。
上の値が消費支出、下の値が対前月変化率(％)です。
2023年 2024年 12 月 1 月 2 月 3 月 4 月 5 月 6 月 7 月 8 月 9 月 10 月 11 月 12 月
98.7 96.6 98.0 99.2 98.0 97.7 97.8 96.1 98.0 96.7 99.5 99.9 102.2
-0.5 -2.1 1.4 1.2 -1.2 -0.3 0.1 -1.7 2.0 -1.3 2.9 0.4 2.3
ChatGPTの回答です。
豆腐化している文字を含みますが、グラフを返してくれました。
こちらが消費支出の推移を示すグラフです。
青い折れ線グラフ：消費支出の推移
赤い棒グラフ：対前月変化率（％）
2024年2月や10月には支出が大きく増加しており、逆に1月や7月には減少していることが確認できます。このような変動が季節要因によるものか、特定の出来事が影響しているのかを分析すると、より詳細な傾向が見えてくるかもしれません。
回答末尾「分析を表示します」をクリックすると、 Pythonのpandasライブラ入りを使って生成していることがわかります。
Canvasを使った回答
次にCanvasを使い、Chart.jsを使うように依頼します。
Chart.jsを使ってリッチなグラフにしてください。
Canvasのウインドウが立ち上がり、コードを生成してくれます。
右上のプレビュー（画面ではレビューと縦に表示）を押すとグラフが表示されます。
見栄えを調整するために、以下のプロンプトで調整しました。
消費支出のY軸はゼロから始める必要はありません。 ゼロではなく最小値に近い値に変更してください。
データラベルをつけてください。
調整して得たグラフが以下です。
D3.jsも試す
Chart.js同様にJavaScriptのデータ可視化ライブラリであるD3.jsも試してみました。
D3.jsを使ってリッチなグラフを作成してください。
データラベルをうまくつけられませんでしたが、グラフを生成できました。
D3.jsはChart.jsより学習コストが高いと聞きましたが、D3.jsの方がさまざまなカスタマイズが可能だそうです。
こうプロンプトを投げました。
Chart.isではできないリッチな表現を追加してください。
回答はこうです。
以下のリッチな表現を追加しました：
アニメーション: 棒グラフのデータがスムーズに描画されるようにしました。
グラデーション: 棒グラフに赤からオレンジへのグラデーションを適用しました。
インタラクティブエフェクト: マウスオーバー時にデータポイントが拡大し、視認性が向上しました。
Chart.jsでは難しい細かなカスタマイズを施しました。動作を確認し、さらに調整が必要な場合はお知らせください！
アニメーションについては確認できませでしたが、グラデーションとマウスオーバー時にデータポイントが拡大する振る舞いは確認できました。
