【アプリ 068】面積で見る氷見の産業。構造トレンドツリーマップ

AI実装ログ

006番の産業構造レースチャートでは、産業別の順位バトルを見ました。

今度は、視点を変えます。各産業が氷見の経済全体に占める「シェア」を、面積で表現するツリーマップです。

1990年から2020年まで、スライダーを動かすとブロックの大きさがなめらかに変化します。製造業の存在感、医療福祉の台頭、農林漁業の縮小——30年の構造変化が「面積の変化」として体感できます。

👉 デモアプリを開く

📱 使い方

068_industry_trend スクリーンショット
  1. 年度スライダーまたは▶再生ボタンで1990〜2020年の産業構造変化をアニメーション再生
  2. ツリーマップの各セルにカーソルを合わせて構成比・就業者数のツールチップを確認
  3. セルをクリックして詳細パネルで当該産業の30年推移折れ線グラフを確認
  4. 「主な変化バッジ」(増加↑緑・減少↓赤)で変化量が大きい産業を把握
  5. JA/EN/ZHの言語切り替えでラベル・グラフ・インサイトが即時更新

💡 ポイント: 製造業が31.5%→22.5%に縮小する一方、医療・福祉は5.8%→16.2%へ約3倍に急成長した構造転換が可視化されています。

🎯 こんな人におすすめ

  • 産業政策・経済振興を担う行政担当者
  • 地域経済の構造変化を研究する大学・シンクタンク研究者
  • 産業動向を把握したい地元企業の経営者

開発メモ

目的: 006番(レースチャート)が「誰が1位か」に注目させたのに対し、068番は「全体の中でどれくらいの割合か」を見せる。同じデータでも見せ方を変えると、違う気づきがある。

技術: HTML5, Vanilla JS, D3.js(ツリーマップ), 統計ダッシュボードAPI

工夫: D3.jsのtreemapレイアウトを使用し、年度スライダーでスムーズにアニメーション。各ブロックをクリックすると、その産業の30年推移を折れ線グラフで表示。産業カテゴリごとに色分け(製造=青系、農林漁業=緑系、サービス=オレンジ系)。

コメント

タイトルとURLをコピーしました
🤖

AIアシスタント

氷見AI実装ラボ