Formation D3.js : Visualisation des données avec D3.js Représenter les données sous forme graphique et interactive avec Data-Driven Documents

D3.js (ou D3 pour Data-Driven Documents) est un framework JavaScript permettant de manipuler des documents basés sur des données. D3 dynamise les données en s’appuyant sur l’HTML, le SVG et le CSS tout en s’efforçant de suivre les standards du web.

L’originalité de D3 est de générer des éléments graphiques en SVG à partir de collections d’objets JavaScript. Ces objets pouvant être, dans le cas d’une utilisation sous Angular, délivrés par des observables.

Cette formation D3.js vous apprend à représenter des données sous forme graphique et interactive avec D3.js.

Objectif opérationnel :

Savoir représenter des données sous forme graphique et interactive avec D3.js.

Objectifs pédagogiques :

À l'issue de cette formation D3.js, vous aurez acquis les connaissances et compétences nécessaires pour :

• Représenter des données sous forme graphique et interactive
• Exploiter les bibliothèques de codes prêtes à l'emploi de D3.js
• Comprendre les interactions entre HTML 5, SVG, CSS 3, JavaScript
• Connaître les pratiques de cartographie

Public :

Ce cours D3.js s'adresse aux journalistes, concepteurs web, infographistes et développeurs.

Prérequis :

Aucun prérequis technique n'est attendu pour suivre cette formation D3.js. Il est toutefois conseillé d'avoir une pratique courante de la navigation web.

Présentation de D3.js / Observable

À l'origine : Michael Bostock du trio de Stanford
Data Journalisme : sélection d'exemples réalisés avec D3.js
Pourquoi et comment utiliser D3.js ?

Initiation aux langages Web

HTML, CSS : les standards du Web
JavaScript / jQuery : programmer l'interactivité
SVG : graphismes vectoriels avec HTML 5

Représentations graphiques avec D3.js

Formes :
- Rectangles
- Cercles
- Lignes
- Polygones
Personnalisation :
- Couleurs
- Marges
- Contours
- Remplissages
Effets graphiques :
- Filtres
- Dégradés
- Ombres

D3.js / Observable par la pratique

Étapes et méthodologie de travail
Dénicher, nettoyer, exploiter des fichiers de données Open Data de type CSV ou JSON
Choisir un modèle de visualisation adéquat
Gérer l'interactivité
Responsive Design et mobile-friendly
Bonnes pratiques

Cartographie

Formats GeoJSON et TopoJSON
Créer des cartes interactives avec D3.js

Pour aller plus loin

Sélection de tutoriels
Ressources et bibliographies