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 d'indexation)
4. Les données libres : OpenData
● Portail national : http://data.gouv.fr (Etalab)
● Portail spécifique: http://opendata.paris.fr
5. Linking Open Data
Open Data + Web Sémantique
● Exemple : DBpedia
○ extraction des informations de Wikipedia
○ + structuration
○ + publication "sémantique"
● http://dbpedia.org
6. Les API
Services Web fournissant des données
Exemple : Infochimps
http://www.infochimps.com
7. "Scraping", la récolte de données
● Beaucoup d'informations sur le web
● 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
● Une ressource en ligne :
XPath RegEx
p
9. Enrichir les données
● Nettoyer
● Structurer
● Comprendre
● Lier à des métadonnées
● Agréger
10. Les API
Services Web pour traiter les données
http://www.programmableweb.com
11. Google Refine
● "A power tool to work with messy data"
● Précédemment Freebase Gridworks
● Logiciel libre d'ETL (Extract Transform Load)
● Multi-plateformes
Adresse : http://code.google.com/p/google-refine/
12. 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
14. 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 :
○ échelles, palettes de couleurs, axes
peu d'abstraction:
● le développeur gère totalement la manipulation des données et le
éléments graphiques
● contrôle total sur l'interface
● nécessite une expérience de la programmation graphique
15. JavaScript InfoVis Toolkit
Framework 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'évolutions
Adresse : http://thejit.org
16. 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
17. Google Charts API
● Avantages :
○ Très simple d'utilisation
○ 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 l'aspect
http://code.google.
com/intl/fr/apis/chart/
18. 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énient :
● Des possibilités d'export vers le
web encore limitées
● Des graphes difficiles à lire
http://gephi.org
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écessaires
Adresse : http://mbostock.github.com/d3
20. 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
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
navigateurs
http://www.senchalabs.org/philogl/
22. 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/
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 d'abstraction Raphael.js
manipule le VML
● Inconvénients
○ Plus lent que Canvas et Flash
http://www.w3.org/Graphics/SVG/