Successfully reported this slideshow.
Your SlideShare is downloading. ×

1 facture, 6 heures, 2 cocas, 1 visualisation

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Evolución de redes sociales
Evolución de redes sociales
Loading in …3
×

Check these out next

1 of 37 Ad
Advertisement

More Related Content

Advertisement

Recently uploaded (20)

1 facture, 6 heures, 2 cocas, 1 visualisation

  1. 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. 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. 3. 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 ...
  4. 4. Afin de rendre ce dessin «pixellisé» exploitable, vectorisation dynamique sous Adobe Illustrator.
  5. 5. 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.
  6. 6. 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...
  7. 7. 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.
  8. 8. 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 - ...
  9. 9. 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.
  10. 10. 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
  11. 11. 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.
  12. 12. Et en quelques lignes, je récupère dans Processing l’analyse du fichier XML resté en ligne !
  13. 13. Je génère une première visualisation : les numéros de téléphone les plus souvent appelés.
  14. 14. Puis j’y adjoins une seconde visualisation : les appels les plus longs du mois.
  15. 15. Une fois mes diagrammes prêts, je m’attache à choisir un univers de couleurs. Un site ressource formidable : kuler.adobe.com .
  16. 16. Je traite mes deux diagrammes via Adobe Photoshop. Pour caricaturer : Photoshop c’est pour s’occuper de pixels, Illustrator pour les formes vectorielles.
  17. 17. 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.
  18. 18. 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
  19. 19. Pour imprimer pleine page, sans marges, je reporte ma page A4 dans un fichier A3.
  20. 20. Muriel Cooper (1925-1994), citée par John Maeda in Code de création
  21. 21. @UserStudio www.userstudio.fr @matthieusavary savary@userstudio.fr www.msavary.fr

×