1. 16 Avril 2013
Narration visuelle et Interactivité

2. GRILLE DE LECTURE
Enrichir les
Collecter Visualiser
données

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

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

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/

27. ET APRÈS ?