16 Avril 2013Narration visuelle et Interactivité
GRILLE DE LECTURE                Enrichir les   Collecter                   Visualiser                 données
COLLECTER LES DONNÉESUtiliser des sources de données ouvertes (open data)    §  non structurées (texte brut, PDF)   §  S...
LES DONNÉES LIBRES : OPENDATAPortail national : http://data.gouv.fr (Etalab)Portail spécifique: http://opendata.paris.fr
LINKING OPEN DATAOpen Data + Web Sémantique Exemple : DBpedia    extraction des informations    de Wikipedia    + structur...
“Linking Open Data cloud diagram »                    Richard Cyganiak and Anja Jentzsch.LINKING OPEN DATA                ...
LES APIServices Web fournissant des donnéesExemple : Infochimps                         http://www.infochimps.com
« SCRAPPING » : LA RÉCOLTE DE DONNÉESBeaucoup dinformations disponible sur InternetAttention   Des formats adaptés à laffi...
ENRICHIR LES DONNÉES                                 Nettoyer       Agréger                                           Stru...
LES API       Services Web pour traiter les donnéeshttp://www.programmableweb.com
GOOGLE REFINE  "A power tool to work with messy data"  Précédemment Freebase Gridworks  Logiciel libre dETL (Extract Trans...
LANALYSE EXPLORATOIRE DES DONNÉESExplorer les données pour orienter le choix des traitements plus poussésConnaître les ten...
LES OUTILS DE VISUALISATION POUR LE WEB         Choisir un niveau dabstraction                 plus dabstraction:         ...
JAVASCRIPT INFOVIS TOOLKITFramework Javascript dédié au WebAvantages§  Simplicité de mise en œuvre     §  un fichier de ...
HIGHCHARTSBibliothèque JavascriptAvantages§  Simplicité dutilisation : les données et les options daffichage sont mises d...
GOOGLE CHARTS APIAvantages :§  Très simple dutilisation§  Se base sur des données de type tableur§  Des graphiques inte...
GEPHIUn outil dexploration dun certain type de données,      les réseaux nœuds-liens :§  réseaux informatiques§  réseaux...
D3.JS (DATA-DRIVEN DOCUMENTS)Un paradigme fort :§  faire correspondre données et éléments du DOM (balises HTML et graphiq...
PROCESSING.JSPortage du langage Processing (basé sur Java) en javascript :   un langage très utilisé pour lart numérique e...
PHILOGLFramework 3D :§  repose sur JavaScript et WebGL§  orienté visualisation de données et jeux Avantages :§  Open So...
HTML 5 - CANVAS      Successeur de Flash ?      Avantages      §  Presque aussi rapide que Flash      §  Pas besoin de b...
SVG (SCALABLE VECTOR GRAPHICS)     Le "HTML du dessin vectoriel"     Avantages     §  Format ouvert, supporté par le W3C,...
ET APRÈS ?
La caisse à outils de la visualisation d'informations
La caisse à outils de la visualisation d'informations
La caisse à outils de la visualisation d'informations
La caisse à outils de la visualisation d'informations
Prochain SlideShare
Chargement dans…5
×

La caisse à outils de la visualisation d'informations

1 971 vues

Publié le

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

Aucun téléchargement
Vues
Nombre de vues
1 971
Sur SlideShare
0
Issues des intégrations
0
Intégrations
321
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

La caisse à outils de la visualisation d'informations

  1. 1. 16 Avril 2013Narration visuelle et Interactivité
  2. 2. GRILLE DE LECTURE Enrichir les Collecter Visualiser données
  3. 3. COLLECTER LES DONNÉESUtiliser des sources de données ouvertes (open data)  §  non structurées (texte brut, PDF) §  Structurées : XML, JSON, données « sémantisées »Utiliser des API (s)Extraire des données par crawling (robots d’indexation et de collecte)
  4. 4. LES DONNÉES LIBRES : OPENDATAPortail national : http://data.gouv.fr (Etalab)Portail spécifique: http://opendata.paris.fr
  5. 5. LINKING OPEN DATAOpen Data + Web Sémantique Exemple : DBpedia extraction des informations de Wikipedia + structuration + publication "sémantique" http://dbpedia.org
  6. 6. “Linking Open Data cloud diagram » Richard Cyganiak and Anja Jentzsch.LINKING OPEN DATA http://lod-cloud.net
  7. 7. LES APIServices Web fournissant des donnéesExemple : Infochimps http://www.infochimps.com
  8. 8. « SCRAPPING » : LA RÉCOLTE DE DONNÉESBeaucoup dinformations disponible sur InternetAttention Des formats adaptés à laffichage, mais pas au traitement de données Des formats et structures différents pour chaque site, voire pour chaque catégorie dun siteRecréer des structures pour les donnéesDévelopper des scripts dextraction XPath RegExp recettes id titre texte
  9. 9. ENRICHIR LES DONNÉES Nettoyer Agréger Structurer Données Lier à des Comprendre métadonnées
  10. 10. LES API Services Web pour traiter les donnéeshttp://www.programmableweb.com
  11. 11. GOOGLE REFINE "A power tool to work with messy data" Précédemment Freebase Gridworks Logiciel libre dETL (Extract Transform Load) Multi-plateformeshttp://code.google.com/p/google-refine/
  12. 12. LANALYSE EXPLORATOIRE DES DONNÉESExplorer les données pour orienter le choix des traitements plus poussésConnaître les tendances, évaluer les échelles et les volumes de donnéesRéaliser des maquettes/prototypes avec des données réelles pour vérifier ladéquation entre ses données et ses choix de visualisationDémarrer avec des outils simples, ne nécessitant pas de programmation ou de choix techniques
  13. 13. LES OUTILS DE VISUALISATION POUR LE WEB Choisir un niveau dabstraction plus dabstraction: •  génération directe des graphes à partir dune série de données •  plus de facilité pour les non-développeurs •  moins de souplesse niveau intermédiaire : •  des bibliothèques et frameworks qui facilitent la manipulation des données et éléments graphiques •  une gestion des concepts de base de la visualisation : o échelles, palettes de couleurs, axes peu dabstraction : •  le développeur gère totalement la manipulation des données et les éléments graphiques~$ ls -la •  contrôle total sur linterface • ~$ mkdir toto~$ sudo rm -rf / nécessite une expérience de la programmation graphique
  14. 14. JAVASCRIPT INFOVIS TOOLKITFramework Javascript dédié au WebAvantages§  Simplicité de mise en œuvre §  un fichier de données source §  un fichier de configuration§  Open Source§  Grande variété de représentationInconvénient§  Peu (ou plus) dévolutionsAdresse : http://thejit.org
  15. 15. HIGHCHARTSBibliothèque JavascriptAvantages§  Simplicité dutilisation : les données et les options daffichage sont mises dans un objet JSON.§  Grande souplesse sur laspect visuelInconvénients§  Limité aux "charts" type Excel (histogrammes, camemberts, nuages, etc.)§  Non-libre et payant pour une utilisation commercialeAdresse : http://www.highcharts.com
  16. 16. GOOGLE CHARTS APIAvantages :§  Très simple dutilisation§  Se base sur des données de type tableur§  Des graphiques interactifs (rollover)Inconvénients :§  Peu de types de graphiques§  Peu de possibilité de personnaliser laspecthttp://code.google.com/intl/fr/apis/chart/
  17. 17. GEPHIUn outil dexploration dun certain type de données, les réseaux nœuds-liens :§  réseaux informatiques§  réseaux sociaux§  réseaux d’interactions biologiques Inconvénients :§  Des possibilités dexport vers le web encore limitées§  Des graphes difficiles à lire  http://gephi.org
  18. 18. D3.JS (DATA-DRIVEN DOCUMENTS)Un paradigme fort :§  faire correspondre données et éléments du DOM (balises HTML et graphiques vectoriels SVG)§  Le "contrôleur" de la logique MVCAvantages :§  Open Source§  Très grande souplesse§  Nombreux types de graphiques§  Gestion des animationsInconvénients :§  Un paradigme parfois déroutant§  De solides bases en HTML et/ou SVG sont nécessairesAdresse : http://mbostock.github.com/d3
  19. 19. PROCESSING.JSPortage du langage Processing (basé sur Java) en javascript : un langage très utilisé pour lart numérique et linfoviz utilise html5 canvas utilise la syntaxe processing basé sur le concept de boucle de dessin communauté active encore peu mature
  20. 20. PHILOGLFramework 3D :§  repose sur JavaScript et WebGL§  orienté visualisation de données et jeux Avantages :§  Open Source§  Actifs Inconvénients :§  Usage spécifique de la 3D§  (encore) peu supporté par les navigateurshttp://www.senchalabs.org/philogl/
  21. 21. HTML 5 - CANVAS Successeur de Flash ? Avantages §  Presque aussi rapide que Flash §  Pas besoin de bibliothèque §  Format ouvert et supporté par le W3C  Inconvénients §  Les éléments graphiques ne sont pas des objets : il faut les redessiner à chaque rafraîchissement §  Rendus variables selon les navigateurs §  Pas de support IE < 9http://www.html5canvastutorials.com/
  22. 22. SVG (SCALABLE VECTOR GRAPHICS) Le "HTML du dessin vectoriel" Avantages §  Format ouvert, supporté par le W3C, fait partie de HTML 5 §  Chaque élément graphique est manipulable §  Les éléments font partie de la page §  Possibilité de les générer côté serveur §  Le graphisme peut être exporté depuis un logiciel de dessin : Illustrator ou Inkscape §  Pour les navigateurs incompatibles (IE 6-8), la bibliothèque dabstraction Raphael.js manipule le VML  Inconvénients §  Plus lent que Canvas et Flashhttp://www.w3.org/Graphics/SVG/
  23. 23. ET APRÈS ?

×