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