SlideShare une entreprise Scribd logo
1  sur  27
16 Avril 2013
Narration visuelle et Interactivité
GRILLE DE LECTURE




                Enrichir les
   Collecter                   Visualiser
                 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 (robots d’indexation et de collecte)
LES DONNÉES LIBRES : OPENDATA
Portail national : http://data.gouv.fr (Etalab)
Portail spécifique: http://opendata.paris.fr
LINKING OPEN DATA
Open Data + Web Sémantique 




Exemple : DBpedia
    extraction des informations
    de Wikipedia
    + structuration
    + publication "sémantique"
 
http://dbpedia.org
“Linking Open Data cloud diagram »
                    Richard Cyganiak and Anja Jentzsch.

LINKING OPEN DATA                    http://lod-cloud.net
LES API

Services Web fournissant des données
Exemple : Infochimps




                         http://www.infochimps.com
« SCRAPPING » : LA RÉCOLTE DE DONNÉES
Beaucoup d'informations disponible sur Internet


Attention
   Des formats adaptés à l'affichage, mais pas au traitement de données
   Des formats et structures différents pour chaque site, voire pour chaque
   catégorie d'un site


Recréer des structures pour les données
Développer des scripts d'extraction



                                      XPath RegExp
                                                                             recettes
                                                                        id    titre   texte
ENRICHIR LES DONNÉES


                                 Nettoyer




       Agréger                                           Structurer



                               Données



                  Lier à des
                                            Comprendre
                 métadonnées
LES API
       Services Web pour traiter les données




http://www.programmableweb.com
GOOGLE REFINE

  "A power tool to work with messy data"
  Précédemment Freebase Gridworks
  Logiciel libre d'ETL (Extract Transform Load)
  Multi-plateformes




http://code.google.com/p/google-refine/
L'ANALYSE EXPLORATOIRE DES DONNÉES
Explorer les données pour orienter le choix des traitements plus poussé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
   l'adé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
LES OUTILS DE VISUALISATION POUR LE WEB
         Choisir un niveau d'abstraction


                 plus d'abstraction:
                   • 
                    génération directe des graphes à partir d'une 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 d'abstraction :
                   • 
                    le développeur gère totalement la manipulation des données et
                    les éléments graphiques
~$ ls -la          • 
                    contrôle total sur l'interface
                   • 
~$ mkdir toto
~$ sudo rm -
rf /
                    nécessite une expérience de la programmation graphique
JAVASCRIPT INFOVIS TOOLKIT
Framework Javascript dédié au Web


Avantages
§  Simplicité de mise en œuvre
     §  un fichier de données source
     §  un fichier de configuration
§  Open Source
§  Grande variété de représentation


Inconvénient
§  Peu (ou plus) d'évolutions



Adresse : http://thejit.org
HIGHCHARTS
Bibliothèque Javascript
Avantages
§  Simplicité d'utilisation : les données et les options d'affichage sont mises dans un
    objet JSON.
§  Grande souplesse sur l'aspect visuel
Inconvénients
§  Limité aux "charts" type Excel (histogrammes, camemberts, nuages, etc.)
§  Non-libre et payant pour une utilisation commerciale


Adresse : http://www.highcharts.com
GOOGLE CHARTS API
Avantages :
§  Très simple d'utilisation
§  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 l'aspect




http://code.google.com/intl/fr/apis/chart/
GEPHI
Un outil d'exploration d'un 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 d'export vers le web encore
    limitées
§  Des graphes difficiles à lire
 
 http://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écessaires

Adresse : http://mbostock.github.com/d3
PROCESSING.JS
Portage du langage Processing (basé sur Java) en javascript :
   un langage très utilisé pour l'art numérique et l'infoviz
   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 navigateurs

http://www.senchalabs.org/philogl/
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 < 9




http://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
         d'abstraction Raphael.js manipule le VML
      Inconvénients
     §  Plus lent que Canvas et Flash




http://www.w3.org/Graphics/SVG/
ET APRÈS ?

Contenu connexe

En vedette

Роль событийных коммуникаций в продвижении организаций
Роль событийных коммуникаций в продвижении организацийРоль событийных коммуникаций в продвижении организаций
Роль событийных коммуникаций в продвижении организаций
ivgujova
 

En vedette (16)

Group photo analysis
Group photo analysisGroup photo analysis
Group photo analysis
 
Christophe Tricot et Raphaël Velt (infoviz)
Christophe Tricot et Raphaël Velt (infoviz)Christophe Tricot et Raphaël Velt (infoviz)
Christophe Tricot et Raphaël Velt (infoviz)
 
Martes13oct
Martes13octMartes13oct
Martes13oct
 
178 recetas con café cubano
178 recetas con café cubano178 recetas con café cubano
178 recetas con café cubano
 
W3W SEASON#02 WEEK#41
W3W SEASON#02 WEEK#41W3W SEASON#02 WEEK#41
W3W SEASON#02 WEEK#41
 
Web Crawling with NodeJS
Web Crawling with NodeJSWeb Crawling with NodeJS
Web Crawling with NodeJS
 
Роль событийных коммуникаций в продвижении организаций
Роль событийных коммуникаций в продвижении организацийРоль событийных коммуникаций в продвижении организаций
Роль событийных коммуникаций в продвижении организаций
 
Historia de word
Historia de wordHistoria de word
Historia de word
 
Xarxa Utilitària de Catalunya. Estat actual i previsió de futur
Xarxa Utilitària de Catalunya. Estat actual i previsió de futurXarxa Utilitària de Catalunya. Estat actual i previsió de futur
Xarxa Utilitària de Catalunya. Estat actual i previsió de futur
 
Principios exp. de r. mayer
Principios exp. de r. mayerPrincipios exp. de r. mayer
Principios exp. de r. mayer
 
JM.PASCAL - This is my way...
JM.PASCAL - This is my way...JM.PASCAL - This is my way...
JM.PASCAL - This is my way...
 
Jira as a test management tool
Jira as a test management toolJira as a test management tool
Jira as a test management tool
 
Satyadeva Vrata - story in English
Satyadeva Vrata - story in EnglishSatyadeva Vrata - story in English
Satyadeva Vrata - story in English
 
Le b.a.-ba du web scraping
Le b.a.-ba du web scrapingLe b.a.-ba du web scraping
Le b.a.-ba du web scraping
 
Como Deus Fala com Você
Como Deus Fala com VocêComo Deus Fala com Você
Como Deus Fala com Você
 
Desafios do Crescimento
Desafios do CrescimentoDesafios do Crescimento
Desafios do Crescimento
 

Similaire à La caisse à outils de la visualisation d'informations

USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SI
Djamel Zouaoui
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
Christophe Lauer
 
OpenDataSoft -Transformez votre organisation en plateforme d'innovation
OpenDataSoft -Transformez votre organisation en plateforme d'innovationOpenDataSoft -Transformez votre organisation en plateforme d'innovation
OpenDataSoft -Transformez votre organisation en plateforme d'innovation
OpenDataSoft
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Horacio Gonzalez
 
PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0
guest4ca1b
 
Slideshare - Web 2.0
Slideshare - Web 2.0Slideshare - Web 2.0
Slideshare - Web 2.0
agirard003
 

Similaire à La caisse à outils de la visualisation d'informations (20)

USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SI
 
Neo4j
Neo4jNeo4j
Neo4j
 
SAS Forum Soft Computing Théâtre
SAS Forum Soft Computing ThéâtreSAS Forum Soft Computing Théâtre
SAS Forum Soft Computing Théâtre
 
Discovery Session France: Atelier découverte de la Data Virtualization
Discovery Session France: Atelier découverte de la Data VirtualizationDiscovery Session France: Atelier découverte de la Data Virtualization
Discovery Session France: Atelier découverte de la Data Virtualization
 
Discovery Session France: Atelier découverte de la Data Virtualization
Discovery Session France: Atelier découverte de la Data VirtualizationDiscovery Session France: Atelier découverte de la Data Virtualization
Discovery Session France: Atelier découverte de la Data Virtualization
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
 
Base de données graphe, Noe4j concepts et mise en oeuvre
Base de données graphe, Noe4j concepts et mise en oeuvreBase de données graphe, Noe4j concepts et mise en oeuvre
Base de données graphe, Noe4j concepts et mise en oeuvre
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
11 visual basic .net - acces aux donnees avec ado .net
11 visual basic .net - acces aux donnees avec ado .net11 visual basic .net - acces aux donnees avec ado .net
11 visual basic .net - acces aux donnees avec ado .net
 
Aspectize meetup
Aspectize meetupAspectize meetup
Aspectize meetup
 
La production cartographique pour les SIG version Web
La production cartographique pour les SIG version WebLa production cartographique pour les SIG version Web
La production cartographique pour les SIG version Web
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
 
OpenDataSoft -Transformez votre organisation en plateforme d'innovation
OpenDataSoft -Transformez votre organisation en plateforme d'innovationOpenDataSoft -Transformez votre organisation en plateforme d'innovation
OpenDataSoft -Transformez votre organisation en plateforme d'innovation
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
 
Google Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative CommonGoogle Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative Common
 
PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0
 
Slideshare - Web 2.0
Slideshare - Web 2.0Slideshare - Web 2.0
Slideshare - Web 2.0
 
Le Web 2.0
Le Web 2.0Le Web 2.0
Le Web 2.0
 

La caisse à outils de la visualisation d'informations

  • 1. 16 Avril 2013 Narration visuelle et Interactivité
  • 2. GRILLE DE LECTURE Enrichir les Collecter Visualiser données
  • 3.
  • 4. 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 (robots d’indexation et de collecte)
  • 5. LES DONNÉES LIBRES : OPENDATA Portail national : http://data.gouv.fr (Etalab) Portail spécifique: http://opendata.paris.fr
  • 6. LINKING OPEN DATA Open Data + Web Sémantique  Exemple : DBpedia extraction des informations de Wikipedia + structuration + publication "sémantique"   http://dbpedia.org
  • 7. “Linking Open Data cloud diagram » Richard Cyganiak and Anja Jentzsch. LINKING OPEN DATA http://lod-cloud.net
  • 8. LES API Services Web fournissant des données Exemple : Infochimps http://www.infochimps.com
  • 9. « SCRAPPING » : LA RÉCOLTE DE DONNÉES Beaucoup d'informations disponible sur Internet Attention Des formats adaptés à l'affichage, mais pas au traitement de données Des formats et structures différents pour chaque site, voire pour chaque catégorie d'un site Recréer des structures pour les données Développer des scripts d'extraction XPath RegExp recettes id titre texte
  • 10.
  • 11. ENRICHIR LES DONNÉES Nettoyer Agréger Structurer Données Lier à des Comprendre métadonnées
  • 12. LES API Services Web pour traiter les données http://www.programmableweb.com
  • 13. GOOGLE REFINE "A power tool to work with messy data" Précédemment Freebase Gridworks Logiciel libre d'ETL (Extract Transform Load) Multi-plateformes http://code.google.com/p/google-refine/
  • 14. L'ANALYSE EXPLORATOIRE DES DONNÉES Explorer les données pour orienter le choix des traitements plus poussé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 l'adé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
  • 15.
  • 16. LES OUTILS DE VISUALISATION POUR LE WEB Choisir un niveau d'abstraction plus d'abstraction: •  génération directe des graphes à partir d'une 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 d'abstraction : •  le développeur gère totalement la manipulation des données et les éléments graphiques ~$ ls -la •  contrôle total sur l'interface •  ~$ mkdir toto ~$ sudo rm - rf / nécessite une expérience de la programmation graphique
  • 17. JAVASCRIPT INFOVIS TOOLKIT Framework Javascript dédié au Web Avantages §  Simplicité de mise en œuvre §  un fichier de données source §  un fichier de configuration §  Open Source §  Grande variété de représentation Inconvénient §  Peu (ou plus) d'évolutions Adresse : http://thejit.org
  • 18. HIGHCHARTS Bibliothèque Javascript Avantages §  Simplicité d'utilisation : les données et les options d'affichage sont mises dans un objet JSON. §  Grande souplesse sur l'aspect visuel Inconvénients §  Limité aux "charts" type Excel (histogrammes, camemberts, nuages, etc.) §  Non-libre et payant pour une utilisation commerciale Adresse : http://www.highcharts.com
  • 19. GOOGLE CHARTS API Avantages : §  Très simple d'utilisation §  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 l'aspect http://code.google.com/intl/fr/apis/chart/
  • 20. GEPHI Un outil d'exploration d'un 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 d'export vers le web encore limitées §  Des graphes difficiles à lire    http://gephi.org
  • 21. 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écessaires Adresse : http://mbostock.github.com/d3
  • 22. PROCESSING.JS Portage du langage Processing (basé sur Java) en javascript : un langage très utilisé pour l'art numérique et l'infoviz utilise html5 canvas utilise la syntaxe processing basé sur le concept de boucle de dessin communauté active encore peu mature
  • 23. 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 navigateurs http://www.senchalabs.org/philogl/
  • 24. 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 < 9 http://www.html5canvastutorials.com/
  • 25. 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 d'abstraction Raphael.js manipule le VML  Inconvénients §  Plus lent que Canvas et Flash http://www.w3.org/Graphics/SVG/
  • 26.