このテーマを実装しようと思ったのは、ニュースを見てデータも比較的完全だったためで、ちょうどSvelte自体も広めることができると思い、構想しながら実装しました。完成品はこちらです。

データの可視化は、私が研究したい分野の一つであり、単に派手なグラフを作るだけではなく、ストーリーテリングのスキルを磨くために活用したいと考えています。データの可視化は、練習材料として非常に適していると思います。

以前もいくつかのプロジェクトを進めてきましたが、すべてが急いでいるように感じ、細部にまで手を入れる時間がありませんでした。今回からは、よく使うコンポーネントをきちんと整理することにしました。

• 2017年に作成した労働大代誌
• 2017年に作成したYear In Review
• 2020年4月に作成した福岡の感染状況：現在、グラフが崩れてしまっていますが、当初は感染がこんなに長引くとは思っていませんでした

データ整理

データの大部分は衛生福祉部から取得しています。データは非常に詳細ですが、主にExcel形式で提供されており、より扱いやすい形式に変換するのにかなりの時間がかかりました。

実装

技術的には、開発にSvelteとd3を使用しました。自分自身が使いやすいグラフコンポーネントを少しずつ実装したいと思っていますが、現在は使用シナリオを観察している段階なので、コンポーネントはまだ固定されています。今後、改善していく予定です。

通常の折れ線グラフには以下の要素が考慮されます：

• x軸、y軸と目盛り
• x軸とy軸のスケール設定
• 直線や水平線のスタイル設定
• グラフのタイトルと単位
• テキスト設定
• トランジション
• ツールチップ：折れ線グラフにホバーしたときの動作

d3に関しては、ここではd3-scaleしか使用しておらず、次のようなd3のパターンは使用していません：

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

これは主に、これらの操作をすべてSvelteに処理させたかったためですが、トランジションやenter、exitパターンの実装は少し制約がありました。d3ではAPIを直接呼び出して処理できますが、Svelteでは別途処理する必要があります。この部分は、どのように調整するのが最適かを見ていきます。また、今回は比較的新しいSnowpackも使用しましたが、開発は非常にスムーズで、皆さんにおすすめです。

バックエンドでは、APIサーバーとしてKotlinを使用しました。初めて使ってみてとても快適だと感じましたし、また後でスケジュールやマルチスレッドなどのタスクを実行したい場合にも、Kotlinを直接使う方が便利です。サーバーはApp Engineに直接デプロイし、Gradleと組み合わせると非常に便利です。

反省

メインの部分を実装するのに約2日かかりましたが、後半は細部やインタラクションに取り組んでいました。今回のインタラクションは正直あまり多くなかったですが、主に情報をどのように表示するかを考えました。今回はデータの表示が主眼でしたが、将来のプロジェクトではさらに多くの可能性とインタラクションを提供したいと考えています。また、インタラクションを通じてストーリーテリングする方法も検討したいと思っています。