この記事は Nikkei Advent Calendar 2022 の 3 日目の記事です。
データビジュアルセンター戦略コンテンツグループという所に所属しています、久能です。私は主に 日経ビジュアルデータ のコンテンツ制作のディレクションやデザインを担当しています。今回は、今までの取り組みで得られたノウハウを活かし、プライベートな制作でデータビジュアライゼーションのプロトタイプを作成したのでご紹介します。
概要
経済産業省・資源エネルギー庁 が、 事業者別の発電所数・出力 をまとめていたので、こちらをもとにビジュアライズをしました。国内の事業者ごとの新エネルギーの最大出力量の合計をランキングにしています。
成果物としてはこちらの様なものが出来ました。
日経ではカーボンゼロの特集ページを用意しており、再生エネルギーに関するニュースもまとめられています。ユーザー的・社内的にも新エネルギーへの注目が高まっている中で、どこがどれくらい発電しているのか見やすくまとめられたものを見つけられなかったため、業界を俯瞰するツールとしては価値があるのではないか、と思い制作を始めました。
ビジュアライズのデザイン
発電種ごとにカラーリングし、事業者ごとにスタックバーチャートにしています。その上で、発電量の合計値でランキングにする設計にしています。
また、事業者をクリックすることで右カラムにデータの内訳の詳細の値や、火力や水力など新エネルギー以外での発電がある場合に、そのデータも表示させます。
実装について
Vuex で整形したデータやツールの状態を管理し、内容に応じて Vue.js で DOM を制御しています。データ整形やチャート描画に関しては D3.js を利用しています。
主な機能
主要な機能として、下記の要件を実装しました。
- カテゴリごとにフィルタリングをかけたランキングにできる
- 事業者ごとの詳細なデータを表示させる
- 量が多いため、ページネーションをつける
ー
要件に対する実装（1） カテゴリごとにフィルタリングをかけたランキングにできる
凡例を兼ねたボタンを押すことで、ランキングからエネルギー種別を絞り込めるように。
ー
要件に対する実装（2） 事業者ごとの詳細なデータを表示させる
6 年分のデータが同様の形式で用意できたため、右カラムには選択した事業者について下記を表示できるように。
- 入手できた 6 年分の推移をバーチャートで描画
- 新エネルギー以外の火力・水力・原子力についての実績がある場合、要素が追加されて発電量の数値が表示される
ー
要件に対する実装（3） 量が多いため、ページネーションをつける
ページネーションの機能を実装して、 100 件ごと表示されるように。
数値が見やすいWebタイポグラフィ
デジタルデバイスに最適化されたフォントは Apple の San Francisco シリーズや、 Google の Roboto などが有名ですが、今回は Inter という書体を使用しています。
ビジュアルデータでは見やすさや使い勝手の良さ、体験の統一感の観点から Roboto を webfont としてよく利用しますが、一方で「それ以外の選択肢は無いのか？」と個人的に探していました。そんな中、 Google Fonts に Inter が追加されているのを発見しました。良さそうだなと思い調べてみたところ、データビジュアライゼーションと相性が良いことがわかりました。
文字の組み方やスタイルを変更できる OpenType 機能も備えており、 CSS で文字の組み方を font-feature-settings プロパティを記述することで変えることが出来ます。今回はランキング形式で数値も並べて掲載するため、セット幅（1 文字の幅）を等幅にすることで数値の比較をしやすくしました。
画像の左の様に、等幅にしない状態では数字の形によって横幅が変わり、ガタガタとした見え方になりますが、右の状態の様に等幅にすることで、上下での数値の比較が視覚的にしやすくなっています。
（余談） スイススタイルを感じさせるInter
Inter は、スイス生まれの代表的なフォントの Helvetica や Univers を思わせるフォルムをしています。スイススタイルとも呼ばれる国際タイポグラフィー様式を感じさせるフォントセットで、 Univers 好きだった私は一瞬で「これだ！！！」と気に入りました。
3 種類を並べて比較してみましたが、 Inter はどちらのフォントにもそれぞれの共通点があり、 2 種類のフォントの中間である印象を受けます。
社内の反応は
日経のコンテンツとして公開できないだろうかと上司に提案をしてみたところ、社内の識者のところへ持って行ってもらえました。各所で好評をいただいたようで、実際に記事化の検討もされました。
検討や議論の結果、使用しているデータ自体が業界の地図としては適切でないという判断に至り（詳細は複雑で長くなるため、割愛させていただきますが）、残念ながらコンテンツ化には至りませんでした。しかし、こうした自分発信のコンテンツも受け入れてもらえたのは次へのモチベーションに繋がったため、引き続きチャレンジしてみようと思っています。
さいごに
今回はスタックバーチャートとランキングを組み合わせたビジュアライズをご紹介しました。 残念ながらコンテンツとして成立は出来ませんでしたが、複数カテゴリの合計値で比較するというツールとしては汎用性を持ったものになったかと思います。
最後までお読みいただき、ありがとうございました。
