Journée de formation sur le datadesign interactif.

1. EMI-CFD
Data design & interactivité
-
Geoffrey Dorne
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.1

2. présentation
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.2

3. Ensad - design graphique & multimédia
début d’activité - designer indépendant, 2004
blog - Graphism.fr & Jaffiche.fr
création de société - yoocasa.com, 2008
mémoire & diplôme - interfaces en ligne & Hacking Citoyen
chercheur EnsadLab (identité numérique mobile), 2010
Mozilla (Firefox 4)
CEA (Commissariat à l’Énergie Atomique)
Orange Vallée
enseignement, conférences, workshops
société de design (création, conseil, appels d’offres, enseignement...)
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.3

4. data design & interactivité
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.4

5. une journée, quatre temps.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.5

6. 10h à 11h30
première partie : présentation / représentation de l’information / exemples
11h30 à 13h
seconde partie : utilisateur dans le data design / utilisateur = interaction / UCD
14h à 16h
troisième partie : atelier, mise en pratique d’un cas de data design.
16h à 17h
quatrième partie : présensation & discussion.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.6

7. représentation de l’information
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.7

8. La visualisation de données dépasse l’analyse statistique
& les algorithmes afin de proposer un sens pour l’utilisateur.
Fondée sur un langage visuel & hiérarchique, la visualisation
de données trouve un équilibre entre représentation visuelle
& unité conceptuelle.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.8

9. La complexité est un défi en soi. Les réseaux sont partout et ce
principe structurel et organisationnel atteint presque tous les
domaines, des gènes, aux réseaux trophiques, aux cours de la
bourse jusqu’aux réseaux sociaux.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.9

10. l’évolution.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.10

11. Sumériens / - 3000 av JC - Humbaba élevé par Samas, le dieu Soleil - doit garder arbre de la connaissance
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.11

12. Bodhi du Sri Lanka / figuier sacré / axe entre terre ciel & enfers
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.12

13. Albrecht Dürer - Adam & Eve - 1507
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.13

14. arbre généalogique - monarchie - médiéval
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.14

15. Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.15

16. Originellement, la représentation de données :
- l’ordre
- la symétrie
- la hiérarchie
- la simplicité
- l’équilibre
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.16

17. l’évolution
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.17

18. classer
les
connaissances
Système figuré des Connaissances, d’après le chancelier Bacon - l’Encyclopédie Diderot & d’Alembert. - 1747
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.18

19. connaissances
Encyclopédie ou Dictionnaire Raisonné des Sciences, des Arts et des Métiers - 1780
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.19

20. enseigner
1644 - graphique représentant la distance de Tolède à Rome - dessiné par Michael van Langren
1686 - première carte météorologique connue représentant les vents. Edmond Halley
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.20

21. organiser
classifier l’information - industrie & organigramme
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.21

22. historique
1869 par Charles Minard montrant les effectifs de la Grande Armée campagne de Russie en 1812 (taille / coordonnées / température)
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.22

23. géographique
Tube Map, 1908 - London
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.23

24. l’ère de la visualisation de données
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.24

25. Josh Nimoy
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.25

26. Première raison :
L’informatique & les capacités de stockages.
Notre capacité à produire de plus en plus de données
nous oblige à donner du sens à ces données.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.26

27. « Tout ce qui peut-être numérisé
le sera. »
« La capacité des disques durs
double tous les 18 mois. »
loi de Kryder
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.27

28. Seconde raison :
L’open data. L’ouverture des données n’a jamais été aussi
grande et surtout, si peu coûteuse, voire gratuite.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.28

29. 11,616 WikiLeaks Iraq SIGACT / Jonathan Stray, Julian Burgess
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.29

30. Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.30

31. Troisième raison :
Les réseaux sociaux en ligne. Ils permettent de comprendre
plus facilement les comportements sociaux, de les quantifier,
de les représenter.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.31

32. Stream Graph
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.32

33. Quatrième raison :
La démocratisation des outils. Il existe de plus en plus d’outils
qui permettent de concevoir de la visualisation de données
(processing, flash, prefuse, aiSee, Google Chart Tools, etc.)
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.33

34. Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.34

35. Dernière raison :
La visualisation de données est à la mode.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.35

36. Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.36

37. http://www.flickr.com/photos/gsfc/7009056027/ - NASA - "Perpetual Ocean” permettant de visualiser les courants océaniques
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.37

38. de l’information égo-centrée
à l’information centrée utilisateur
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.38

39. Ritwik Dey - vie de son auteur entre les âges de 6 et 24 - évolution de ses centres d’intérêts.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.39

40. Nicholas Feltron / self tracking
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.40

41. Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.41

42. Peter Ørntoft
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.42

43. SocialMemories & Egobook
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.43

44. Hand-made-kit datavisualisation - / Jose Duarte
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.44

45. Lauren Manning / données collectées
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.45

46. mécaniques interactives
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.46

47. +
méthodes de représentations visuelles
techniques d’exploration interactive
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.47

48. Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.48

49. la check-list :
montrer les données
être le plus précis possible
garder la cohérence des données entre-elles
offrir un résultat simple
révéler les différents niveaux de données
engager l’utilisateur
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.49

50. cartographies dynamiques
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.50

51. découverte progressive
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.51

52. navigation dans le temps
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.52

53. https://vimeo.com/13761997 - - Applied Works pour The Times.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.53

54. https://vimeo.com/13761997 - - Applied Works pour The Times.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.54

55. https://vimeo.com/13761997 - - Applied Works pour The Times.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.55

56. La démocratie en chiffres / arte
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.56

57. Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.57

58. http://synoptic.weaintplastic.com/
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.58

59. Créée par deux ingénieurs de Google, vous allez pouvoir visualiser les vents, leur vitesse et leur direction - http://hint.fm/wind/
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.59

60. http://nuclearsecrecy.com/nukemap/ - faire exploser une bombe nucléaire de votre choix -
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.60

61. http://bit.ly/HovX8c - le Monde - discours des candidats
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.61

62. http://labs.brandwatch.com/superbowl/ - Brandwatch - application de réputation sociale sur les annonceurs du SuperBowl
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.62

63. l’information des utilisateurs,
rendue aux utilisateurs
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.63

64. OCDE Better Life Initiative - http://oecdbetterlifeindex.org/
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.64

65. http://www.wefeelfine.org/ / Jonathan Harris & Sep Kamvar
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.65

66. http://www.ionz.com.br - my dataviz
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.66

67. The Guardian - analyse les rumeurs 2,6 millions de tweets - http://www.guardian.co.uk/uk/interactive/2011/dec/07/london-riots-twitter
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.67

68. https://vimeo.com/19997906 - cracking Australian Honeypot Project
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.68

69. Méthodologie.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.69

70. double diamond :
de
de
fin
liv
er
e
op
er
l
ve
ov
de
sc
di
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.70

71. de
de
fin
liv
er
e
op
er
l
ve
ov
de
sc
di
empathie choix créativité finalisation
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.71

72. double diamond & data
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.72

73. de
de
fin
liv
er
e
op
er
l
ve
ov
de
sc
di
data
Rassemblez les données / les explorer / produire
des schémas pour identifier la narration, le concept.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.73

74. 1. Discover - le brief & l’observation, ou comment isoler la problématique réelle des
données (données récoltées, triées, etc.)
2. Define - la définition du concept (& esprit des données, de la représentation) - ou
comment cerner & créer l’esprit d’une data visualisation, sa particularité, ce qu’elle
excluera. Donne lieu a un brief.
3. Developp - la partie d’exploration graphique & formelle - ou comment ouvrir le
champs des possibles graphiques & interactifs
4. Deliver - la partie où la dataviz est délivrée (site web, application, image, etc.) -
formalisation d’un contenu, contraintes et accompagnement.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.74

75. mobilité & data visualisation
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.75

76. http://sensorly.com/fr - aide les opérateurs mobiles à améliorer la qualité de leurs réseaux / utilisateurs - testeurs
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.76

77. Genève Ville Vivante - circulation des téléphones - https://vimeo.com/37238326
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.77

78. Weddar
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.78

79. Ocarina - https://vimeo.com/2131612
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.79

80. Ateliers
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.80

81. Sujet 1
Imaginer un service dans lequel
deux utilisateurs peuvent com-
muniquer uniquement grâce
à leurs données récoltées.
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.81

82. Sujet 2
Imaginer une application mobile
permettant de représenter l’actua-
lité selon les données récupérées
par le mobile (orientation, heure,
géoloc, données personnelles, etc.)
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.82

83. Sujet 1 Sujet 2
Imaginer un service Imaginer une applica-
dans lequel deux utili- tion mobile permettant
de représenter l’actua-
sateurs peuvent com-
lité selon les données
muniquer uniquement
récupérées par le mobile
grâce à leurs données (orientation, heure, géo-
récoltées. loc, données person-
nelles, etc.)
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.83

84. des questions ?
merci.
Geoffrey Dorne - http://graphism.fr - @GeoffreyDorne
Geoffrey Dorne | Data design & interactivité | EMI-CFD - | Avril 2012 p.84