時系列特化のグラフ描画ライブラリ(Timescope)の紹介

この記事は Qiita Advent Calendar 2025 - 時系列データ の6日目の記事です。

ちょっと珍しい、時系列特化のグラフ描画ライブラリの紹介を行います。

Timescope

時系列に特化した、グラフ描画ライブラリです。

グラフ描画だけでなく、Time picker としても使えますし、動画などのシークバーの代わりにもなります。

聞いたことないけど…？

はい。 私が作りました（自作自演…）
そしてこの記事で、初お披露目です。

Why?

欲しいものが無かったら、作るしかないわけで…。

欲しかったもの

• 時間軸だけの表示ができる
  • その時間軸から任意の時刻を選択できる
• 時間軸を(シームレスに)スクロールできる
  • ズームイン・ズームアウトができる
    • タッチにも対応
  • そこに折れ線グラフが書ける (!?)
    • 折れ線だけじゃなく時間枠（ガントチャート）の表示もできる
  • グラフの数値軸に対してはスクロールできなくてもいい
    • むしろ迷子になるから無い方がいい
• データはチャンクごとにロードできる

固定レイアウトや固定データのグラフライブラリは数多とありますが、ちょうど CGI の地図しかないところに登場した Google Maps のように、インタラクティブなものが欲しかったわけです。

できた

というわけで、ある程度動くものができました。
それがこちらです。

リポジトリ: （スターお願いします！）

ドキュメント:

こんな見た目をしています。

グラフ描画ライブラリなので、もちろんグラフも描けます。

API をもう少し試行錯誤するかもしれないので、まずは v0.0.0-alpha.0 という変なバージョン番号から始めています（笑

それでもいいよという奇特な方がいらっしゃいましたら、ぜひ使ってみてフィードバックをください。 他の方の実用にも耐えられるのか、知りたいです。

余談

ところで、実装していくうちに、欲しかった機能に加えて何故か増えてしまった能力がいくつかあります。

その中でも特に変なのが、任意精度の時間分解能です。 Date / double の範囲を超えて、宇宙創生以前や、ms, us, ns, ps... さらにはクォークの崩壊時間の世界より短い時間を扱うことができます。 完全にオーバーテクノロジーです…。

リンク先に動くデモがあるので、ぜひグリグリと動かしてみてください。メモリと時間の許す限り、無限にズームイン・ズームアウト・スクロールができます。

それと、レンダリングは Web Worker 側で行っています。 メインスレッドが忙しくてもアニメーションを処理落ちさせたくないという一心で実装しました。

条件が良ければ 60fps出る ので、気持ちがいいです。
スマホ・タブレットでもぬるっと動きます。

まとめ

以上、自作の時系列特化のグラフ描画ライブラリ Timescope のご紹介でした。

もう一度、リンクを貼っておきます。 スターお願いします！

We're hiring (?)

…と一度言ってみたかったのですが、ごめんなさい、今のところ募集はしていないです。

逆に「お仕事を募集中」です！

地図を使ったシステム開発などが得意です。
もちろん、この Timescope を組み込んだシステムの開発や、優先カスタマイズ要望などにも対応可能です。

よろしくお願いします。