1. 1 facture, 6 heures, 2 cocas,
1 visualisation
carnet de bord de création d’une visualisation
analytique de données chiffrées
User Studio pour Médias-Cité, Café Numérique, Langon - décembre 2011
2. Plat du jour :
Ma facture de
téléphone du mois de
novembre.
J’aimerais en faire un
objet lisible, qui me
renseigne sur ma
consommation et me
permet de prendre
une décision
informée quant à
mon choix
d’opérateur.
3.
4. Pour ne pas
réinventer la roue à
chaque nouveau
projet de graphisme,
je pars à la recherche
d’éléments existants :
www.dribbble.com
www.uiparade.com
www.thenounproject.
com
...
5.
6. Afin de rendre ce
dessin «pixellisé»
exploitable,
vectorisation
dynamique sous
Adobe Illustrator.
7.
8. Quelques pictogrammes plus tard,
un choix de typo s’impose. Si je n’ai
pas ce que je veux sous la main,
fonts gratuites sur
www.dafont.com notamment.
9. Je poursuis dans la
récupération des
éléments nécessaires
à mon entreprise.
Ici, les données : elles
ne sont disponibles
que sous la forme de
fichiers PDF, il va
falloir passer en
mode hacking...
10.
11. En m’appuyant sur les
conseils de codeurs PHP
(langage serveur)
obtenus sur
www.stackoverflow.com ,
je m’emploie à extraire
du fichier PDF du mois
de novembre les
éléments pertinents.
12. Puis j’en tire une analyse,
via algorithme PHP
également.
Le coeur de la résolution
du sujet est là :
- calcul de moyennes
- classement de durées
- ...
13. Dans un logiciel tel que
TextMate sous Mac (ou
Notepad++ sur PC) qui
a la faculté de colorer la
syntaxe des langages
de programmation
utilisés.
Ici mes données
formatées en XML.
14. L’analyse complétée, il s’agit
dorénavant de produire une
visualisation originale et
engageante des données
téléphoniques.
Un outil génial pour ça (et pas
que pour ça), hyper
accessible, Processing :
www.processing.org
www.learningprocessing.com
15. Je récupère un exemple
très complet de l’emploi
de la librairie XML de
Processing, c’est-à-dire
les classes et fonctions
capables d’exploiter le
fichier XML de données
téléphoniques que j’ai
préalablement produit.
16. Et en quelques lignes, je
récupère dans
Processing l’analyse du
fichier XML resté en
ligne !
17.
18. Je génère une première
visualisation :
les numéros de
téléphone les plus
souvent appelés.
19. Puis j’y adjoins une
seconde visualisation :
les appels les plus longs
du mois.
20. Une fois mes
diagrammes prêts, je
m’attache à choisir un
univers de couleurs.
Un site ressource
formidable :
kuler.adobe.com .
21. Je traite mes deux
diagrammes via Adobe
Photoshop.
Pour caricaturer :
Photoshop c’est pour
s’occuper de pixels,
Illustrator pour les
formes vectorielles.
22.
23. Ma boîte à outils est prête,
tous mes éléments sont
réunis.
Je peux enfin commencer !
Il s’agit de préparer un
document à imprimer au
format A4 :
» Illustrator, couleurs CMJN,
résolution de 300dpi.
24.
25.
26.
27. Pressé par le temps, je décide à
la dernière minute d’un exercice
de style : produire un document
à la manière d’une figure de la
visualisation de données,
Nicholas Felton. En particulier je
vais m’appuyer sur son fameux
“Annual Report” dans lequel il
relate de son activité personnelle
dans l’année écoulée.
www.feltron.com
www.visualcomplexity.com
www.infosthetics.com
www.visual.ly
www.datavisualization.ch
