§01-04Data Visualization

タイムライン

出来事を時系列に縦または横に並べて示す。

出来事を時間順に一本の線上に並べ、前後関係を一目で追えるようにする。更新履歴や配送状況など、順序が意味を持つ情報に向く。

実装のポイント

ol と border-l で縦線を引き、マーカーは absolute で線上に載せる。時刻は time 要素の datetime に機械可読な値を入れ、相対表記と併用する。