Post on 22-Aug-2020
transcript
Data-Driven Documents
FAUROBERT EmericGIZARD ChristopherMARTINEZ Guillaume
POCHOL Florian
Généralités
Bibliothèque JavaScript de
visualisations données
2
Utilise les technologies:- ECMAScript6 (2015)- SVG- CSS
SVG (Scalable Vector Graphics)
3
Image matricielle Image vectorielle
Historique● Les étudiants Mike Bostock et Vadim Ogievetsky ainsi que le professeur Jeff
Heer de l’université de Stanford
2009
Popularisatio
n
1.0 2.0 4.52010 2011 28 Jan 2017
Protovis
Projet D3
Dernière ver.
4
Installation
Version minifiée Gestionnaire de dépendances
OU
5
Primitives
d3. select ()append()selectAll()pack ()format ()scaleOrdinal ()forceSimulation ()...
6
Exemple
7
Selecteurs
8
Liste d’éléments HTML
HTML
Exemple
JavaScript
Données
9
Données : enter()
10
Données : exit()
11
Démonstration
12Source code
Autres ExemplesTetris: https://d3tetris.herokuapp.com/
Force Graph Editor: http://bl.ocks.org/benzguo/4370043
Plane Visualisation: http://www.decembercafe.org/demo/plane/
https://github.com/d3/d3/wiki/Gallery
13
Questions
14
Références- https://d3js.org/- https://github.com/d3/d3- https://fr.wikipedia.org/wiki/D3.js- https://omid.al/posts/2016-08-23-MocapVis-D3.html
15