La datavisualisation
c’est quoi en fait ?
marion-boucharlat.com
2017
Marion Boucharlat
design d’information
La dataviz en quelques mots :
Faire parler les données
Synthétiser les enjeux
Traduire visuellement
Les terminologies :
Dataviz / datavision
Visualisation de données
Infographie
Design d’information
définition
Carlos Monteiro
Dessin paru dans le numéro spécial Dataviz
de Courrier International - Janvier 2014
“Une image vaut mille mots”Confucius
Le processus de travail :
La datavisualisation vue par ©Baptiste Fuchs
>> Processus de travail qui induit une complémentarité de compétences
La Mission du datadesigner :
- Rendre l’information accessible et compréhensible
- Avoir un graphisme adapté au sujet / Créativité, esthétique du rendu
définition
les modes de représentation
Pour le datadesigner
Il possède un panel de modes de représentation à enrichir et adapter selon
le sujet et l’angle choisi.
On peut classer les modes de représentation en plusieurs catégories
(cf présentation “modes de représentation”)
- Evolution
- Comparaison
- Décomposition
...
datavizcatalogue.com
Frédérik Ruys
Pour vous guider
les modes de représentation
Chart chooser
Anna Vital
les modes de représentation
« The World of 100 » Toby NG
2008, Hong Kong.
“Vite vu bien vu”. Projet de visualisation
par Éclairage Public. 2017
Pictos, illustrations
Les visualisations peuvent être véhiculés par différents médias ou procédés
graphiques
les supports
Le corps selon...
- Les terminaisons nerveuses
- La valeur pour l’assurance
- Les calories brulées par jour
- Les résultats Google
DavidMcCAndless 2011
les supports
100 ans de World Cuisine
Nicolas Kayser-Bril, Clara Kayser-Bril
et Marion Kotlarski - 2012
les supports
La photographie
les supports
La photographie
Nantes métropole
La vérité sur le sexe
Sarah Illenberger
New York City’s greenhouse gas emissions
2010
La 3D et le motion design
les supports
Data Gueule
Un thème ou un concept
décrypté par les données
L’agence kurzgesagt crée des
animations sur des thèmes divers
kurzgesagt.org/
La 3D et le motion design
les supports
Exposition
La Maison du crowfounding.
Wedodata et Paris Se quema
Les expositions 3D
les supports
Johannes Schnitzer,
graveur, 1482
flash back
Cartographie
La datavisualisation est un procéde de transmission de l’information
qui remonte à très loin.
Des points datés de 16 000 ans, trouvés sur les murs de la grotte de Lascaux
montrent une partie du ciel nocturne.
En 150 après JC, Ptolémée, astrologue et astronome grec écrit des énoncés
pour créer une carte. Précurseur de la “géographie”
repris au 15 e siècle sous forme de carte visuelle
Graphique représentant le prix du blé et le salaire hebdomadaire
de 1565 à 1821 - William Playfair
Les précurseurs
La grande époque des innovations graphiques : 18e - 19e siècle.
Là naissent différents types de représentation.
William Playfair
Cet ingénieur et économiste écossais invente à la fin du XVIIIe siècle trois
graphiques simples et encore très utilisés : l’histogramme, le diagramme
circulaire et la série temporelle.
flash back
Diagrammes circulaires représentant la superficie de chaque pays. Les lignes à gauche de
chaque cercle représentent la population et les lignes à droite représentent le total des taxes
collectées (en millions de livres sterling). La ligne pointillée met en relation la ligne des revenus
et la ligne des taxes. William Playfair 1801
William Playfair
flash back
Tous les imports exports pour et en provenance d’Angleterre
William Playfair
flash back
Charles joseph minard
Charles Joseph Minard, ingénieur civil français du 19e siècle.
Cette carte de flux raconte l’histoire de cette armée, qui arrive à Moscou
avec moins d’un quart de son effectif de départ, avant de se faire à nouveau
décimer sur le voyage du retour.
flash back
Carte figurative des pertes successives en hommes de l’Armée française dans la campagne
de Russie en 1812-1813
1869
Flux des émmigrants dans le monde
1858
Charles joseph minard
flash back
Diagramme des causes de mortalité
au sein de l’armée en Orient
1858
florence nightingale
En 1858 cette infirmière britannique, rend compte à la reine Victoria des
causes de mortalité de ses soldats engagés en guerre de Crimée. Celui-
ci met bien en évidence une épidémie (en bleu gris) qui a été bien plus
meurtrière que les blessures au combat (en rose) ou toute autre cause (en
noir).
On nomme ces diagrammes “crêtes de coq”
flash back
Au 20e siècle, 2 méthodes de représentation
novatrices
1-L’Isotype
Par Otto Neurath (philosophe) et Gerd Arnzt
(graphiste) - 1920
Langage universel et non verbal au moyen
d’icônes facilement interprétables.
Né de la devise “les mots divisent, les images
unissent”.
Isotype : Systeme international d’éducation par les images
typographiques
flash back
Ils ont mis au point plus de 4 000 pictogrammes conçus.
L’intention initiale était d’utiliser ce langage pour l’éducation des enfants, mais il
s’est par la suite popularisé dans le domaine de la signalisation publique.
On retrouve des pictos ancêtre de notre signalétique actuelle.
flash back
flash back
Au 20e siècle, 2 méthodes de représentation novatrices
2 - Sémiologie graphique - jacques bertin 1967
“L’oeil voit instantanément une forme quelle que soit sa complexité.
Il est libre de s’intéresser soit à un seul point soit à l’ensemble de l’image”.
Dans son ouvrage il décrit les variables graphiques, c’est à dire tous les
éléments que l’on peut modifier dans les graphiques pour représenter
l’information, telles que la couleur, la taille, ou encore la surface des formes
qui composent les visualisations. Mise au point d’une méthode qui rejoint le
processus de travail de la datavisualisation
1-Définir le problème
2-Définir les données
3-Adopter un langage de traitement
4-Traiter les données c’est à dire simplifier sans détruire
Cet ouvrage est une des bases du langage cartographique actuel
La position, la longueur, l’angle,
la pente, la surface, la couleur
séparée en intensité, saturation
et teinte, et la forme.
2- Sémiologie graphique - jacques bertin 1967
flash back
flash back
Ben schneiderman
Ce professeur américain publie des algorithmes permettant d’obtenir ce genre
de visualisation dès 1990.
Les treemaps sont souvent utilisés pour montrer la répartition d’un budget.
Ce qui est nouveau sur la forme
• Multiplicité des supports
• Performance des outils de datavisualisation pour les designers
• Volonté de rendre accessible la pratique à un plus grand nombre
• Plusieurs sites en ligne pour créer des graphiques et des infographies :
datawrapper.de / infogr.am /Tableau / raw / piktochart.com / visua.ly .....
Et maintenant ?
Ce qui est nouveau sur le fond
• La manière dont notre société mobilise l’information
• La vitesse avec laquelle elle la transmet, la consomme
• Idée de démocratiser l’accès du citoyen aux données publiques
• Révolution numérique qui facilite l’accès aux données.
• Outils de datamining
Recherche “infographie”
Et maintenant ?
On est loin des rendus Excel
Et maintenant ?
Et maintenant ?
Les possibilités techniques et esthétiques sont toujours plus grandes.
Les supports sont variés, parfois récents : interactivité, photo, vidéo, 3D...
C’est une forme de création à part entière
Qu’est ce qui prime dans une infographie : L’esthétique ou
l’information transmise ? Qu’est ce qu’une infographie réussie ?
Une infographie ne dicte pas la pensée, compare des données, donne du sens
et crée de l’information.
Ensuite, le lecteur analyse et construit selon ses propres interprétations, sa
culture à l’image et sa propre histoire
Similar diversity
Andreas Koller, Philipp Steinweber 2011
Et maintenant ?
Il existe des infographies esthétiques mais complexes à déchiffrer.
L’ALLEMAGNE : 60 ANS QUI COMPTENT
de Golden Section Graphics
Et maintenant ?
Des infographies impactantes de par leur sujet...
Marques
Mario Mensch
Publié dans Die Zeit 2013
Et maintenant ?
Des infographies simples, efficaces et esthétiques
L’industrie de la Musique
Die Zeit 2014
Et maintenant ?
Gaspillage d’énergie
Nigel Holmes
2008-Good Magazine
Des infographies efficaces et attractives visuellement ...
graphiquement adaptées à leur sujet.
Et maintenant ?
Pays exportateurs d’armes
2012
Et maintenant ?
Les livres
• William Playfair “Commercial and politics atlas” 1786
• Claude Aschenbrenner “Visionnaire de l’information” 2000
• Jacques Bertin “Sémiologie graphique” 1967
• David McCandless “Datavision ”- Editions Robert Laffont
• “Arround the world” - Edition Gestalten - 2013
• “Designing data” - IdN extra 07
• Ingraphics.ca - revue bi-annuelle
Les sites et blogs
• datavizcatalogue.com
• data-publica.com
• wedodata.fr
• Visualisation de données - les leçons de l’histoire - Gaëtan Gaborit
• http://www.scoop.it/t/journalisme-graphique (Karen Bastien)
La présentation complète en ligne :
http://fr.slideshare.net/marionboucharlat/presentation-dataviz#
pour aller plus loin

La dataviz c'est quoi en fait ?

  • 1.
    La datavisualisation c’est quoien fait ? marion-boucharlat.com 2017 Marion Boucharlat design d’information
  • 2.
    La dataviz enquelques mots : Faire parler les données Synthétiser les enjeux Traduire visuellement Les terminologies : Dataviz / datavision Visualisation de données Infographie Design d’information définition Carlos Monteiro Dessin paru dans le numéro spécial Dataviz de Courrier International - Janvier 2014 “Une image vaut mille mots”Confucius
  • 3.
    Le processus detravail : La datavisualisation vue par ©Baptiste Fuchs >> Processus de travail qui induit une complémentarité de compétences La Mission du datadesigner : - Rendre l’information accessible et compréhensible - Avoir un graphisme adapté au sujet / Créativité, esthétique du rendu définition
  • 4.
    les modes dereprésentation Pour le datadesigner Il possède un panel de modes de représentation à enrichir et adapter selon le sujet et l’angle choisi. On peut classer les modes de représentation en plusieurs catégories (cf présentation “modes de représentation”) - Evolution - Comparaison - Décomposition ...
  • 5.
    datavizcatalogue.com Frédérik Ruys Pour vousguider les modes de représentation
  • 6.
    Chart chooser Anna Vital lesmodes de représentation
  • 7.
    « The World of100 » Toby NG 2008, Hong Kong. “Vite vu bien vu”. Projet de visualisation par Éclairage Public. 2017 Pictos, illustrations Les visualisations peuvent être véhiculés par différents médias ou procédés graphiques les supports
  • 8.
    Le corps selon... -Les terminaisons nerveuses - La valeur pour l’assurance - Les calories brulées par jour - Les résultats Google DavidMcCAndless 2011 les supports
  • 9.
    100 ans deWorld Cuisine Nicolas Kayser-Bril, Clara Kayser-Bril et Marion Kotlarski - 2012 les supports La photographie
  • 10.
    les supports La photographie Nantesmétropole La vérité sur le sexe Sarah Illenberger
  • 11.
    New York City’sgreenhouse gas emissions 2010 La 3D et le motion design les supports
  • 12.
    Data Gueule Un thèmeou un concept décrypté par les données L’agence kurzgesagt crée des animations sur des thèmes divers kurzgesagt.org/ La 3D et le motion design les supports
  • 13.
    Exposition La Maison ducrowfounding. Wedodata et Paris Se quema Les expositions 3D les supports
  • 14.
    Johannes Schnitzer, graveur, 1482 flashback Cartographie La datavisualisation est un procéde de transmission de l’information qui remonte à très loin. Des points datés de 16 000 ans, trouvés sur les murs de la grotte de Lascaux montrent une partie du ciel nocturne. En 150 après JC, Ptolémée, astrologue et astronome grec écrit des énoncés pour créer une carte. Précurseur de la “géographie” repris au 15 e siècle sous forme de carte visuelle
  • 15.
    Graphique représentant leprix du blé et le salaire hebdomadaire de 1565 à 1821 - William Playfair Les précurseurs La grande époque des innovations graphiques : 18e - 19e siècle. Là naissent différents types de représentation. William Playfair Cet ingénieur et économiste écossais invente à la fin du XVIIIe siècle trois graphiques simples et encore très utilisés : l’histogramme, le diagramme circulaire et la série temporelle. flash back
  • 16.
    Diagrammes circulaires représentantla superficie de chaque pays. Les lignes à gauche de chaque cercle représentent la population et les lignes à droite représentent le total des taxes collectées (en millions de livres sterling). La ligne pointillée met en relation la ligne des revenus et la ligne des taxes. William Playfair 1801 William Playfair flash back
  • 17.
    Tous les importsexports pour et en provenance d’Angleterre William Playfair flash back
  • 18.
    Charles joseph minard CharlesJoseph Minard, ingénieur civil français du 19e siècle. Cette carte de flux raconte l’histoire de cette armée, qui arrive à Moscou avec moins d’un quart de son effectif de départ, avant de se faire à nouveau décimer sur le voyage du retour. flash back Carte figurative des pertes successives en hommes de l’Armée française dans la campagne de Russie en 1812-1813 1869
  • 19.
    Flux des émmigrantsdans le monde 1858 Charles joseph minard flash back
  • 20.
    Diagramme des causesde mortalité au sein de l’armée en Orient 1858 florence nightingale En 1858 cette infirmière britannique, rend compte à la reine Victoria des causes de mortalité de ses soldats engagés en guerre de Crimée. Celui- ci met bien en évidence une épidémie (en bleu gris) qui a été bien plus meurtrière que les blessures au combat (en rose) ou toute autre cause (en noir). On nomme ces diagrammes “crêtes de coq” flash back
  • 21.
    Au 20e siècle,2 méthodes de représentation novatrices 1-L’Isotype Par Otto Neurath (philosophe) et Gerd Arnzt (graphiste) - 1920 Langage universel et non verbal au moyen d’icônes facilement interprétables. Né de la devise “les mots divisent, les images unissent”. Isotype : Systeme international d’éducation par les images typographiques flash back
  • 22.
    Ils ont misau point plus de 4 000 pictogrammes conçus. L’intention initiale était d’utiliser ce langage pour l’éducation des enfants, mais il s’est par la suite popularisé dans le domaine de la signalisation publique. On retrouve des pictos ancêtre de notre signalétique actuelle. flash back
  • 23.
    flash back Au 20esiècle, 2 méthodes de représentation novatrices 2 - Sémiologie graphique - jacques bertin 1967 “L’oeil voit instantanément une forme quelle que soit sa complexité. Il est libre de s’intéresser soit à un seul point soit à l’ensemble de l’image”. Dans son ouvrage il décrit les variables graphiques, c’est à dire tous les éléments que l’on peut modifier dans les graphiques pour représenter l’information, telles que la couleur, la taille, ou encore la surface des formes qui composent les visualisations. Mise au point d’une méthode qui rejoint le processus de travail de la datavisualisation 1-Définir le problème 2-Définir les données 3-Adopter un langage de traitement 4-Traiter les données c’est à dire simplifier sans détruire Cet ouvrage est une des bases du langage cartographique actuel
  • 24.
    La position, lalongueur, l’angle, la pente, la surface, la couleur séparée en intensité, saturation et teinte, et la forme. 2- Sémiologie graphique - jacques bertin 1967 flash back
  • 25.
    flash back Ben schneiderman Ceprofesseur américain publie des algorithmes permettant d’obtenir ce genre de visualisation dès 1990. Les treemaps sont souvent utilisés pour montrer la répartition d’un budget.
  • 26.
    Ce qui estnouveau sur la forme • Multiplicité des supports • Performance des outils de datavisualisation pour les designers • Volonté de rendre accessible la pratique à un plus grand nombre • Plusieurs sites en ligne pour créer des graphiques et des infographies : datawrapper.de / infogr.am /Tableau / raw / piktochart.com / visua.ly ..... Et maintenant ? Ce qui est nouveau sur le fond • La manière dont notre société mobilise l’information • La vitesse avec laquelle elle la transmet, la consomme • Idée de démocratiser l’accès du citoyen aux données publiques • Révolution numérique qui facilite l’accès aux données. • Outils de datamining
  • 27.
  • 28.
    On est loindes rendus Excel Et maintenant ?
  • 29.
    Et maintenant ? Lespossibilités techniques et esthétiques sont toujours plus grandes. Les supports sont variés, parfois récents : interactivité, photo, vidéo, 3D... C’est une forme de création à part entière Qu’est ce qui prime dans une infographie : L’esthétique ou l’information transmise ? Qu’est ce qu’une infographie réussie ? Une infographie ne dicte pas la pensée, compare des données, donne du sens et crée de l’information. Ensuite, le lecteur analyse et construit selon ses propres interprétations, sa culture à l’image et sa propre histoire
  • 30.
    Similar diversity Andreas Koller,Philipp Steinweber 2011 Et maintenant ? Il existe des infographies esthétiques mais complexes à déchiffrer.
  • 31.
    L’ALLEMAGNE : 60ANS QUI COMPTENT de Golden Section Graphics Et maintenant ?
  • 32.
    Des infographies impactantesde par leur sujet... Marques Mario Mensch Publié dans Die Zeit 2013 Et maintenant ?
  • 33.
    Des infographies simples,efficaces et esthétiques L’industrie de la Musique Die Zeit 2014 Et maintenant ?
  • 34.
    Gaspillage d’énergie Nigel Holmes 2008-GoodMagazine Des infographies efficaces et attractives visuellement ... graphiquement adaptées à leur sujet. Et maintenant ?
  • 35.
  • 36.
    Les livres • WilliamPlayfair “Commercial and politics atlas” 1786 • Claude Aschenbrenner “Visionnaire de l’information” 2000 • Jacques Bertin “Sémiologie graphique” 1967 • David McCandless “Datavision ”- Editions Robert Laffont • “Arround the world” - Edition Gestalten - 2013 • “Designing data” - IdN extra 07 • Ingraphics.ca - revue bi-annuelle Les sites et blogs • datavizcatalogue.com • data-publica.com • wedodata.fr • Visualisation de données - les leçons de l’histoire - Gaëtan Gaborit • http://www.scoop.it/t/journalisme-graphique (Karen Bastien) La présentation complète en ligne : http://fr.slideshare.net/marionboucharlat/presentation-dataviz# pour aller plus loin