web-dev-qa-db-fra.com

Visualisation des événements survenus dans le temps

J'ai une plage de temps courte tdébut - tfin (≈ 90 secondes) et une liste de points dans le temps qui représentent les événements qui se sont produits à ce point. Je suis à la recherche d'une visualisation concise de ces événements qui montre (a) le nombre d'événements et (b) les modèles comme les clusters ou un biais pour un certain point.

Mes idées jusqu'à présent:

  • une chronologie avec des ticks simples par événement
  • une chronologie avec des cellules discrètes, colorées correspondant à la densité des événements (cf. carte thermique)
  • une chronologie circulaire, comme une horloge; peut-être même ressembler à une horloge ou un chronomètre

enter image description here(Désolé pour la qualité d'image terrible)

Des commentaires ou d'autres idées?

Question bonus: comment étendre ces idées si les événements appartiennent à un petit nombre (<10) de catégories différentes?

info-visualisationtime
9
Sebastian Negraszus

Vous pouvez faire une chronologie simple avec un histogramme pour atteindre votre résultat final. Les cases individuelles sont des événements et la hauteur de l'histogramme vous indique le regroupement et le pic sur des périodes individuelles.

Si vos données ne sont pas discrètes et sont continues, vous pouvez utiliser un graphique linéaire ou un graphique en aires .

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Je vais affiner la réponse en fonction de vos commentaires.

7
rk.

En jouant un peu sur les réponses de rk, je regrouperais visuellement les événements par un morceau de métadonnées, comme

  • catégorie
  • durée
  • région

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Cette approche échouera avec des problèmes d'échelle, et est certainement plus intensive en termes de développement. Prioriser par la valeur commerciale d'un tel clustering.

3
New Alexandria

Je recommande d'utiliser une combinaison des deux premières images, en particulier la seconde. Il s'agit essentiellement d'un 1D carte thermique .

enter image description here

Il est assez facile d'en créer un en utilisant HTML, CSS et 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);

Démo . Notez que je modifie l'opacité en fonction du nombre total d'éléments.

Vous pouvez également ajouter des fonctionnalités pour afficher uniquement les lignes sans dégradé au clic si vous le souhaitez, qui ressemble à ceci.

enter image description here

Le code supplémentaire:

/* 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);

Vous pouvez également les superposer pour afficher différents événements en utilisant plusieurs .bar éléments empilés les uns sur les autres (en utilisant la position absolute et la couleur changée) ou changez simplement la couleur des lignes sur un .bar élément utilisant une logique JS qui finirait par ressembler à this :

enter image description here

2
Zach Saucier

Vous pouvez créer une carte temporelle, qui est un nuage de points montrant les temps entre les événements suivants. Chaque point du nuage de points représente un événement dans le temps. La coordonnée x d'un événement est le temps entre l'événement lui-même et l'événement précédent. La coordonnée y est le temps entre l'événement lui-même et l'événement suivant. Voir quelques exemples sympas ici:

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

0
Max Watson