1 facture, 6 heures, 2 cocas,1 visualisationcarnet de bord de création d’une visualisationanalytique de données chiffréesU...
Plat du jour :Ma facture detéléphone du mois denovembre.J’aimerais en faire unobjet lisible, qui merenseigne sur maconsomm...
Pour ne pasréinventer la roue àchaque nouveauprojet de graphisme,je pars à la recherched’éléments existants :www.dribbble....
Afin de rendre cedessin «pixellisé»exploitable,vectorisationdynamique sousAdobe Illustrator.
Quelques pictogrammes plus tard,un choix de typo s’impose. Si je n’aipas ce que je veux sous la main,fonts gratuites surww...
Je poursuis dans larécupération deséléments nécessairesà mon entreprise.Ici, les données : ellesne sont disponiblesque sou...
En m’appuyant sur lesconseils de codeurs PHP(langage serveur)obtenus surwww.stackoverflow.com ,je m’emploie à extrairedu fic...
Puis j’en tire une analyse,via algorithme PHPégalement.Le coeur de la résolutiondu sujet est là :- calcul de moyennes- cla...
Dans un logiciel tel queTextMate sous Mac (ouNotepad++ sur PC) quia la faculté de colorer lasyntaxe des langagesde program...
L’analyse complétée, il s’agitdorénavant de produire unevisualisation originale etengageante des donnéestéléphoniques.Un o...
Je récupère un exempletrès complet de l’emploide la librairie XML deProcessing, c’est-à-direles classes et fonctionscapabl...
Et en quelques lignes, jerécupère dansProcessing l’analyse dufichier XML resté enligne !
Je génère une premièrevisualisation :les numéros detéléphone les plussouvent appelés.
Puis j’y adjoins uneseconde visualisation :les appels les plus longsdu mois.
Une fois mesdiagrammes prêts, jem’attache à choisir ununivers de couleurs.Un site ressourceformidable :kuler.adobe.com .
Je traite mes deuxdiagrammes via AdobePhotoshop.Pour caricaturer :Photoshop c’est pours’occuper de pixels,Illustrator pour...
Ma boîte à outils est prête,tous mes éléments sontréunis.Je peux enfin commencer !Il s’agit de préparer undocument à imprim...
Pressé par le temps, je décide àla dernière minute d’un exercicede style : produire un documentà la manière d’une figure de...
Pour imprimer pleinepage, sans marges, jereporte ma page A4dans un fichier A3.
Muriel Cooper (1925-1994),citée par John Maedain Code de création
@UserStudiowww.userstudio.fr@matthieusavarysavary@userstudio.frwww.msavary.fr
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
1 facture, 6 heures, 2 cocas, 1 visualisation
Prochain SlideShare
Chargement dans…5
×

1 facture, 6 heures, 2 cocas, 1 visualisation

4 463 vues

Publié le

Publié dans : Design
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 463
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 834
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

1 facture, 6 heures, 2 cocas, 1 visualisation

  1. 1. 1 facture, 6 heures, 2 cocas,1 visualisationcarnet de bord de création d’une visualisationanalytique de données chiffréesUser Studio pour Médias-Cité, Café Numérique, Langon - décembre 2011
  2. 2. Plat du jour :Ma facture detéléphone du mois denovembre.J’aimerais en faire unobjet lisible, qui merenseigne sur maconsommation et mepermet de prendreune décisioninformée quant àmon choixd’opérateur.
  3. 3. Pour ne pasréinventer la roue àchaque nouveauprojet de graphisme,je pars à la recherched’éléments existants :www.dribbble.comwww.uiparade.comwww.thenounproject.com...
  4. 4. Afin de rendre cedessin «pixellisé»exploitable,vectorisationdynamique sousAdobe Illustrator.
  5. 5. Quelques pictogrammes plus tard,un choix de typo s’impose. Si je n’aipas ce que je veux sous la main,fonts gratuites surwww.dafont.com notamment.
  6. 6. Je poursuis dans larécupération deséléments nécessairesà mon entreprise.Ici, les données : ellesne sont disponiblesque sous la forme defichiers PDF, il vafalloir passer enmode hacking...
  7. 7. En m’appuyant sur lesconseils de codeurs PHP(langage serveur)obtenus surwww.stackoverflow.com ,je m’emploie à extrairedu fichier PDF du moisde novembre leséléments pertinents.
  8. 8. Puis j’en tire une analyse,via algorithme PHPégalement.Le coeur de la résolutiondu sujet est là :- calcul de moyennes- classement de durées- ...
  9. 9. Dans un logiciel tel queTextMate sous Mac (ouNotepad++ sur PC) quia la faculté de colorer lasyntaxe des langagesde programmationutilisés.Ici mes donnéesformatées en XML.
  10. 10. L’analyse complétée, il s’agitdorénavant de produire unevisualisation originale etengageante des donnéestéléphoniques.Un outil génial pour ça (et pasque pour ça), hyperaccessible, Processing :www.processing.orgwww.learningprocessing.com
  11. 11. Je récupère un exempletrès complet de l’emploide la librairie XML deProcessing, c’est-à-direles classes et fonctionscapables d’exploiter lefichier XML de donnéestéléphoniques que j’aipréalablement produit.
  12. 12. Et en quelques lignes, jerécupère dansProcessing l’analyse dufichier XML resté enligne !
  13. 13. Je génère une premièrevisualisation :les numéros detéléphone les plussouvent appelés.
  14. 14. Puis j’y adjoins uneseconde visualisation :les appels les plus longsdu mois.
  15. 15. Une fois mesdiagrammes prêts, jem’attache à choisir ununivers de couleurs.Un site ressourceformidable :kuler.adobe.com .
  16. 16. Je traite mes deuxdiagrammes via AdobePhotoshop.Pour caricaturer :Photoshop c’est pours’occuper de pixels,Illustrator pour lesformes vectorielles.
  17. 17. Ma boîte à outils est prête,tous mes éléments sontréunis.Je peux enfin commencer !Il s’agit de préparer undocument à imprimer auformat A4 :» Illustrator, couleurs CMJN,résolution de 300dpi.
  18. 18. Pressé par le temps, je décide àla dernière minute d’un exercicede style : produire un documentà la manière d’une figure de lavisualisation de données,Nicholas Felton. En particulier jevais m’appuyer sur son fameux“Annual Report” dans lequel ilrelate de son activité personnelledans l’année écoulée.www.feltron.comwww.visualcomplexity.comwww.infosthetics.comwww.visual.lywww.datavisualization.ch
  19. 19. Pour imprimer pleinepage, sans marges, jereporte ma page A4dans un fichier A3.
  20. 20. Muriel Cooper (1925-1994),citée par John Maedain Code de création
  21. 21. @UserStudiowww.userstudio.fr@matthieusavarysavary@userstudio.frwww.msavary.fr

×