データビジュアライゼーションやインフォグラフィックに関する話題や、作品などを公開します。
前回の投稿が2018年なので、このサイトを7年ほど放置していました。すみません……。その間、CMSを自作したり、英語の勉強をしたり、最近ではAI関連の技術に夢中になっていて、なかなか更新できずにいました。
とはいえ、AIの進化によって、データビジュアライゼーションの敷居がぐっと下がったと感じています。これをきっかけに、このブログでもまたいろいろな可視化表現を試しつつ、公開していきたいと思います。
今回はその第一弾として、「大阪・関西万博の来場者数と気温の推移」を視覚化するウェブツールを作ってみました。テーマとして選んだのは、2025年のビッグイベント「大阪・関西万博」。日々の来場者数と気温という、時間的な変化が面白い題材です。
このツールでは、アニメーションとグラフを組み合わせて、日々の来場者数や気温の変化を直感的に理解できるよう工夫しています。単に数字を並べるだけでなく、動きと色で「体感」できるようにすることで、ビジュアライゼーションならではの面白さを追求しています。
この記事では、制作の背景や使ったライブラリ、技術的な構成についてご紹介します。
今回は主にAIにコードを書いてもらいました。普段使っているAI対応のコードエディタ「CURSOR」の有料プランを契約しており、その中でClaudeを使用しています。
コードの大部分はAIに生成してもらいましたが、細かな調整や仕様変更のやりとりは何度も行いました。特にデザインまわりやアニメーションの細部については、手動での調整が多く、最終的には人間らしい“仕上げ”が必要になったと感じています。
それでも、AI時代以前なら3日くらいかかりそうな内容を、今回は実装だけなら半日ほどで完了できました。動画キャプチャを作成してX(Twitter)に投稿したり、ウェブサイトとして公開する準備なども含めて、トータルでは1日程度で仕上げられたのは、かなりの時短でした。
このウェブサイトは、2025年に開催される大阪・関西万博の来場状況を視覚的に体験できる非公式のウェブアプリです。
視覚的・直感的に、混雑具合や気温の傾向を理解できる構成になっています。
このアプリは、以下の技術を使って構成されています。
物理シミュレーション:Matter.jsを用いて、来場者数に応じたオブジェクトが落下。
グラフ表示:Chart.jsで日ごとの来場者数を棒グラフで描画。
データファイル:
public/data.csv:本番データpublic/test-data.csv:テストデータ万博の来場者数データは、大阪・関西万博の公式Webサイトで毎週更新されているニュース記事をもとに、手動で集計・整理したものを使用しています。
気象庁は、オープンデータとして気温や降水量などの豊富な気象データを提供しています。 その中の「過去の気象データ・ダウンロード」ページでは、過去100年以上にわたる日本各地の気象データをCSV形式で取得することができます。
CSV取得の際には以下の条件を選択できます:
ただし、観測地点によって提供されている期間が異なる点や、一部データの欠損がある点には注意が必要です。
このページで公開してるプログラムは、GitHubにて公開しています。
オープンソースで公開してるので、自由に利用してください。