Comment améliorer la lisibilité du graphique avec les lignes rassemblées?
Je gère un site web qui montre l'évolution des équipes sportives dans leurs championnats à l'aide de graphiques en ligne. Voir l'image ci-dessous avec 2 exemples pour 2 sports. L'axe X montre les matchs joués (temps) et l'axe Y est le nombre de points des équipes.
- le tableau du haut est un championnat de volley, où les équipes gagnent entre 0 et 3 points à chaque match.
- le tableau du bas est un championnat de basket, où les équipes gagnent 1 ou 2 points à chaque match.
Pages en direct: volley et basket .
Mon problème est que le graphique en bas est beaucoup moins lisible, car il y a moins de différence entre les équipes. Les lignes se chevauchent souvent.
Des idées et suggestions pour améliorer le tableau dans ce cas?
ÉDITER:
Le graphique est en haut de la page. Sous le tableau se trouve un tableau de classement, quelques statistiques pour chaque équipe, et des filtres pour n'afficher qu'une partie de la saison, ou comparer uniquement les résultats à domicile, etc ... Le but du tableau est de montrer l'évolution des points/classement des les équipes tout au long du championnat.
Merci pour toutes les suggestions. Ils se concentrent principalement sur la mise en évidence d'une des équipes, et c'est définitivement quelque chose que je dois faire. Je cherche toujours s'il y a une meilleure façon d'afficher le graphique du bas, où les lignes sont serrées et il y a beaucoup d'espace vide.
Envisagez une mise en surbrillance sélective lorsque l'utilisateur survole ou clique sur des éléments du graphique.
NYT fait un bon travail de cela dans leur visualisation interactive des données. http://www.nytimes.com/interactive/2015/01/06/upshot/how-nonemployed-americans-spend-their-weekdays-men-vs-women.html?abt=0002&abg=1
Dans votre cas, voir toutes les lignes ensemble est bénéfique pour permettre à l'utilisateur de voir les modèles et les tendances dans les données. Vous avez déjà un comportement de survol pour afficher plus d'informations sur des points de données spécifiques lorsqu'ils survolent. Pensez à aller plus loin en mettant en surbrillance la ligne de données de ce point de données, déplacez la ligne vers le haut de la pile d'index z et désactivez les couleurs des lignes restantes.
Présentation intéressante. Je suis vraiment intrigué par cet affichage.
Juste pour m'assurer que je le comprends. ASS SPORTIVE DE MONACO (ligne bleue en haut à gauche du tableau du haut) est invaincu et n'a pas joué le jour 8 et VOLLEY-BALL STADE LAURENTIN n'a pas gagné son premier match (ou obtenu son premier point) jusqu'au jour 6 et n'a pas t gagné depuis.
Je ne suis pas certain que ce type de graphique puisse être beaucoup amélioré, sauf si vous autorisez les utilisateurs à supprimer des équipes du graphique.
En regardant le deuxième graphique, je me demande si je comprends vraiment les paramètres soulignés (à moins que ce ne soit comme American Sports où une conférence ou une division de l'Est joue d'autres conférences).
Je regarde (et crée) des graphiques toute la journée et je trouve vos graphiques quelque peu accablants (à première vue). Je peux voir qu'il fonctionne très bien avec quelques équipes, mais il ne évolue pas bien. Si vous ne pouvez pas permettre aux utilisateurs de supprimer et d'ajouter des équipes, je me demande si cette présentation fonctionnera. EXEMPLE: l'utilisateur commence avec "son" équipe (en supposant qu'il est connecté et sélectionné) et la moyenne de la ligue. Deux lignes sont très faciles à utiliser. Et puis il peut ajouter d'autres équipes (meilleures, pires, meilleures sur les derniers matchs X, sa conférence, etc ...)
Quels autres types de graphiques avez-vous examinés?
MODIFIER:
Je pense que c'est une excellente tentative pour montrer le classement relatif dans le temps, mais je ne pense pas que cela évolue bien. Il est difficile de trouver plus de 10 couleurs différentes qui se démarquent de toutes les autres couleurs. Par exemple, le coin inférieur droit (jour 5 - jour 9) est difficile à lire d'un coup d'œil. J'ai dû me concentrer sur le graphique pour distinguer ce que la ligne représentait les Olympiques Antibes Juan Pins. Je pense que cela fonctionne bien pour montrer le classement relatif au fil du temps de deux équipes, peut-être un 3 ou un 4, mais je ne pense pas que cela fonctionne bien à 10.
Que veulent vos utilisateurs? Vos utilisateurs voudront-ils mettre de l'énergie pour comparer toutes ces équipes? Je sais que mes utilisateurs ne le feraient pas.
Le but des graphiques est de rendre l’absorption des données rapide et facile; ainsi que de réduire la complexité et l’ambiguïté. Je pense que c’est une excellente idée mais qu’elle ne s’adapte pas bien.
Cela ne signifie pas qu'il ne doit pas être utilisé, mais seulement que son utilisation doit être limitée à l'endroit où il améliore la capacité du lecteur à absorber les informations.
Je vois que cela fonctionne bien, par exemple, lorsque vous comparez une équipe au rythme de son année précédente. Cette année pourrait être en rouge, l'année dernière en noir, l'année précédente en gris foncé, etc…. Il existe une infinité de variations sur un thème qui peut aller ici, surtout si l'équipe est proche d'un rythme record et que vous montrez le total de points de cette année avec le total record. Dans cet exemple ci-dessus, plusieurs lignes fonctionnent parce que la ligne de cette année serait d'une couleur très différente et sera incomplète - donc se démarquera. Les autres lignes seraient historiques, ne changeraient pas avec le temps, et constitueraient des informations "de fond".
Pour récapituler et répondre à votre question: Je pense que c'est un excellent design pour montrer le nombre total de points au fil du temps mais qu'il n'évolue pas bien. La solution est de l'utiliser là où c'est approprié et de ne pas le forcer là où il ne l'est pas.
Un graphique à barres multi-lignes pourrait fonctionner tant qu'il n'y a pas plus de 12 équipes. Il est vraiment difficile de faire la distinction entre plus de 16 couleurs environ (vrai pour n'importe quel tableau)
Il pourrait y avoir une sorte d'approche de métro pour les lignes, en faisant en sorte que les lignes se chevauchent au lieu de se chevaucher:
Un hack rapide serait de mettre en surbrillance la ligne/l'équipe sur laquelle vous cliquez et de rendre toutes les autres grises. Je suppose que les gens veulent voir comment va une équipe, non? Avez-vous des données sur la façon dont les gens utilisent ces graphiques, à quoi s’intéressent-ils?
Que diriez-vous d'une fonction de bascule? Cela donnerait à vos utilisateurs le contrôle de l'ensemble de données qui est le plus important pour eux. En supprimant une série de données qui est moins importante pour eux, cela leur donnerait une meilleure façon de se concentrer visuellement sur celles qui comptent le plus.
Voici un exemple interactif à essayer: http://www.zingchart.com/playground/run/54b69c1664bcf
Vous pouvez également utiliser une bibliothèque de graphiques JavaScript qui ajusterait automatiquement l'échelle en fonction de la série restante, comme ceci: http://www.zingchart.com/playground/run/537ce29a599b6
Je suppose qu'en fin de compte, il sera toujours difficile de placer beaucoup de choses sur un espace fixe, donc vous devez vraiment déterminer exactement ce sur quoi vous voulez vous concentrer ou accepter qu'essayer de se concentrer sur tout signifie que vous ne pouvez pas vraiment se concentrer sur quoi que ce soit.
Il y a eu beaucoup de bonnes discussions et contributions sur cette question, et j'aimerais ajouter une autre possibilité que vous voudrez peut-être explorer.
Souvent, dans ces situations, vous pouvez adopter l'approche opposée et adopter l'approche petit multiple , qui, je pense, pourrait bien fonctionner dans votre situation. On le voit souvent dans l'implémentation de graphiques sparkline, mais cela fonctionne également bien pour les graphiques qui sont simples et ont des axes bien définis.
Il suffit de google petits multiples et voir si quelque chose vous frappe, et si vous pouvez fournir plus de détails, je suis sûr que vous obtiendrez également une réponse plus détaillée.