1. TEST
#DATAVISAJ

2. Des outils
et des hommes

3. Des outils
et des tâches

4. Des outils, des tâches
et des hommes
Voilà...

5. Souviens-toi de Michaël...

6. Parce que, parfois,
c’est compliqué

7. Savoir quoi faire

8. Savoir quoi vouloir faire

9. Savoir vouloir faire

10. dataviz : interactive ?

11. dataviz : interactive ?
NON ?
Alors tu fais ce que tu veux,
tout est bon.

12. dataviz : interactive ?
OUI ?
Super !
Reste plus qu’à souffrir...

13. dataviz : interactive ?
OUI ?
Super !
Reste plus qu’à rigoler :)

14. Une forme, un espoir

15. Un choix, des critères

16. Facilité de mise en place
Interactivité Performance

17. Facilité de mise en place
Interactivité Performance

18. Facilité de mise en place
PNG
DOM
SVG Canvas
Interactivité Performance

19. PNG
• un tag <img> et on est bon
• position via CSS, transitions et animations
• :hover, bien pour actions simples
• jouer avec les <map> pour faire plus
complexe dans l’interaction
• c’est écrit png, mais jpg et gif aussi, hein...

20. DOM
• “dessiner” avec des <div>s
• souple, simple, terrain connu, aucun risque
• ça va, quoi.

21. DOM et PNG sont
sympa, mais limités
ils sont un peu trop carrés, quand même.

22. Pour faire des choses pointues,
il faut des outils pointus

23. Pour faire des choses pointues,
il faut des outils pointus
comme ton zizi

24. Pour faire des choses pointues,
il faut des outils pointus
des trucs de pro, quoi...

25. Pour faire des choses pointues,
il faut des outils pointus
des trucs de pro, quoi...

26. SVG
• mise en oeuvre “relativement” simple
• haut niveau de potentiel interactif
• librairies là pour aider
• ça va aller

27. SVG
• mise en oeuvre “relativement” simple
• haut niveau de potentiel interactif
• librairies là pour aider
• ça va aller

28. SVG, c’est quoi ?
Le SVG, c’est du vectoriel dans la page HTML.
Donc :
- le rendu est en temps réel (attention performance)
- les formes “existent” dans le DOM (events)
- on peut les modifier à la volée

29. ATTENTION CODE ATTENTION CODE ATTENTION
ATTENTION CODE ATTENTION CODE ATTENTION

30. ATTENTION CODE ATTENTION CODE ATTENTION
TOUTE UTILISATION UN
TANT SOIT PEU AVANCÉE
NÉCESSITE L’UTILISATION
DE LA PROGRAMMATION,
DU CODE : ÉVÉNEMENTS,
VARIABLES, INSTANCES...
ATTENTION CODE ATTENTION CODE ATTENTION

31. ATTENTION CODE ATTENTION CODE ATTENTION
TOUTE UTILISATION UN
TANT SOIT PEU AVANCÉE
NÉCESSITE L’UTILISATION
DE LA PROGRAMMATION,
DU CODE : ÉVÉNEMENTS,
VARIABLES, INSTANCES...
ATTENTION CODE ATTENTION CODE ATTENTION

32. ATTENTION CODE ATTENTION CODE ATTENTION
Mais bon,
on s’en fout,
hein ?
ATTENTION CODE ATTENTION CODE ATTENTION

33. Workflöw SVG
• Adobe Illustrator
• Exporter en SVG
• Récupérer le code, le placer dans sa page
• et voilà...

34. Workflöw SVG
• Adobe Illustrator
• Exporter en SVG
• Récupérer le code, le placer dans sa page
• et voilà...
- Trop facile !

35. émo

36. démo

37. Workflöw SVG
Mais tout ça n’est intéressant que si ça devient interactif.

38. émo

39. démo

40. Conclusion: c’est une question de style...

41. Conclusion: c’est une question de style...

42. Conclusion: c’est une question de style...

43. Conclusion: c’est une question de style...

44. Conclusion: c’est une question de style...

45. Conclusion: c’est une question de style...

46. Bref,

47. Fais le grand saut !

48. Voilà, merci.
Là : https://github.com/boblemarin/-datavisaj
Là aussi : http://boblemarin.github.com/-datavisaj/
Et surtout : http://google.com