2. Data-visualisation

Présentation

A l’air du Big Data, l’une des qualités particulièrement recherchées en 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 lots de données relativement complexes.

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

vue-plotly

NPM regorge de librairies permettant de créer des éléments de data-visualisation. Certaines disposent même d’une version adaptée au framework Vue.js. C’est le cas de la librairie Plotly et de sa déclinaison vue-plotly.

Cette librairie propose des composants préfinis 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.

Un utilisateur du module met même à disposition une interface vous guidant dans l’implémentation des composants du module.

Pour installer vue-plotly, ajoutez la librairie à vos modules avec :

npm install vue-plotly

Importez ensuite le module directement dans le composant chargé de l’utiliser et référez vous à la documentation de vue-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 à Vue.js. Vous pouvez très bien créer vos propres composants de data-visualisation en exploitant une librairie Node.js plus générique.

vue-chartjs

La librairie vue-chartjs, basée sur Chart.js, vous permet également de créer des diagrammes 2D. C’est une bonne alternative à vue-plotly. Elle est également simple d’utilisation, mais vous demandera de faire de la Composition en Vue.js, en utilisant l’extension de composant. Il s’agit d’un concept que nous ne développons pas dans ce cours mais que vous pouvez facilement appréhender dans le cadre de cette librairie en suivant sa documentation.

Pour installer vue-chartjs :

npm install vue-chart

D3.js

Pour la création de figure 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 composant Vue.js.

A votre charge de construire des formes aussi diverses que des bubbles 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

Aller plus loin

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