M2 Sigma – Module U351_33
Bibliothèques JavaScript de GéoVisualisation
L'exemple de Data-Driven Documents (D3)

Ce site est un tutoriel d'introduction à la bibliothèque de fonctions D3, qui permet de réaliser des représentations graphiques vectorielles interactives dans une page web. Il s'agit de la version de décembre 2017, réécrite pour D3 version 4.

Inspiré du workshop interactif de Victor Powell

Cette page est interactive !

Les sections en fond noir sur cette page sont des éditeurs de texte interactifs, leur interprétation est proposée automatiquement sur la partie droite. Vous pouvez donc modifier le code HTML/SVG/JS/CSS et voir le résultat immédiatement !

Un bac à sable" interactif" de plus grande taille est aussi disponible.

Positionnement

Les techniques de représentation interactive des données, ou data visualization (dataviz) connaissent depuis quelques année un fort développement sur le support Internet, grâce aux fonctionnalités nouvelles apportées par le standard HTML5 et la manipulation d'objets vectoriels au format SVG. Des bibliothèques de fonctions JavaScript permettent de rendre accessible la création de ce type de graphismes interactifs sur Internet, en simplifiant la manipulation des objets graphiques et des données.

Bibliographie :

Scott Murray, "Interactive Data Visualization", paru aux éditions O'Reilly en 2013 (gratuit voir lien ci-dessous).
Mike Dewar, "Getting started with D3", O'Reilly, 2012.
Michael Bostock, Jason Davies, "Code as cartography", revue The Cartograhic Journal, vol. 50 n°2, mai 2013.
Nick Qi Zhu, "Data Visualization with D3.js Cookbook", éditions Pakt Publishing, 2013 (cf. site avec les codes sources en lien ci-dessous).

Les bases

Le Document Object Model (DOM)

Le format SVG : des images vectorielles

<rect> Rectangle

Documentation MDN : <rect>

<circle> Cercle

Documentation MDN : <circle>

<path> Chemin (ligne brisée)

Documentation MDN : <path>

<text> Texte

Documentation MDN : <text>

<g> Groupes and transformations (translation, rotation, échelle)

Documentation MDN : <g>

Groupes <g> imbriqués

Styles SVG

Fill - Remplissage

Stroke - Contour

Un exemple plus complexe

SVG dynamisatique avec JavaScript : la bibliothèque D3

Modifier le DOM avec D3

D3 permet de modifier un arbre DOM créé en SVG.

selector.style()

Nous pouvons maintenant changer les styles SVG par la programmation.

selector.attr()

Idem avec les attributs SVG

accessors

Les paramètres peuvent être définis par une fonction plutôt que par une constante.

Rappels sur les fonctions JavaScript

Créer des images SVG à partir de zéro en JavaScript avec D3

selector.enter()

Une nouvelle méthode pour ajouter des éléments.

Documentation: selector.enter()

Décomposition de selector.enter()

Les transitions : animer les images vectorielles

Documentation: transitions

Enchaîner les transitions

Liaisons de données et transitions

Documentation: d3.range()

Un peu d'infographie

Un histogramme simple

Les données sont dans une structure de données JSON

Ajoutons des libellés et un peu de souplesse

Un diagramme de points XY

On ajoute des axes automatiques

Un peu de cartographie

Afficher un fond de carte en projection azimuthale orthographique

Les données cartographiques proviennent d'un fichier TopoJSON.

Afficher un fond de carte en projection équivalente (surfaces préservée)