D3.js Visualisation interactive de données sur le web 1 Description

D3.js
Visualisation interactive de données sur le web
1
1.1
Description du cours
Présentation de D3.js
La librairie JavaScript D3.js permet de manipuler et d’effectuer une visualisation
graphiques des données sur le web à partir de HTML, SVG et CSS sans passer par un
framework généraliste.
Cette librairie nous permet de ne pas avoir à gérer les disparités, de moins en moins
importantes, entre les navigateurs. Elle permet aussi de s’affranchir de solutions comme
Flash : D3.js permet la visualisation graphique des données sur tous types de terminaux
comme PC (Windows, Mac ou Linux), tablettes ou smartphones sous iOs ou Android.
1.2
Contenu du cours
C’est une formation complète à la mise en œuvre de la librairie D3.js. L’utilisation
conjointe de D3.js et de jQuery est proposée.
Des comparaisons peuvent être faites sur demande avec d’autres librairies de visualisation
de données, en étudiant les avantages et inconvénients de chacune.
1.3
Participants
Tout acteur, développeurs, chefs de projet, impliqué dans le déploiement sur le web
de solutions de tableau de bord, de statistiques ou d’analyse de données.
1.4
Pré-requis
Un minimum de connaissances en écriture de pages web, donc de HTML est nécessaire. Des connaissances en programmation avec un langage moderne sont requises, et
des bases en programmation JavaScript sont très utiles. Ce cours peut-être suivi même
sans connaissance en CSS ou SVG.
1.5
Pédagogie
Le cours est une alternance de présentations magistrales s’appuyant sur l’exécution
de projets réalistes.
Suivant la durée ou le réaménagement du cours, il est possible de travailler sur un miniprojet lors de la dernière demi-journée.
1.6
Durée
Il est conseillé de proposer ce cours sur au moins trois jours, au-delà de trois jours
on se donne les moyens de prendre du temps pour laisser les stagiaires jouer avec les
exemples.
La réduction de ce cours à deux jours n’est pas envisageable au vu de la richesse de D3.js,
sauf dans le cas d’une formation sur mesure après analyse des besoins.
Daniel Lucazeau
1
[email protected]
D3.js
Visualisation interactive de données sur le web
1.7
Hors contenu
La préparation et le nettoyage des données n’est pas prévu dans ce cours.
La connaissance d’un langage serveur (ASP.NET ou PHP) n’est absolument pas nécessaire
pour ce cours. Pour le cours avancé, des exemples de fonctionnement avec bases de données
peuvent être proposés sur demande, mais on peut appréhender la philosophie de D3 sans
cela.
Daniel Lucazeau
2
[email protected]
D3.js
Visualisation interactive de données sur le web
2
Thèmes abordés
2.1
Les fondamentaux
Présentation de la librairie
• Origine • Historique • Objectifs
Connaissances préalables
• HTML5 • DOM • CSS • JavaScript • SVG
De brèves présentations sur ces technologies nécessaires à leur mise en œuvre. Des rappels
ou des mises à niveau sont faits au fur et à mesure des besoins.
Configuration de l’environnement de travail
• Éditeur • Navigateurs • Débogueurs • Serveurs web • JavaScript interactif
Premiers exemples commentés
• Un projet simple • Un graphique en HTML • Projet plus complexe
2.2
Gestion des données
Chargement et traitement des données
• JSON • CSV • TSV • DSV • Data binding
Manipulation des données
• Filtrage • Tri
2.3
Les différentes représentations
Échelles, Domaines et Intervalles
• Ordinal scaling • Quantitative range scaling
Les graphiques standards
• Barres • Pies • Lines • . . .
Les compléments des graphiques
• Titres • Axes • Légendes • Les couleurs • Les styles
2.4
Utilisation avancée de la librairie
Les différents agencements
• Histogrammes • Camemberts • Hiérarchiques • Cercles • Forces • Clusters
Daniel Lucazeau
3
[email protected]
D3.js
Visualisation interactive de données sur le web
Mise à jour de la représentation
• . . .des données • . . .des axes • données en temps réel
Données géographiques
• geoJSON • TopoJSON • Choropleth • Les couches
2.5
L’interactivité des rendus
Interaction de l’utilisateur
• JavaScript/jQuery • Zoom • Drag and Drop • Tooltips
Les animations
• Interpolations • Timers
2.6
Compléments intéressants
• Tests unitaires • Panorama des solutions/librairies graphiques • Guide de choix de la
représentation graphique
Daniel Lucazeau
4
[email protected]
D3.js
Visualisation interactive de données sur le web
3
3.1
Accompagnement du cours
Travaux pratiques
Les travaux pratiques se font sur une machine virtuelle Linux/Fedora. Tous les logiciels
nécessaires (gratuits voire open-source) y sont installés : Eclipse, les librairies JavaScript,
les navigateurs internet. . .. Cette machine virtuelle contient aussi les projets, avec les
fichiers de données, utilisés pour les présentations et les labs.
La machine virtuelle est montée sous VirtualBox d’Oracle, elle est disponible pour être
activée sous Linux ou Windows 7.
Une clé USB contenant la machine virtuelle est laissée à chaque stagiaire.
3.2
Documents fournis
Chaque stagiaire disposera des supports de présentation au format livre avec espace
pour prise de notes, ainsi qu’une copie N&B protégée par filigrane de cette présentation.
Une mémento D3.js au format A4 pliable en trois volets est aussi distribué.
Une correction imprimée du mini-projet est fournie en fin de stage.
3.3
Origine des documents
Le formateur est l’auteur et le propriétaire de tous les documents (présentation et
mémento) utilisés et fournis.
Les exemples sont aussi de son cru même si bien sûr il s’est inspiré de livres et d’internet.
Les données ont été nettoyées et préparées par le formateur.
4
Autres articulations de cours
Ce cours peut s’enrichir sur les axes suivants :
– Il est possible d’étoffer les parties HTML5, CSS et jQuery ;
– Pré-traitement et nettoyage des données ;
– Utilisation conjointe de R (logiciel de statistiques) ;
– ...
Ces nouveaux plans de cours sont à construire avec le formateur ou avec vos clients.
Daniel Lucazeau
5
[email protected]

Download Report