Data Visualizationby PIXEL IMAGE

データビジュアライゼーションやインフォグラフィックに関する話題や、作品などを公開します。

HOME > ビジュアライゼーション > 万博来場者カウント

万博来場者カウント

前回の投稿が2018年なので、このサイトを7年ほど放置していました。すみません……。その間、CMSを自作したり、英語の勉強をしたり、最近ではAI関連の技術に夢中になっていて、なかなか更新できずにいました。

とはいえ、AIの進化によって、データビジュアライゼーションの敷居がぐっと下がったと感じています。これをきっかけに、このブログでもまたいろいろな可視化表現を試しつつ、公開していきたいと思います。


今回はその第一弾として、「大阪・関西万博の来場者数と気温の推移」を視覚化するウェブツールを作ってみました。テーマとして選んだのは、2025年のビッグイベント「大阪・関西万博」。日々の来場者数と気温という、時間的な変化が面白い題材です。

このツールでは、アニメーションとグラフを組み合わせて、日々の来場者数や気温の変化を直感的に理解できるよう工夫しています。単に数字を並べるだけでなく、動きと色で「体感」できるようにすることで、ビジュアライゼーションならではの面白さを追求しています。

この記事では、制作の背景や使ったライブラリ、技術的な構成についてご紹介します。


制作スタイルとAI活用について

今回は主にAIにコードを書いてもらいました。普段使っているAI対応のコードエディタ「CURSOR」の有料プランを契約しており、その中でClaudeを使用しています。

コードの大部分はAIに生成してもらいましたが、細かな調整や仕様変更のやりとりは何度も行いました。特にデザインまわりやアニメーションの細部については、手動での調整が多く、最終的には人間らしい“仕上げ”が必要になったと感じています。

それでも、AI時代以前なら3日くらいかかりそうな内容を、今回は実装だけなら半日ほどで完了できました。動画キャプチャを作成してX(Twitter)に投稿したり、ウェブサイトとして公開する準備なども含めて、トータルでは1日程度で仕上げられたのは、かなりの時短でした。

ビジュアライゼーションの仕様

ツールの概要

このウェブサイトは、2025年に開催される大阪・関西万博の来場状況を視覚的に体験できる非公式のウェブアプリです。

  • 来場者数の可視化:日ごとの来場者数をアニメーションで表現。
  • 気温による色変化:その日の気温に応じて表示の色が変わります。
  • グラフ表示:日別の来場者数推移を棒グラフで確認可能。

視覚的・直感的に、混雑具合や気温の傾向を理解できる構成になっています。


技術構成と特徴

このアプリは、以下の技術を使って構成されています。

  • 物理シミュレーション:Matter.jsを用いて、来場者数に応じたオブジェクトが落下。

    • 月の切り替わり時には、数字(SVG)が落下する演出も。
  • グラフ表示:Chart.jsで日ごとの来場者数を棒グラフで描画。

    • 棒の色は気温に応じて変化。
  • データファイル

    • public/data.csv:本番データ
    • public/test-data.csv:テストデータ
  • UI:React (JavaScript) によって構築。

アプリの画面構成

  • SimulationArea:物理シミュレーション領域。来場者数に応じたボールや月の数字が落下。
  • InfoPanel:現在の日付、当日・累計来場者数、気温などを表示。
  • ChartContainer:日ごとの来場者数を棒グラフで表示。気温に応じた色変化あり。
  • データテーブル:すべての日程の来場者数と気温を表形式で表示。

利用したデータ

万博来場者データ

万博の来場者数データは、大阪・関西万博の公式Webサイトで毎週更新されているニュース記事をもとに、手動で集計・整理したものを使用しています。

来場者数と入場チケット販売数について

気象データ

気象庁は、オープンデータとして気温や降水量などの豊富な気象データを提供しています。 その中の「過去の気象データ・ダウンロード」ページでは、過去100年以上にわたる日本各地の気象データをCSV形式で取得することができます。

過去の気象データ・ダウンロード

CSV取得の際には以下の条件を選択できます:

  • 地点:都道府県ごとの各観測地点
  • 項目:気温、降水量、積雪、風速など
  • 期間:1872年1月〜直近の月まで

ただし、観測地点によって提供されている期間が異なる点や、一部データの欠損がある点には注意が必要です。

過去の気象データ・ダウンロード

オープンソースで公開してます

このページで公開してるプログラムは、GitHubにて公開しています。
オープンソースで公開してるので、自由に利用してください。