Data-visualisation

À l'ère du Big Data, l’une des qualités particulièrement recherchées dans le web est la capacité d’une application à visualiser des informations de façon claire, rapide et synthétique.

Dans l’exploitation des données d’une API, il n’est pas rare d’avoir besoin de formes visuelles plus avancées, comme des diagrammes en bâtons, des courbes ou des formes de visualisations 3D pour se représenter des ensembles de données relativement complexes.

Dans ce chapitre, nous allons voir plusieurs librairies Node.js qui vont nous permettre de plus ou moins facilement créer des formes de data-visualisation.

Plotly

NPM regorge de librairies permettant de créer des éléments de data-visualisation. Certaines disposent même d’une version adaptée aux frameworks JavaScript modernes. C’est le cas de la librairie Plotly et de ses déclinaisons :

react-plotly

Cette librairie propose des composants préconfigurés pour la création 2D de diagrammes en bâtons, courbes ou encore graphiques circulaires. Les composants sont généralement prêts à l’emploi. Il suffit d’y injecter un jeu de données, généralement sous forme de tableau, en attribut props du composant. D’autres props permettent de personnaliser les figures en modifiant les légendes et des éléments de mise en forme, notamment.

Pour installer Plotly, ajoutez la librairie à vos modules avec :

npm install react-plotly plotly

Importez ensuite le module directement dans le composant chargé de l’utiliser et référez-vous à la documentation de Plotly pour savoir comment l’exploiter.

INFO

⚠️ Vous n’êtes pas du tout obligé d’utiliser des librairies présentant une version dédiée au framework. Vous pouvez très bien créer vos propres composants de data-visualisation en exploitant une librairie Node.js plus générique.

Chartjs

La librairie Chart.js, vous permet également de créer des diagrammes 2D. C’est une bonne alternative à plotly, simple d’utilisation.

Elle dispose elle aussi d'une version adaptée au framework, avec des composants déjà prêts :

npm install react-chartjs-2 chart.js

D3.js

Pour la création de figures plus personnalisées, la librairie D3.js offre une large gamme de fonctionnalités. La librairie est plus bas niveau et ne vous fournira pas de composants.

À vous de construire des formes aussi diverses que des bubble charts ou des mind maps interactives avec cette librairie.

Pour installer D3.js :

npm install d3

WARNING

⚠️ L’appréhension d’une librairie comme D3.js nécessite souvent un peu de temps en fonction des usages que vous en aurez. Prévoyez un certain temps si vous souhaitez l’exploiter dans l’un de vos projets pour la première fois.

Three.js

Plus qu’une librairie de data-visualisation, Three.js est aujourd’hui la librairie la plus populaire pour la création d’éléments 3D sur le Web. Relativement bas niveau, elle exploite au plus près l’API WebGL permettant d’exploiter OpenGL sur la machine du client.

Vous pouvez l’utiliser pour afficher des modélisations conçues avec un logiciel de création 3D comme Blender, ou pour créer des simulations ou des jeux de toutes pièces sur votre site. Le site de Three.js propose une mosaïque de créations vous donnant une idée de l’étendue des possibilités que la librairie permet. Le site propose même des démos de créations.

L’apprentissage de la librairie pourrait faire l’objet d’un cours à part entière. Pour l’élaboration de visuels 3D particulièrement originaux, incluant de l’interaction avec l’utilisateur, il peut être intéressant de se tourner vers cette librairie qui vous assurera une liberté complète dans la création de vos figures.

Ce site donne un aperçu d’une data-visualisation avancée conçue avec Three.js.

Pour installer Three.js :

npm install three

Ressources complémentaires

• Sur Three.js :
  • une vidéo de Grafikart