Christophe Tricot et Raphaël Velt (infoviz)

1,995 views
1,892 views

Published on

Intervention de Christophe Tricot et Raphaël Velt du 20 janvier 2012.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,995
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Christophe Tricot et Raphaël Velt (infoviz)

  1. 1. La caisse à outils de la visualisation dinformationChristophe Tricot Raphaël Velt @ctricot @raphv
  2. 2. Collecter les données
  3. 3. Collecter les données● Utiliser 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 (robot dindexation)
  4. 4. Les données libres : OpenData● Portail 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. Les API Services Web fournissant des données Exemple : Infochimpshttp://www.infochimps.com
  7. 7. "Scraping", la récolte de données● Beaucoup dinformations sur le web● 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 site● Recréer des structures pour les données● Développer des scripts dextraction● Une ressource en ligne : XPath RegEx p
  8. 8. Enrichir les données
  9. 9. Enrichir les données● Nettoyer● Structurer● Comprendre● Lier à des métadonnées● Agréger
  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-plateformesAdresse : http://code.google.com/p/google-refine/
  12. 12. Lanalyse exploratoire des donnéesExplorer les données pour orienterle choix des traitements pluspoussés ● Connaître les tendances, évaluer les échelles et les volumes de données ● Réaliser des maquettes/prototypes avec des données réelles pour vérifier ladéquation entre ses données et ses choix de visualisation ● Démarrer avec des outils simples, ne nécessitant pas de programmation ou de choix techniques
  13. 13. Visualiser les données sur le web
  14. 14. 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 : ○ échelles, palettes de couleurs, axes peu dabstraction: ● le développeur gère totalement la manipulation des données et le éléments graphiques ● contrôle total sur linterface ● nécessite une expérience de la programmation graphique
  15. 15. JavaScript InfoVis ToolkitFramework Javascript dédié au Web ● Avantages ○ Simplicité de mise en oeuvre ■ un fichier de données source ■ un fichier de configuration ○ Open Source ○ Grande variété de représentation ● Inconvénient ○ Peu (ou plus) dévolutionsAdresse : http://thejit.org
  16. 16. HighchartsBibliothèque Javascript ● Avantages ○ Simplicité dutilisation : les données et les options daffichage sont mises dans un objet JSON. ○ Grande souplesse sur laspect visuel ● Inconvénients ○ Limité aux "charts" type Excel (histogrammes, camemberts, nuages, etc.) ○ Non-libre et payant pour une utilisation commercialeAdresse : http://www.highcharts.com
  17. 17. Google Charts API ● Avantages : ○ Très simple dutilisation ○ Se base sur des données de type tableur ○ Des graphiques tout de suite interactifs (rollover) ● Inconvénients : ○ Peu de types de graphiques ○ Peu de possibilité de personnaliser laspecthttp://code.google.com/intl/fr/apis/chart/
  18. 18. GephiUn outil dexploration dun certaintype de données, les réseauxnœuds-liens : ● réseaux informatiques ● réseaux sociaux ● réseaux d’interactions biologiquesInconvénient : ● Des possibilités dexport vers le web encore limitées ● Des graphes difficiles à lirehttp://gephi.org
  19. 19. 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 MVC ● Avantages : ○ Open Source ○ Très grande souplesse ○ Nombreux types de graphiques ○ Gestion des animations ● Inconvénients : ○ Un paradigme parfois déroutant ○ De solides bases en HTML et/ou SVG sont nécessairesAdresse : http://mbostock.github.com/d3
  20. 20. Processing.jsPortage du langage Processing (basé surJava) 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
  21. 21. PhiloGL ● Framework 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/
  22. 22. HTML 5 - CanvasSuccesseur 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/
  23. 23. 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/

×