Creativity Sharing and
Entrepreneurial Support

様々な時間スケールを直感的に把握してコントロール! Timeline jQuery Plugin

License : BSD2ライセンス
Webページに時間軸バーを簡単に組み込む事が出来る、オープンソースのjQueryプラグインです。元号や地質時代のように不等間隔な時間軸を色分け表示することで、データと時間(時代)の関係性を直感的に理解することができます。また、和暦/西暦の切り替えや、任意の時間帯のズームイン・アウトといった操作も瞬時に可能なため、データの時間方向の俯瞰と深堀りをより効率的に行えます。 これまでのWebGISでは、Cesiumなどを除くと一般に時間変化を扱うことが不得意でした。一方で、サイバーフィジカル空間でのWebGIS活用では、時系列データの可視化は避けて通ることができないため、誰もが使いやすいAPIが求められています。 本プラグインはLODチャレンジ2015「ひまわり8号リアルタイムWeb -手のひらの上にある今、この瞬間の地球」、「カラーマップ新聞記事Web〜いつどんなことが話題だったかを一目で見つける」の両エントリー作品で利用していた時間スライダー機能を発展させたものです。
Update: Oct 19, 2020

Text detail
【エントリー部門】 アプリケーション部門 【応募者属性】 社会人 【応募者名】 川鍋友宏(情報通信研究機構) 【エントリー作品のURL】 https://www.hjcg.net/data-platform/ 【エントリー作品の権利指定】 BSD2ライセンス 【利用しているオープンデータ】 (サンプルプログラムで利用しているもの) ・ひまわり8号観測データ(気象庁経由でNICTなど4機関から公開) 【利用しているパートナーリソース】 k2goプロジェクト(http://k2go.jp/) 【エントリー作品の詳細説明】 Webページに時間軸バーを簡単に組み込む事が出来る、オープンソースのjQueryプラグインです。元号や地質時代のように不等間隔な時間軸を色分け表示することで、データと時間(時代)の関係性を直感的に理解することができます。また、和暦/西暦の切り替えや、任意の時間帯のズームイン・アウトといった操作も瞬時に可能なため、データの時間方向の俯瞰と深堀りをより効率的に行えます。 これまでのWebGISでは、Cesiumなどを除くと一般に時間変化を扱うことが不得意でした。一方で、サイバーフィジカル空間でのWebGIS活用では、時系列データの可視化は避けて通ることができないため、誰もが使いやすいAPIが求められています。 本プラグインはLODチャレンジ2015「ひまわり8号リアルタイムWeb -手のひらの上にある今、この瞬間の地球」、「カラーマップ新聞記事Web〜いつどんなことが話題だったかを一目で見つける」の両エントリー作品で利用していた時間スライダー機能を発展させたものです。
Update: Oct 19, 2020 (川鍋 友宏)
Image detail
元号カラーバーを用いたサンプルです。 画面中央下にある赤いツマミ(スライダー)を左右に動かすと任意の時間に移動することができます。 スライダー両脇の"prev","next"ボタンを押すと元号カラーバーが一元号ぶん過去/未来に移動します。 画面右側の"+","-"ボタンを押すと、表示されている時間範囲を拡大/縮小することができます。 近代(明治時代以降)とくらべ、江戸時代は短い期間で元号が変わったことが、視覚的に理解できます。社会変動的な事件・出来事などのデータと組み合わせることで、その時代背景の理解を深めることにつなげることができます。
Update: Oct 15, 2020 (川鍋 友宏)
Web page detail
上記の元号カラーバーを実際に試すことが出来るサンプルページです。
Update: Oct 15, 2020 (川鍋 友宏)
Image detail
曜日別カラーバーのサンプルです。 赤が日曜日、青が土曜日です。平日を灰色で表しました。もちろん他の色を指定することも可能です。 "<",">"ボタンを押すと一日、"<<",">>"で一週間、"<<<",">>>"で一ヶ月ぶん過去/未来へ移動します。 日単位の社会データの時系列可視化に用いれば、曜日ごと、あるいは週末ごとの特徴を視覚的に掴むことができます。
Update: Oct 15, 2020 (川鍋 友宏)
Web page detail
上記の曜日別カラーバーを実際に試すことが出来るサンプルページです。
Update: Oct 15, 2020 (川鍋 友宏)
Image detail
動画再生のコントローラとして利用した例です。 画面上部の▶(再生)、▶▶(早送り)といった通常の操作ボタンに加えて、画面下部のTimelineスライダーで任意の時間に移動することができます。
Update: Oct 15, 2020 (川鍋 友宏)
Web page detail
上記の動画再生コントローラ例を実際に試すことが出来るサンプルページです。
Update: Oct 15, 2020 (川鍋 友宏)
Image detail
NPO太陽放射コンソーシアムが提供する日射量データのリアルタイム可視化WebサイトでTimelineプラグインを利用しています。日射量その他のデータをWebGIS上に重畳表示することができます。WebGISアプリは MapboxGL JS で実装しています。他にもオープンソースな三次元WebGISであるiTownsでTimelineプラグインが利用可能なことを確認しています。 WebGISでの応用例は今後順次公開予定です。
Update: Oct 15, 2020 (川鍋 友宏)
Web page detail
GitHub - mapbox/mapbox-gl-js: Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL https://github.com/mapbox/mapbox-gl-js
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL - mapbox/mapbox-gl-js
Update: Oct 15, 2020 (川鍋 友宏)
Web page detail
iTowns http://www.itowns-project.org/
iTowns is a JS/WebGL framework for 3D geospatial data visualization
Update: Oct 15, 2020 (川鍋 友宏)
Image detail
Timelineプラグインは、NICT時空間データプラットフォームプロジェクトで開発している「STARS同期機能」と組み合わせて使うことで、複数ブラウザウィンドウ間でデータの時間・空間方向の同期が可能です。 このサンプルでは、「ひまわり8号リアルタイムWeb」の全16バンド画像のブラウザウィンドウを同時に表示して、その時刻と空間(画像の位置や拡大率)を同期させています。
Update: Oct 17, 2020 (川鍋 友宏)
Web page detail
上記のSTARS同期機能を実際に試すことができるサンプルページです。
Update: Oct 17, 2020 (川鍋 友宏)
Web page detail
本プラグインソースコードを配布しているWebページです。APIリファレンスや、ここで紹介しなかったサンプルページもこちらにあります。
Webパーツ Timeline - K2GO http://www.k2go.jp/public/Timeline/
TOP PUBLIC 映像IoT 高速通信プロトコル LPWA ビッグデータ/AI TimelinejQuery Plugin TOP PUBLIC Timeline 概要 Webページに時間軸バーを簡単に組み込む事が出来るjqueryプラグインです。 サンプルはこちら サンプル1(基本機能確認用サンプル) サンプル2(機能実装例) サンプル3(元号カラーバー表示) サンプル4(任意期間カラーバー表示) サンプル5(日別カラーバー表示) サンプル6(ビデオコントローラー例) 変更履歴 2020年08月05日 バージョン1.7.0リリース オプションにpickDoubleTapが追加され、摘み(ポインタ)をダブルクリック(ダブルタップ)した際に呼び出されるコールバック関数を指定出来るようになりました。 2020年07月30日 バージョン1.6.0リリース オプションにpickTapHoldが....
Update: Oct 15, 2020 (川鍋 友宏)
Idea detail
本プラグインのベースとなった「時間スライダー機能」の実装例です。
Update: Oct 15, 2020 (川鍋 友宏)
Idea detail
本プラグインのベースとなった「時間スライダー機能」の実装例です。
Update: Oct 15, 2020 (川鍋 友宏)

Grant Information

Suggested fund information for realizing the idea.

Comments