Suivi - Statistiques Comparaison de grapheurs Javascript libres pour les statistiques LinuxFr.org

#1682 Posté par (page perso) . État de l'entrée : ouverte Licence CC by-sa
Tags : aucun
1
31
déc.
2016

Sommaire

(tiré d'une dépêche du 6 janvier 2013 qui ne vit jamais le jour)

État initial des statistiques LinuxFr.org

Les statistiques du site sont produites avec du code Ruby On Rails qui va lire en bases de données MySQL et Redis.

Les données à représenter sont de quatre types actuellement :

  1. une série de pourcentages d'un même ensemble, pouvant se recouvrir (dans l'idéal, une représentation en diagramme de Venn, mais elle est généralement limitée à 4 séries de données) ;
  2. un série de pourcentages d'un même ensemble sans recouvrement (dans l'idéal, une représentation en diagramme en camembert) ;
  3. une série de plusieurs valeurs pour une comparaison ;
  4. des séries de plusieurs valeurs non reliées pour montrer une variation temporelle (avec possibilité de ne pas afficher les valeurs nulles/absentes) ;
  5. des séries de plusieurs valeurs s'ajoutant pour montrer une variation temporelle.

La partie graphe utilise des balises div avec une couleur de fond dont la largeur correspond à la valeur à représenter. Elle est donc en pur HTML statique (et les couleurs sont choisies via une feuille de style CSS). Tout est représenté sous forme de diagramme en barres horizontales.

Le besoin

  • une solution en Javascript un peu dynamique (permettant d'afficher temporairement des infos sans trop surcharger) ;
  • une solution sous une licence libre compatible avec le reste du code placé sous licence AGPL v3 ;
  • des diagrammes en barres horizontales ou verticales, additives ou non, avec légende, titre, affichage possible des valeurs ;
  • et probablement d'autres choses qui sembleront indispensables une fois qu'elles seront techniquement possibles, comme les 4 possibilités complémentaires que sont les courbes de tendances, les commentaire sur les données ou les pentes d'évolution et les projections.

Les diverses solutions évaluées

L'exhaustivité ne semble pas réellement possible dans le domaine des grapheurs Javascript où semble-t-il chaque développeur a décidé de refaire sa bibliothèque de graphes, parfois de zéro, parfois en se dérivant d'une autre solution existante. Un certain nombre de solutions a été essayé pour voir rapidement ce qu'il était possible de faire ou non, simplement, avec.

gRaphael

  • Sites : gRaphael & Raphael
  • Version : 0.51 (2012-08-12) & 2.1.2 (2013-08-26)
  • Licence : MIT
  • Taille : gRaphael 85 kio (27 kio minifié) + Raphael 2.1.2 (293 kio, 90 kio minifié)
  • Format : SVG
  • Essai d'utilisation

Remarques après utilisation :

  • titre extérieur au graphe, à placer soi-même en coordonnées (x,y)
  • affichage de la valeur au survol dans un diagramme en barres ou en camembert à faire soi-même en javascript (code disponible dans les exemples)
  • légende uniquement pour les diagrammes en camembert (en anglais piechart). Un contournement sale semble être de faire un piechart de rayon zéro pour profiter de sa légende.
  • pas d'hyperlien pour les diagrammes en barres, ni dans la légende des diagrammes en camembert. Pas de contournement trouvé.
  • pour les données de type 3, 4 ou 5, il est difficile d'afficher des données par année (ou mois) : soit on doit utiliser un barchart sans abscisse et aux couleurs multiples, soit on doit utiliser un linechart ce qui donne en abscisses des années décimales. Pas de contournement trouvé sauf à refaire l'axe soi-même.
  • possibilité de dotchart, une matrice de points de taille et couleur différentes
  • pas de diagrammes de Venn de base, mais un contributeur a fait un plugin pour cela.
  • pas d'exemple avec une grille en fond

nvd3 (basé sur D3)

  • Sites : nvd3 & D3
  • Licence : Apache v2 & BSD
  • Version : la dernière est la 1.1.14 bêta 25 (TODO 1.8.1 disponible) mais j'ai une régression sur le diagramme en camembert donc je reste sur une vénérable 0.0.1a qui sert aux exemples du site de l'auteur d'ailleurs ; D3 en version 3.3.1 (TODO 3.5.6)
  • Taille : nvd3 318 kio + d3 318 kio (184 kio + 143 kio minifiés)
  • Format : SVG
  • Essai d'utilisation

Remarques après utilisation :

  • absence de documentation d'API (et l'API semble plus riche que celle de gRaphael). Par contre la documentation d3 est disponible.
  • dans un diagramme en camembert, il faut filtrer soi-même les données négligeables (contrairement à gRaphael qui permet de les agréger sous « Autres »)
  • voir si on peut surcharger les fonctions affichent en anglais « x on y » ou « x at y » en infobulle
  • voir si on peut forcer ou empêcher l'empilement des barres dans les diagrammes en barre
  • esthétiquement, je trouve le résultat plus joli/mieux fini que gRaphael
  • pas de diagrammes de Venn

Morris (basé sur Raphael)

  • Site : Morris.js & Raphael
  • Licence : Simplified BSD
  • Version : 0.5.1 du 2014-06-15
  • Taille : Morris (64 kio, 35 kio minifié) + jQuery (238 kio, 91kio minifié) + Raphael (293 kio, 90 kio minifié)
  • Format : SVG
  • Essai d'utilisation

Remarques après utilisation :

  • API plutôt basique
  • pas de diagramme en camembert à la française mais en donut à l'américaine
  • pas de gestion des titres
  • fonte qui varie pour la légende lors du passage sur le donut et il faut filtrer soi-même les données négligeables (contrairement à gRaphael qui permet de les agréger sous « Autres »)
  • pas de gestion des hyperliens
  • pas de diagrammes de Venn

jqplot

  • Site : http://www.jqplot.com/
  • Licence : MIT et GPL v2
  • Version : 1.0.8r1250 du 2013-03-27
  • Taille : 7,5 Mio dans l'archive avec exemples, docs et JQuery inclus, dont 1,4 Mio de CSS+JS (529 kio minifié)
  • Format : Canvas
  • Essai d'utilisation

Remarques après utilisation :

  • documentation riche et nombreux exemples fournis
  • pas de diagramme de Venn
  • dans un diagramme en camembert, il faut filtrer soi-même les données négligeables (contrairement à gRaphael qui permet de les agréger sous « Autres »)
  • peu de fonctionnalités interactives dans les exemples, comme l'affichage sur un passage souris (TODO: voir http://www.jqplot.com/tests/zooming.php qui permet de faire du zoom, http://www.jqplot.com/tests/cursor-highlighter.php pour voir interactivement les données brutes, les plugins sont utilisables en même temps)

CanvasXpress

  • Site : CanvasXpress
  • Licence : LGPL 3.0
  • Taille : (je n'ai pas reçu la version complète promise en échange d'une adresse de courriel - de plusieurs même, à différents moments -, donc j'ai utilisé la version en ligne)
  • Format : Canvas
  • Essai d'utilisation

Remarques après utilisation :

  • les exemples sont plutôt complexes, plus proche d'une utilisation scientifique que d'un exemple basique
  • API visiblement très très riche
  • l'ordonnée par défaut sur les diagrammes en barres n'est pas zéro mais calculée par rapport au minimum

ChartJs

  • Site : Chart.js
  • Licence : MIT
  • Version : 1.0.1 beta-4 du 2014-08-14 (TODO: 1.0.2 sortie + une 2.0.0 alpha 3)
  • Taille : 105 kio, 18 kio minifiée
  • Format : Canvas
  • Essai d'utilisation

Remarques après utilisation :

  • documentation et exemples assez complets
  • pas de diagramme de Venn, mais le diagramme polararea est pratique pour notre besoin
  • les couleurs sont à choisir soi-même
  • les légendes sont à construire soi-même, via un patron passé en paramètre
  • il n'y a apparemment pas de possibilité d'avoir des barres cumulatives pour le type 5

Rickshaw (basé sur D3)

  • Site : Rickshaw & D3
  • Licence : MIT
  • Version : 1.5.1 du 2014-12-14
  • Canvas : SVG
  • Taille : 107 kio, 81 kio minifiée (+ la bibliothèque D3 de 377 kio, 74 kio minifiée)

Remarques :

  • pas de diagramme de Venn, ni de diagramme en camembert, c'est restreint aux données temporelles, donc ça ne convient pas pour notre besoin

reD3 (basé sur D3)

  • Site : reD3 & D3
  • Licence : APL v2
  • Version : 2014-03-23 (avec bibliothèque D3 version 3.1.10)
  • Taille : reD3 (28,3 kio, 15,1 kio minifiée) + D3 (292 kio, 136 kio minifiée)
  • Format : SVG
  • Pas d'essai : les exemples pauvres et l'absence de documentation ne m'ont pas donné envie de tester

Remarques :

  • absence de documentation d'API
  • pas de diagrammes de Venn de base
  • pas d'exemple avec une grille en fond
  • peu de fonctionnalités interactives dans les exemples, comme l'affichage sur un passage souris

Flot

  • Site : Flot Charts
  • Licence : MIT
  • Taille : TODO
  • Format : Canvas
  • Essai : TODO

Remarques après utilisation : TODO

C3.js (basé sur D3)

  • Site : C3.js & D3
  • Licence : MIT
  • Version : TODO
  • Taille : TODO
  • Format : SVG
  • Essai : TODO

Remarques après utilisation : TODO

D3plus (basé sur D3)

  • Site : D3plus & D3
  • Licence : MIT
  • Version : TODO
  • Taille : TODO
  • Format : SVG
  • Essai : TODO

Remarques après utilisation : TODO

Enterprise Charts

  • Site : eCharts
  • Licence : BSD
  • Version : TODO
  • Taille : TODO
  • Format : TODO
  • Essai : TODO

Remarques après utilisation : TODO

  • les commentaires sont en chinois dans le code

TauCharts (basé sur D3)

  • Site : TauCharts & D3
  • Licence : APL v2
  • Version : TODO
  • Taille : TODO
  • Format : TODO
  • Essai : TODO

Remarques après utilisation : TODO

Plottable.js (basé sur D3)

  • Site : Plottable.js & D3
  • Licence : MIT
  • Version : TODO
  • Taille : TODO
  • Format : TODO
  • Essai : TODO

Remarques après utilisation : TODO

http://www.rgraph.net/ ?

PykCharts.js (basé sur D3)

Remarques après utilisation : TODO

Et d'autres encore

Beaucoup d'alternatives ou compléments à D3.js sont listés en libre sur alternativeto.net et il y a aussi un comparatif des types de graphes disponibles pour tout un ensemble de grapheurs.

Citons par exemple datavisualization.ch et Web Designer Aid en proposent encore d'autres grapheurs Javascript (qui ne sont pas forcément tous libres, je n'ai pas vérifié).

Pour la représentation graphique de tags en nuage de tags, il y a un paragraphe dédié sur la page wiki pour les propositions de nuages de tags.

  • # Exemple de stats sympa pour OSM

    Posté par (page perso) . Évalué à 3 (+0/-0).

    Un exemple de stats sympa pour OSM avec http://neis-one.org/2014/08/osm-activity-2014/ notamment les évolutions temporelles suivant les types d'utilisateur, ou suivant la date de création du compte.

    • [^] # Re: Exemple de stats sympa pour OSM

      Posté par . Évalué à 1 (+1/-0).

      Un exemple de stats sympa pour OSM avec http://neis-one.org/2014/08/osm-activity-2014/

      Sur la page indiquée, rien ne laisse penser que les graphiques ont été faits en JavaScript.
      Je dis ça car vu les specs de l'entrée de suivi, je me sens capable de bricoler un truc mais pas en JavaScript. Serait-ce la volonté de ne pas installer quoi que ce soit sur les serveurs qui conduit à imposer ce langage ?

      • [^] # Re: Exemple de stats sympa pour OSM

        Posté par (page perso) . Évalué à 3 (+0/-0).

        J'ai recopié cette idée ici pour la nature des statistiques parce qu'il me semble utile d'avoir la même chose pour LinuxFr.org (combien de temps entre la création d'un compte et le premier commentaire, le premier contenu, etc.). Le fait que pour OSM ça soit fait avec ou sans Javascript n'avait pas trop d'importance et ne préjuge pas de la façon dont ça sera réimplémenté (à la rigueur on pourrait déjà le refaire avec le système actuel sans javascript).

        • [^] # Re: Exemple de stats sympa pour OSM

          Posté par . Évalué à 1 (+1/-0).

          Du moment où les données sont là, les graphiques souhaités sont relativement faciles à faire. Il suffirait par exemple d'accéder à toutes les données brutes sous format CSV/TSV ou équivalent et après, on pourra voir ce qui est faisable en pratique. Pour le moment, la page des stats du site ne présente qu'une seule entrée de données en CSV.

          J'avais fais un POC il y a quelque jours à partir de ce CSV, le graphique permettait de résumer certaines tendances passées et j'avais coupé la partie où il tentait une extrapolation des prochaines tendances. C'est pas ce genre de choses dont il s'agit ? Le voici sous plusieurs déclinaisons :

          1- à la Calc
          2- version dépouillée
          3- contraste appuyé
          4- minimalisme
          5- nuances de gris
          6- tout est carré

          Cela peut être adapté pour générer d'autres formes. Donc, si le reste des données peut être soutirées des serveurs/SGBD et formatées en « tableaux plats », ce serait un excellent moyen de partir sur du concret.

        • [^] # Re: Exemple de stats sympa pour OSM

          Posté par . Évalué à 0 (+0/-0).

          Alors, à partir du seul jeu de données accessible publiquement, voir ce PR.

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.