web-dev-qa-db-ja.com

時間の経過に伴うイベント発生の視覚化

時間範囲tが短い開始 – t終わり （≈90秒）とその時点で発生したイベントを表す時点のリスト。これらの発生の簡潔な視覚化を探しています。（a）イベントの数と（b）クラスターのようなパターンまたは特定のポイントのバイアスを示しています。

これまでの私の考え：

  • イベントごとに1ティックのタイムライン
  • イベント密度に応じて色分けされた離散セルのタイムライン（ヒートマップを参照）
  • 時計のような循環タイムライン。時計やストップウォッチのように見えるかもしれません

enter image description here（ひどい画質で申し訳ありません）

コメントやその他のアイデアはありますか？

おまけの質問：イベントが少数（<10）の異なるカテゴリーに属する場合、これらのアイデアを拡張するにはどうすればよいですか？

info-visualisationtime
9
Sebastian Negraszus

簡単なタイムラインをヒストグラムで実行して、最終結果を得ることができます。個々のボックスはイベントであり、ヒストグラムの高さは個々の時間枠でのクラスター化とピーク化を示します。

データが離散的ではなく連続的である場合、折れ線グラフまたは面グラフを使用できます。

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

フィードバックに基づいて、回答を絞り込みます。

7
rk.

Rkの回答を少し再生して、次のようなメタデータの一部によってイベントを視覚的にクラスター化します。

  • カテゴリー
  • 期間
  • 領域

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

このアプローチは、スケーリングの問題を抱えて座礁し、間違いなく開発集約型です。そのようなクラスタリングのビジネス価値によって優先順位を付けます。

3
New Alexandria

最初の2つの画像、特に2番目の画像を組み合わせて使用​​することをお勧めします。本質的には1D ヒートマップ です。

enter image description here

HTML、CSS、JSを使用して簡単に作成できます。

<!-- HTML -->
<div class="bar"></div>

/* CSS */
.bar {
    height:30px;
    border:1px darkgray solid;
    width:500px;
    position:relative;
    overflow:hidden;
}
.bar span {
    width:10px;
    height:30px;
    background-image:linear-gradient(to right, transparent, red, transparent);
    position:absolute;
    top:0;
}

// JS
function HeatBar(bar){
    this._bar = bar;
}

HeatBar.prototype.createTick = function(/* float{0,1} */ atOffset, opacity){
    var bw = this._bar.offsetWidth * atOffset;
    var el = document.createElement("span");
    el.style.opacity = opacity;
    el.style.left = bw + "px";
    this._bar.appendChild(el);
};

var barElem = document.querySelector(".bar"),
    bar = new HeatBar(barElem),
    numTotal = 50;
for(var x = 0; x < numTotal; x++)
    bar.createTick(Math.random(), 10/numTotal);

デモ 。要素の総数に基づいて不透明度を変更していることに注意してください。

必要に応じて、クリック時にグラデーションなしで線のみを表示する機能を追加することもできます。

enter image description here

追加コード：

/* CSS */
.removeGradient span {
    background-image:none;
    background-color:red;
    transform:scaleX(.2);
}

// JS
barElem.addEventListener('mousedown', function() {
    this.classList.add("removeGradient");
}, false);

barElem.addEventListener('mouseup', function() {
    this.classList.remove("removeGradient");
}, false);

複数の.bar要素を互いに積み重ねて（absoluteの位置と色の変更を使用して）、または1つの線の色を変更する.bar要素はJSロジックを使用しており、最終的に this のように見えます。

enter image description here

2
Zach Saucier

後続のイベント間のタイミングを示す散布図であるタイムマップを作成できます。散布図の各ポイントは、時間内のイベントを表します。イベントのx座標は、イベント自体と前のイベントの間の時間です。 y座標は、イベント自体と後続のイベントの間の時間です。ここでいくつかのクールな例を参照してください：

https://districtdatalabs.silvrback.com/time-maps-visualizing-discrete-events-across-many-timescales

0
Max Watson