データ可視化 — 台湾の性暴力統計ダッシュボード

今回このテーマを作ろうと思ったのは、ニュースを見かけたこととデータが比較的揃っていたからだ。ちょうどSvelte自体の普及にもつながると思い、構想を練りながら実装してみた。成果物はこちら。

データ可視化はずっと僕がしっかり研究したい領域の一つだった。単に派手なチャートを作るだけでなく、そこからストーリーテリングのスキルを鍛えたいと思っており、データ可視化はその練習台としてうってつけだった。

これまでもいくつかプロジェクトを作ってきたが、どれも少し急ぎ足で、細部まで作り込めなかった。今回を機に、よく使うコンポーネントをきちんと整理しておこうと考えた。

• 2017年に作った勞工大代誌
• 2017年に作ったYear In Review
• 2020年4月に作った福岡の感染状況：今見るとチャートのレイアウトが完全に崩れている。当時は感染拡大がこれほど長引くとは思っていなかった

データの整理

データの大半は衛生福利部からのもので、かなり詳細なデータだった。ただデータはExcel形式が中心だったため、扱いやすいデータ形式に変換するのに結構な時間がかかった。

実装

技術的には Svelte と d3 を使って開発した。僕自身が使いやすいチャートコンポーネント群を少しずつ実装していきたいと思っている。現状はまだユースケースを模索している段階なので、コンポーネントの作りがやや融通の利かない部分もあるが、今後徐々に改善していく予定だ。

一般的な折れ線グラフで考慮すべき要素：

• x軸、y軸（axis）と目盛り（tick）
• x軸とy軸のスケール（scale）設定
• 垂直線・水平線のスタイル設定
• グラフのタイトルと単位
• テキスト（text）の設定
• トランジション（transition）
• ツールチップ（tooltip）：折れ線にホバーしたときのインタラクション

d3 に関しては、今回は d3-scale のみを使用しており、以下のような d3 特有のパターンも使っていない。

d3.select('svg')
	.enter()
	.data(data)
	.append()
	...

主な理由は、これらの操作をすべてSvelte側に任せたかったからだ。ただ、transition や enter, exit のパターンを扱う際にはかなり窮屈さを感じた。d3ならAPI呼び出し一発で処理できるところが、Svelteでは別途対応が必要になるからだ。このあたりはどう調整するのがベストか、もう少し検討してみたい。また、今回は比較的新しいSnowpackを採用してみたが、開発体験が本当にスムーズでおすすめだ。

バックエンドにはKotlinを使ってAPIサーバーを構築した。初めて書いてみてとても快適だったのと、今後バッチ処理やマルチスレッドなどのタスクを行いたくなった際に、Kotlinを直接使った方が何かと便利だと思ったからだ。サーバーはApp Engineに直接デプロイしており、Gradleとの組み合わせは非常に扱いやすかった。

振り返り

大体2日ほどで主要な部分は実装を終え、残りの時間は細部の作り込みとインタラクションに充てた。今回のインタラクションは正直それほど多くなく、主にどう情報を提示すれば伝わりやすいかを考えていた。今回はデータをシンプルに表示することが中心だったが、今後のプロジェクトではさらなる可能性やインタラクションを提供したい。また、インタラクションを通じていかにストーリーを伝えるかも突き詰めていきたい。