Overview

Les graphiques Marimekko sont utilisés sur un couple de variables pour visualiser des données catégorielles. Dans un graphique Marimekko, les deux axes sont des variables avec une échelle en pourcentage qui détermine à la fois la largeur et la hauteur de chaque segment. Les graphiques Marimekko fonctionnent comme un graphique de barres empilées à 100 % bidirectionnel.

Nous avons deux modes de fonctionnement.

Dans le premier mode (que l'on pourrait appelait le mode "barres successives"), nous spécifions pour chaque série une valeur en x, une valeur en y et une valeur en z pour chaque message. Cela conduit à l'affichage d'une barre supplémentaire dans le graphique, et les barres continuent d'être ajoutées au graphique jusqu'à atteindre la quantité limite définie par l'utilisateur, puis chaque nouvelle barre remplace la plus ancienne, et ainsi de suite. Ce mode est pratique pour les séries temporelles où les données arrivent progressivement. Ici, x définit l'abscisse de chaque barre, y sa hauteur, et z sa largeur.

Le second mode est le mode XYZ : nous spécifions pour chaque série en x, y et z trois tableaux de mêmes dimensions, qui définissent explicitement toutes les barres à afficher. Le premier tableau définit la liste des abscisses, le deuxième tableau définit la liste des hauteurs de colonnes et le troisième tableau définit la liste des largeurs de colonnes.

"Successive bars" mode

Si un utilisateur configure une série "Series 1", en choisissant pour l'axe x la propriété "abscissa1", pour l'axe y la propriété "height1", et pour l'axe z la propriété "width1", et une série "Series 2", en choisissant également pour l'axe x la propriété "abscissa1", pour l'axe y la propriété "height2", et pour l'axe z la propriété "width1", alors lors de la réception du message suivant :

 msg.payload = {
        "abscissa": "abscissa1",
        "height1": 4,
        "width1": 2,
        "height2": 1
    }
return msg;

deux barres s'affichent sur le graphique, à l'abscisse "abscissa1", avec des hauteurs de 4 et 1, et une largeur de 2.

Si un nouveau message est reçu :

 msg.payload = {
        "abscissa": "abscissa2",
        "height1": 5,
        "width1": 3,
        "height2": 2
    }
return msg;

une deuxième paire de barres s'affiche, à l'abscisse "abscissa2", avec des hauteurs de 5 et 2, et une largeur de 3.

XY Mode

Si un utilisateur configure une série "Series 1", en choisissant pour l'axe x le tableau "abscissas", pour l'axe y le tableau "heights1", et pour les largeurs le tableau "widths", et une série "Series 2", en choisissant pour l'axe y le tableau "heights2", alors lors de la réception du message suivant :

  msg.payload = {
        "abscissas": ["abscissa1", "abscissa2"],
        "heights1": [4, 5],
        "widths": [2, 3],
        "heights2": [1, 2]
    }
return msg;

le même motif que dans l'exemple précédent est dessiné. Lors de la réception de nouveaux tableaux pour x, y et z, les données reçues remplacent le graphique existant. La limite du nombre de barres n'est pas pertinente ici et doit être ignorée.