SlideShare une entreprise Scribd logo
1  sur  23
La caisse à outils de la
            visualisation d'information




Christophe 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 d'indexation)
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
Les API

  Services Web fournissant des données
  Exemple : Infochimps




http://www.infochimps.com
"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
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é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


Adresse : 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
Visualiser les données
       sur le web
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
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
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 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/
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
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/

Contenu connexe

En vedette

Роль событийных коммуникаций в продвижении организаций
Роль событийных коммуникаций в продвижении организацийРоль событийных коммуникаций в продвижении организаций
Роль событийных коммуникаций в продвижении организацийivgujova
 
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 futurICGCat
 
Principios exp. de r. mayer
Principios exp. de r. mayerPrincipios exp. de r. mayer
Principios exp. de r. mayerGabriel_Gorey
 
JM.PASCAL - This is my way...
JM.PASCAL - This is my way...JM.PASCAL - This is my way...
JM.PASCAL - This is my way...PASCAL Jean Marie
 
Satyadeva Vrata - story in English
Satyadeva Vrata - story in EnglishSatyadeva Vrata - story in English
Satyadeva Vrata - story in EnglishIndian Servers
 
Como Deus Fala com Você
Como Deus Fala com VocêComo Deus Fala com Você
Como Deus Fala com VocêIBMemorialJC
 
Desafios do Crescimento
Desafios do CrescimentoDesafios do Crescimento
Desafios do CrescimentoIBMemorialJC
 

En vedette (10)

QR CODE MEDIA
QR CODE MEDIAQR CODE MEDIA
QR CODE MEDIA
 
Роль событийных коммуникаций в продвижении организаций
Роль событийных коммуникаций в продвижении организацийРоль событийных коммуникаций в продвижении организаций
Роль событийных коммуникаций в продвижении организаций
 
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
 
Jira as a test management tool
Jira as a test management toolJira as a test management tool
Jira as a test management tool
 
JM.PASCAL - This is my way...
JM.PASCAL - This is my way...JM.PASCAL - This is my way...
JM.PASCAL - This is my way...
 
Satyadeva Vrata - story in English
Satyadeva Vrata - story in EnglishSatyadeva Vrata - story in English
Satyadeva Vrata - story in English
 
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 à Christophe Tricot et Raphaël Velt (infoviz)

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 - 1Horacio Gonzalez
 
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/3Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSHoracio Gonzalez
 
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 JSHoracio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementHoracio Gonzalez
 
Bootcamp d'Initiation à Android - 2013/11/30
Bootcamp d'Initiation à Android  - 2013/11/30Bootcamp d'Initiation à Android  - 2013/11/30
Bootcamp d'Initiation à Android - 2013/11/30Horacio Gonzalez
 
Devoxx: Tribulation d'un développeur sur le Cloud
Devoxx: Tribulation d'un développeur sur le CloudDevoxx: Tribulation d'un développeur sur le Cloud
Devoxx: Tribulation d'un développeur sur le CloudTugdual Grall
 
GDG Rennes - Bootcamp Initiation Android - Théorie
GDG Rennes - Bootcamp Initiation Android -  ThéorieGDG Rennes - Bootcamp Initiation Android -  Théorie
GDG Rennes - Bootcamp Initiation Android - ThéorieHoracio Gonzalez
 
USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIDjamel Zouaoui
 
Webmapping - Outils OpenSource
Webmapping - Outils OpenSourceWebmapping - Outils OpenSource
Webmapping - Outils OpenSourceGHassen Aouinti
 
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Horacio Gonzalez
 
FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidementHoracio Gonzalez
 
WEB SCRAPING.pdf
WEB SCRAPING.pdfWEB SCRAPING.pdf
WEB SCRAPING.pdfAnass Nabil
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2Horacio Gonzalez
 
Html5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUGHtml5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUGJUG Toulouse
 
Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)TribuAndCo
 
Javascript & tools
Javascript & toolsJavascript & tools
Javascript & toolsSlim Soussi
 

Similaire à Christophe Tricot et Raphaël Velt (infoviz) (20)

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 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
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
 
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
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
 
Bootcamp d'Initiation à Android - 2013/11/30
Bootcamp d'Initiation à Android  - 2013/11/30Bootcamp d'Initiation à Android  - 2013/11/30
Bootcamp d'Initiation à Android - 2013/11/30
 
Devoxx: Tribulation d'un développeur sur le Cloud
Devoxx: Tribulation d'un développeur sur le CloudDevoxx: Tribulation d'un développeur sur le Cloud
Devoxx: Tribulation d'un développeur sur le Cloud
 
GDG Rennes - Bootcamp Initiation Android - Théorie
GDG Rennes - Bootcamp Initiation Android -  ThéorieGDG Rennes - Bootcamp Initiation Android -  Théorie
GDG Rennes - Bootcamp Initiation Android - Théorie
 
USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SI
 
Webmapping - Outils OpenSource
Webmapping - Outils OpenSourceWebmapping - Outils OpenSource
Webmapping - Outils OpenSource
 
Atelier initiation au html5
Atelier initiation au html5Atelier initiation au html5
Atelier initiation au html5
 
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
 
FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidement
 
WEB SCRAPING.pdf
WEB SCRAPING.pdfWEB SCRAPING.pdf
WEB SCRAPING.pdf
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
Html5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUGHtml5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUG
 
Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)
 
Javascript & tools
Javascript & toolsJavascript & tools
Javascript & tools
 

Christophe Tricot et Raphaël Velt (infoviz)

  • 1. La caisse à outils de la visualisation d'information Christophe Tricot Raphaël Velt @ctricot @raphv
  • 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/