Apache EChart を使って、都道府県別に酒造好適米 (日本酒向けの米) の銘柄の分布を表示するページを作ってみました。
ページ: https://shihono-nextjs-test.vercel.app/misc/sake-seisan
Claude を使って可視化ライブラリの選定からページの実装までしました。 生成結果のコードはそのまま使わず、表示スタイルやリンク先を一部調整しています。
学んだことを記録しておきます。
// package.json でのバージョン指定 "echarts": "^6.1.0",
データの解説
(可視化の実装とは直接関係ないのですが) 今回のデータについて軽く解説します。
日本酒向けの米、酒米は正式には 酒造好適米 といい、農林水産省のページでは食用の米とは別カテゴリです。
食用の米と同様、酒米も複数の銘柄があります。 日本酒原料米をめぐる状況 (PDF) によると、 「山田錦」、「五百万石」の２銘柄で全生産量の５割以上を占めてい ます。
しかし、都道府県によって生産する銘柄に違いがあります。
令和7年産酒造好適米の生産状況等 に産地・銘柄別データがあります。 今回はこちらのデータを使いました。
残念なことに pdf と 神 エクセルしかないため、 json に変換しました。
先にスキーマを決めた上で Claude を使って変換しています。
下記のように都道府県ごと生産量・内訳を持ちます。
{ "prefectures": [ { "name": "兵庫", "total": 24829.9, "brands": [ { "name": "山田錦", "value": 18516.45 } ] } ] }
Apache EChart
ブログに埋め込み可能かつ、都道府県ごとグラフを切り替えるような機能が欲しいという要件を満たしているので Apache EChart を選びました。
記法は matplotlib に近い気がします。 CDN を使えば静的サイトにも埋め込めます。 下記のグラフは jsDelivr 埋め込んでいます。
Claude の生成結果を一部レイアウト変更しています。データは next.js の表示しているのと同じ数値です。
<div id="sake-bar-chart" style="width:100%;height:480px;"></div> <script src="https://cdn.jsdelivr.net/npm/echarts@6.1.0/dist/echarts.min.js"></script> <script> (function () { // https://www.maff.go.jp/j/seisaku_tokatu/kikaku/attach/xls/sake_r7seisan-7.xlsx var year = "R7"; var unit = "玄米トン"; var top10 = [ { name: "兵庫", total: 24829.9 }, { name: "新潟", total: 9911.91 }, { name: "岡山", total: 6177.77 }, { name: "長野", total: 5391.99 }, { name: "秋田", total: 3729.5 }, { name: "広島", total: 3370.74 }, { name: "富山", total: 3182.18 }, { name: "山形", total: 3067.72 }, { name: "山口", total: 2572.93 }, { name: "福井", total: 2448.99 } ]; // chart の初期化 var el = document.getElementById('sake-bar-chart'); var chart = echarts.init(el); // 描画したい情報を指定 chart.setOption({ title: { text: '生産量 上位10都道府県（' + year + '年産・' + unit + '）' }, tooltip: { trigger: 'item', formatter: '{b}: {c} ' + unit }, xAxis: { type: 'category', data: top10.map(function (p) { return p.name; }), axisLabel: { fontSize: 11 } }, yAxis: { type: 'value' }, series: [ { type: 'bar', // 棒グラフを指定 data: top10.map(function (p) { return p.total; }) } ] }); window.addEventListener('resize', function () { chart.resize(); }); })(); </script>
表示結果は以下の通り。 tooltip を指定しているため、ホバーで数値が表示されます。
nextjs のページでは都道府県を指定すると切り替えるようにしています。
これは useEffect を使ってデータを更新しているだけです。
分析
都道府県ごとの銘柄を見てみます。 比較しやすいよう、積み上げグラフにしてみました。 その県発祥の品種が強い印象。
- 生産量の最も多い兵庫は「山田錦」が約75%: 山田錦は兵庫が発祥の品種
- 新潟県は「五百万石」が約74%: 五百万石 は新潟で誕生した品種
- 岡山県は「雄町」 が多いわけではなく、意外と山田錦と半々のシェア
- 長野県は 「美山錦」
- 秋田県は「秋田酒こまち」、 秋田県独自の品種。他にも複数開発している模様 (秋田の酒米の秘密 - 美酒王国秋田[秋田県酒造協同組合]│秋田の酒蔵や日本酒の情報)
