データの視覚化 — 台湾の性的暴行統計
# フロントエンドこのテーマを実装しようと思ったのは、ニュースを見て、さらにデータが比較的整っていたからです。ちょうどSvelte自体を広める良い機会でもあると思い、構想しながら実装を進めました。完成品はこちらです。
データビジュアライゼーションは、私がじっくり研究したい分野の一つで、単に派手なグラフを作るだけではなく、ストーリーテリングの技術を磨くことができると思っています。データビジュアライゼーションは、まさにそのための良い練習材料です。
以前にもいくつかのプロジェクトを進めてきましたが、どれも少し急いで作った感があり、細部にこだわることができませんでした。これを機に、よく使うコンポーネントを整理していこうと思います。
- 2017年に作成した労働者大事典
- 2017年に作成したYear In Review
- 2020年4月に作成した福岡の感染状況：現在、グラフが崩れてしまっており、当初はこんなに長引くとは思っていませんでした。
データ整理
データの大部分は衛福部から取得しました。データは非常に詳細です。ただし、データは主にExcel形式で提供されているため、処理しやすいデータ形式に変換するのにかなりの時間がかかりました。
実装
技術的には、Svelteとd3を使用して開発を行いました。自分が使いやすいグラフコンポーネントをゆっくりと実装していきたいと考えており、現在は使用シーンを観察中です。そのため、コンポーネントはまだ少し固定的な部分がありますが、今後徐々に改良していく予定です。
通常の折れ線グラフで考慮すべき要素：
- x, y軸とティック
- xとyのスケール設定
- 縦線、横線のスタイル設定
- グラフのタイトルと単位
- テキスト設定
- トランジション
- ツールチップ：グラフにホバーした際の動作
d3については、ここではd3-scaleしか使用しておらず、d3のpatternは使用していません。たとえば：
d3.select('svg')
.enter()
.data(data)
.append()
...これは、これらの操作をすべてSvelteに任せたいからです。しかし、トランジションやエンター・イグジットパターンを扱う際は少し手間がかかりました。d3はAPIを直接呼び出すことができるのですが、Svelteでは別途処理が必要です。この部分は今後どのように調整するか検討中です。また、今回新しいSnowpackを採用しましたが、開発が非常にスムーズで、皆さんにもお勧めです。
バックエンドはKotlinをAPIサーバーとして使用しています。初めて書いたのですが、とても快適でした。また、今後スケジューリングやマルチスレッドのようなタスクを行いたい場合、直接Kotlinを使う方が便利です。サーバーはApp Engineに直接デプロイしており、Gradleを使用することで非常に便利になっています。
反省
主要な部分は約2日で実装でき、その後は細部やインタラクションの調整を行いました。正直なところ、今回のインタラクションはあまり多くありませんでしたが、情報をどのように提示するかを考えることが主な目的でした。今回は単純にデータを表示することに主眼を置いていますが、今後のプロジェクトではもっと多くの可能性とインタラクションを提供したいと思っています。また、インタラクションを通じてストーリーを伝える方法も模索していきます。