• Save
Christophe Tricot et Raphaël Velt (infoviz)
Upcoming SlideShare
Loading in...5
×
 

Christophe Tricot et Raphaël Velt (infoviz)

on

  • 1,719 views

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

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

Statistics

Views

Total Views
1,719
Views on SlideShare
1,717
Embed Views
2

Actions

Likes
4
Downloads
0
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Christophe Tricot et Raphaël Velt (infoviz) Christophe Tricot et Raphaël Velt (infoviz) Presentation Transcript

  • La caisse à outils de la visualisation dinformationChristophe Tricot Raphaël Velt @ctricot @raphv
  • Collecter les données
  • 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)
  • Les données libres : OpenData● Portail 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 ○ + structuration ○ + publication "sémantique" ● http://dbpedia.org
  • Les API Services Web fournissant des données Exemple : Infochimpshttp://www.infochimps.com
  • "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
  • Enrichir les données
  • Enrichir les données● Nettoyer● Structurer● Comprendre● Lier à des métadonnées● Agréger
  • 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 Transform Load) ● Multi-plateformesAdresse : http://code.google.com/p/google-refine/
  • 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
  • Visualiser les données sur le web
  • 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
  • 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
  • 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
  • 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/
  • 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
  • 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
  • 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
  • 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/
  • 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/
  • 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/