MISE À JOUR : Bien que de nombreux outils présentés dans cet article de 2012 soient toujours efficaces et se soient développés pour devenir encore plus utiles, vous pourriez être intéressé par notre série plus récente sur les outils interactifs de visualisation de données.
Outils complexes de visualisation de données
Bienvenue pour la deuxième partie de ma série sur les outils interactifs de visualisation de données (dataviz). Dans la première partie, nous avons couvert trois outils cool pour visualiser des diagrammes et des graphiques et de nombreux autres types de données sur une page Web. Dans la deuxième partie, nous jetons un coup d’œil à trois autres outils qui sont un peu plus complexes mais qui ont des capacités de visualisation de données incroyables.
- jQuery Visualize (partie 1)
- Google Charts (partie 1)
- Highcharts (partie 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
Simile Exhibit
Exhibit est une offre très robuste et personnalisable. L’un de ses principaux atouts est une approche unique du rendu des données. En plus des outils de filtrage, de tri et de recherche faciles à utiliser, il vous permet d’utiliser un modèle HTML (appelé « lentille » dans Exhibit) à construire pour que tout sur la page ressemble exactement à ce que vous voulez. C’est presque comme un mini-CMS pour dataviz où vous pouvez accéder à vos données par le biais de valeurs d’attributs directement dans la lentille. Pour les projets qui nécessitent un haut degré de sensibilité à l’apparence, ce niveau extrême de flexibilité pour construire des visualisations de données est fantastique.
- Types de visualisation pris en charge : Graphiques linéaires, cartes, diagrammes de dispersion, listes multi-filtrables, lignes de temps, timeplots et plus encore… avec des widgets !
- Sources d’entrée de données : JSON, feuille de calcul
- Sortie de données : HTML
- Options de mise en forme : CSS
- Type : Bibliothèque Javascript
PROS
Flexible & Approche puissante de la conception
J’aime vraiment l’approche d’Exhibit, où les données sont présentées à travers une « lentille » – une coquille de modèle HTML dans laquelle les éléments sont placés. Cela rend le système entièrement personnalisable et stylisable par CSS, ce qui signifie que les concepteurs l’adorent et que créer une cohérence pour les marques des clients est un jeu d’enfant.
Fort filtrage/tri/recherche
Laisser les utilisateurs filtrer vos données selon n’importe quel nombre de critères est incroyablement utile, et transforme vos informations de contenu statique en une véritable fonctionnalité interactive. Le filtrage est intégré à Exhibit et il est facile à mettre en œuvre. Le filtrage côté serveur peut être une corvée (sans parler de son coût), aussi Exhibit se distingue-t-il en rendant le filtrage utilisateur incroyablement rapide et facile. Il en va de même pour le tri et la recherche. Exhibit permet de donner très facilement aux utilisateurs de votre site le contrôle pour obtenir exactement la vue de vos données qu’ils souhaitent, et donc une compréhension plus précieuse de leur importance.
Documentation solide
Sauter dans des outils de dataviz complexes peut être une entreprise et nécessite quelques essais et erreurs. Exhibit accélère vraiment le processus avec une excellente documentation sur leur site Web et quelques excellents tutoriels pour débutants.
Widgets!
Vous voulez pousser Exhibit encore plus loin ? Vous pouvez ajouter des fonctionnalités avec des widgets. Il existe des widgets disponibles pour les collections de bibliographie et de citations, une visionneuse d’images de style CoverFlow, des lignes de temps et des timeplots – pour n’en citer que quelques-uns. Ce type d’extension de produit fait d’Exhibit l’une des options les plus robustes et les plus flexibles qui existent pour la visualisation de données.
CONS
Steep Learning Curve
Comme les autres bibliothèques plus complexes, il y a plus de codage impliqué avec Exhibit que la plupart des options, et avoir une expérience préalable de Javascript est certainement très utile. J’ai cependant trouvé les tutoriels vraiment bien faits et amusants à faire, donc une fois que vous avez commencé, il est vraiment facile de se mettre sur un rouleau.
Javascript InfoVis Toolkit
Javascript InfoVis Toolkit est une belle suite d’outils pour créer des diagrammes et des graphiques sur une page Web. Elle présente une liste de types de graphiques pris en charge et introduit quelques fonctionnalités d’animation dans le mélange (par exemple, les barres d’un graphique à barres peuvent s’étendre à leur taille lorsque le graphique est chargé – ce genre de chose). Les animations sont agréables et peuvent certainement ajouter un niveau supplémentaire de polissage à votre site. Il existe également quelques fonctions interactives intéressantes, comme l’application d’un « filtre » à un graphique en cliquant dessus. Le graphique n’affiche alors que la série sur laquelle vous avez cliqué jusqu’à ce que vous supprimiez le filtre. Consultez les démos pour voir davantage ce dont cette boîte à outils est capable.
- Types de visualisation pris en charge : Area Chart, Bar Chart, Pie Chart, Tree Map, Force Directed, Radial Graph, Sunburst, Icicle, Space Tree, Hyper Tree
- Data Input : JSON
- Sortie : Canvas
- Stylisation : Paramètres Javascript
- Type : Bibliothèque Javascript
PROS
Types de graphiques uniques
J’aime beaucoup les différents types de visualisation non standard disponibles dans la boîte à outils InfoVis. Cet outil pourrait être surdimensionné pour le diagramme circulaire occasionnel, mais pourrait vraiment briller lorsque vous devez aborder les options d’affichage pour des données plus compliquées.
Animations / Interactions
Les animations sont un excellent ajout à ces diagrammes et graphiques. Elles confèrent une qualité de type Flash à ces graphiques qui est vraiment agréable. Et la possibilité d’interagir avec ces graphiques – glisser autour et manipuler le graphique (comme celui-ci) est très cool et pourrait être vraiment utile.
CONS
Courbe d’apprentissage
Avec toutes ces grandes fonctionnalités vient la complexité et, bien que la documentation sur le site Web semble être bonne, cet outil nécessite une bonne expérience de Javascript pour en tirer le meilleur parti.
D3.js
Wow, D3.js est cool ! Je viens de me perdre pendant quelques heures à farfouiller sur le site de D3 et les possibilités semblent infinies. Cet outil nécessite définitivement un niveau d’expertise assez élevé avec Javascript et JSON, mais il génère des graphiques magnifiques et sophistiqués. Regardez les exemples.
D3 n’est pas vraiment comme les autres. Ce n’est pas un outil graphique « prêt à l’emploi » mais plutôt un cadre pour dessiner des éléments basés sur des données. Le site web de D3 le dit bien : « Plutôt que de fournir un système monolithique avec toutes les fonctionnalités dont tout le monde peut avoir besoin, D3 ne résout que le cœur du problème : la manipulation efficace de documents basés sur des données. »
Et, puisque vous pouvez créer des graphiques SVG, vous pourriez utiliser cette sortie partout, y compris dans les applications d’impression. D3 pourrait être le centre d’un flux de publication web/imprimé astucieux pour un projet lourd en graphiques.
- Types de visualisation pris en charge : Tous ? Le ciel est la limite.
- Entrée de données : JSON, GeoJSON, CSV
- Sortie : HTML, SVG
- Mise en forme : CSS, Javascript
- Type : Bibliothèque Javascript
PROS
Flexibilité illimitée
Vous pouvez à peu près utiliser D3.js pour dessiner tout ce que vous voulez en fonction des données. C’est un outil incroyable pour les personnes qui créent de nouvelles visualisations de données et des visualisations construites sur des ensembles de données vraiment importants.
Sortie
Très cool que vous puissiez dire à D3 de créer des éléments HTML ainsi que SVG. Ouvre définitivement à la porte au style avec CSS, ce qui est idéal.
CONS
Courbe d’apprentissage
Vous devez être une personne accomplie en Javascript, JSON et mathématiques pour que D3 saute à travers des cerceaux. Et certains des exemples déroutent l’esprit, mais allez-y et parcourez le tutoriel. Ce n’est pas si mal et, si vous connaissez un tant soit peu jQuery ou Prototype, une grande partie du contenu vous semblera familier. Et beaucoup ne le seront pas…
Conclusion
Ces six produits ne sont que la partie émergée de l’iceberg pour les dataviz. Il existe des dizaines d’autres produits formidables. Mais ceux-ci devraient vous donner une bonne idée de ce qui se passe et une idée de l’éventail des capacités et de la complexité du monde interactif de la dataviz.