Your SlideShare is downloading. ×
La caisse à outils de la visualisation d'informations
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

La caisse à outils de la visualisation d'informations

887
views

Published on

Published in: Design

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
887
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 16 Avril 2013Narration visuelle et Interactivité
  • 2. GRILLE DE LECTURE Enrichir les Collecter Visualiser données
  • 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. LES DONNÉES LIBRES : OPENDATAPortail national : http://data.gouv.fr (Etalab)Portail spécifique: http://opendata.paris.fr
  • 5. LINKING OPEN DATAOpen Data + Web Sémantique Exemple : DBpedia extraction des informations de Wikipedia + structuration + publication "sémantique" http://dbpedia.org
  • 6. “Linking Open Data cloud diagram » Richard Cyganiak and Anja Jentzsch.LINKING OPEN DATA http://lod-cloud.net
  • 7. LES APIServices Web fournissant des donnéesExemple : Infochimps http://www.infochimps.com
  • 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. ENRICHIR LES DONNÉES Nettoyer Agréger Structurer Données Lier à des Comprendre métadonnées
  • 10. LES API Services Web pour traiter les donnéeshttp://www.programmableweb.com
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ET APRÈS ?