こんにちは！ YOUTRUSTでWebエンジニアをしている中谷 ( YOUTRUST )です！
前回の記事の登場から半年以上経ってしまっていました😢
私の記事の更新を心待ちにしてくださっていた方、本当にお待たせしました！🙏 🎉
前回の登場の際は、入社直後で admin（社内用の管理画面）の実装を行っていましたが、その後スプリントに参加し、開発を進めています！
今回は D3.js を用いた時系列データの可視化を実装したことについてお話ししたいと思います。
D3.jsとは？
D3.js は、データを柔軟に可視化するための強力なJavaScriptライブラリです。
YOUTRUSTでは様々なプロジェクトが同時に並行して進行していますが、僕はここ1ヶ月ほど、時系列データをよりわかりやすく見せるためのグラフビューの機能の開発を行なっています。
そのプロジェクトの中でD3.jsを使用しているのですが、とても便利だな！と感じたポイントの一つが時間スケールの変換機能です。
なぜ時間スケールが必要なのか？
時系列データをグラフ上に描画する際、日付情報を画面上のピクセル座標に変換する必要があります。
例えば、こんな変換が必要になる場合があります。
- 2020年4月 → X座標 100px
- 2023年12月 → X座標 850px
これを自前で実装しようとすると、 うるう年の考慮や月ごとの日数の違い、線形補間（特定日付 → 座標計算）など、かなり面倒な計算が必要になってきます。
scaleTimeのシンプルな実装例
D3.js の scaleTime を使えば、このような座標変換は簡単に行えます。
import { scaleTime } from 'd3-scale'; // 時間スケールの作成 const xScale = scaleTime() .domain([startMonth, endMonth]) // 表示したい時間の範囲 .range([0, totalSvgWidth]); // ピクセル範囲
一度 xScale を定義すれば、日付を渡すだけで対応する座標を取得できます。
// 使用例：2022年6月のX座標を取得 const xPosition = xScale(new Date('2022-06-01'));
さらに domain の順序を [endMonth, startMonth] と逆にすれば、X軸の方向をそのまま反転させることもできます。
「現在」を右側ではなく左側に持ってきたいケースでも簡単に対応可能ですね👀
例えばこんな感じに簡単にできます。
このように左側を現在に持ってくることができます。
scaleTime が自動でやってくれること
scaleTime を使うことで、以下のような面倒な処理を意識する必要がなくなります。
- うるう年
- 月ごとの日数
- 線形補間
- タイムゾーン
これらを考慮して実装するのはかなり面倒ですが、それを考慮せずに実装できるのは、とても便利でした。
まとめ
D3.js の scaleTime を使うことで、 複雑な日付計算を気にせず 宣言的に時系列データの座標変換 を行えるのが最大の魅力です。
「宣言的に日付→ピクセルのマッピングができる」のは本当に便利でした。
データ可視化をする際に、時間軸を使う必要があるな…🤔と思った方はぜひ、scaleTime を試してみてください！
scaleTime を使えばデータの可視化を自由にできるので、大変おすすめです！
YOUTRUSTでは様々なプロジェクトが走っており、色々な開発が進行しています。
日々とても楽しく開発を行える環境ですので、少しでも興味を持った方はぜひご応募ください！✨
