Summary

• visualize national revenue and expenditure using interactive sunburst charts
• add utility to parse nested budget JSON data
• implement BudgetSunburst component with drill-down animation
• show revenue and expenditure charts on the home page
• adjust layout and remove Google font dependency
• add D3 and types

Testing

• npm run lint
• npm run build

https://chatgpt.com/codex/tasks/task_e_685fff9bf9488329bed0eaeaf7ad730f

• 国家予算の歳入・歳出を可視化します
• front/src/data 内の歳入・歳出それぞれの json ファイルを使ってください
• それぞれの json ファイルは，主管 -> 部 -> 款 -> 項 -> 金額 (千円) / 所管 → 組織 → 項 → 金額(千円) のようなネストになっています
• 画面に 2 つの大きな円グラフを左右 (縦長画面の場合は上下) に表示し，歳入，歳出の順に表示してください
• 円グラフは，表示時や表示が変わる時に，自然でふわっとした美しいアニメーションをつけてください
• それぞれ，最初は円グラフの要素は，一番荒い，主管 / 所管を項目とします
• その状態から，円グラフの特定の項目がホバーされる (スマホの場合はタップ) と，その項目の部分だけ外周に広がって，より細かい項目を表示してください．これを繰り返します．
  --
• 表示される時の円グラフのアニメーションがありません．自然で美しいアニメーションにしてください
• グラフホバー (スマホの場合はタップ) のロジックを変更します．ホバー/タップした項目の，解説をホバーで表示してください
  --