データの可視化・分析体験
では、実際にデータの可視化・分析体験していきましょう。
だいじなこと
Claud のような生成 AI では、通常のプログラムとは異なる振る舞いをするので、以下のような注意点があります。
- 同じ指示でも同じ結果が出るとは限らない
- 思い通りにいかないときは新しいチャットで再開
- 修正も理解してくれるので少しなら修正もあり
今回の体験でもこのあたりはご了承いただきつつ進めていきます！よろしくお願いします！
今回はこちらのデータを使います
荒川区 地域・年齢別人口一覧を使ってみます。
まずアクセスしてみましょう。
データをプレビューします。
データをプレビューして眺めてみます。
ページを戻ってでダウンロードしましょう。
ダウンロードされました。
この CSV データは Shift JIS
日本語の CSV データは Shift JIS であることが多く。Claude では UTF8 BOM なしでないと中身がしっかり読めないので注意です。
本来であれば、
- Windows の場合、標準のメモ帳だと最近 CSV をテキストと読んで UTF8 BOM なしで保存する
- Visual Studio Code だと最近 CSV をテキストと読んで UTF8 BOM なしで保存する
といった手順で事前に変換するのがおすすめです。
今回は、あえて Shift JIS のファイルを Claude に変換してもらうプロンプト技を使います。
Claude にアップロードして初回プロンプト
新しいチャットにしましょう。
＋ボタンをクリックして、ファイルをアップロードをクリックして、先ほどの CSV をアップロードします。
アップロードされました。
データ内容・項目を把握してもらいつつ文字コードも対策を記憶してもらう
この CSV データは Shift JIS の日本語でできています。読み込むとき TextDecoder API を使って UTF8 で読み込んで、データ内容と項目を教えてください。
とプロンプトを入力して送りましょう。
このようにデータ内容とカラム（項目）が分かって読み込まれるはずです。
これで、このチャットでうまくこのデータの文字コードの特性やデータ内容とカラム（項目）がうまく記憶してくれました。
人口の性別・年齢ごとの割合を棒グラフで出してみる
人口の性別・年齢ごとの割合を Chart.js と HTML で棒グラフでお願いします。
とプロンプトを入力して送りましょう。
しばらく待っていると、うまくいけば出力されます。
エラーでうまく出ないときは修正依頼してみる
うまく出ないケースはいろいろありますが、こういったエラーくらいでしたら「うまく表示されてないです」といったフィードバックをいうと自発的には押してくれることも多いです。
こんな結果になります。
もしも、うまく治らないときは、再度同じチャットで依頼しなおししたり、新しいチャットで依頼しなおすのも手です！
人口構成ピラミッド図を出してみる
より複雑なグラフを出してみましょう。
人口構成ピラミッド図を Chart.js と HTML で作ってください。
とプロンプトを入力して送りましょう。
しばらく待っていると、うまくいけば出力されます。
なぜ Chart.js と HTML 指定をする？
実は Artifacts でグラフをお願いすると React での Chart ライブラリを使うケースがあるのですが、この場合だと React が使える人じゃないと、ダウンロードして活用しにくいので、すこしコード量は多くなりますが Chart.js と HTML 指定して活用しやすくしています。HTML で出ると HTML ファイルをブラウザに投げ込めば表示されます。