Upgrade to Pro — share decks privately, control downloads, hide ads and more …

La librairie d3.js : le nec plus ultra pour visualiser les données sur le web?

La librairie d3.js : le nec plus ultra pour visualiser les données sur le web?

meetup visualisation de données Toulouse 26 sept 2017

visualisation de données

September 27, 2017
Tweet

More Decks by visualisation de données

Other Decks in Technology

Transcript

  1. La librairie d3.js : le nec plus ultra pour visualiser les données
    sur le web?
    Alain Ottenheimer www.datasens.fr
    Meetup Visualisation de données Toulouse – 26 Sept 2017

    View Slide

  2. Edward Tufte, The Visual Display of Quantitative Information, pages 31, 116. 1983 E.J
    Marey. La méthode graphique (Paris 1885). La méthode est attribuée à l’ingénieur francais Ibry
    War Mortality - Florence Nightingale (1855) found that Zymotic diseases (blue) >
    wounds injuries.
    UNE IMAGE VAUT MIEUX QUE MILLES MOTS
    Qu’est ce qui a changé ?
    La quantité de données et l’accès aux données, les outils de traitement et de création de graphiques, la
    puissances de calcul et surtout les moyens de communication (internet, réseaux sociaux).

    View Slide

  3. AVEC QUELS OUTILS FAIRE DES GRAPHIQUES ?
    https://source.opennews.org/en-US/articles/what-i-learned-recreating-one-chart-using-24-tools/ - Lisa Charlotte Rost
    Il n’y a pas d’outils parfaits mais juste des bons outils
    pour les personnes qui ont un certain objectif.
    o Exploration de données - Graphiques comme tests visuels,
    comparaisons (rapide à faire et à lire)
    o Explicatif – Représentation de données – résumés,
    storytelling (long à réaliser et rapide à lire)
    Un exemple de classification à partir de quelques outils
    Drag and Drop <-> code

    View Slide

  4. GRAPHIQUES POUR LE WEB (DEFINITIONS)
    o Un navigateur web est un logiciel informatique qui permet de visualiser
    les pages web fournies par un serveur.
    o Une page web est un document simple qui peut être affiché par un
    navigateur. Ce document est écrit à l'aide :
    • du « langage HTML » qui permet de mettre en forme du contenu
    • du « langage CSS » qui permet de mettre en forme les fichiers
    HTML
    • du langage JAVASCRIPT utilisé sur les pages web. le code est
    exécuté par le navigateur. Le code est intégré à la page HTML.
    L'intérêt du Javascript est d'exécuter un code sans avoir à
    recharger une nouvelle fois la page.
    o Une page HTML peut appeler des fichiers de données et des librairies
    javascript (il en existe des centaines..) et notamment des librairies
    graphiques comme d3.js (Data Document Driven) qui permet l'affichage
    de données numériques sous une forme graphique et dynamique
    Structure d’une page web
    D3.js créé en 2011 par M Bostock »



    .............

    <br/>CSS : esthétique<br/>

    HTML : contenu
    <br/>javascript : interaction<br/>


    View Slide

  5. numero_dpt nom_dpt CA VA VAdivCA
    1 Ain 3733454 1337401 36
    2 Aisne 1481264 622101 42
    3 Allier 1077386 446607 41
    4 Alpes-de-Haute-Provence 893614 328565 37
    5 Hautes-Alpes 625819 247288 40
    …. … … … …
    92 Hauts-de-Seine 4261561 1712656 40
    93 Seine-Saint-Denis 4906761 1859847 38
    94 Val-de-Marne 4342048 1693719 39
    95 Val-d'Oise 4033383 1632224 40
    d3 : SIMPLE GRAPHIQUE (BINDING)
    Open data : Entreprises artisanales en France
    https://www.data.gouv.fr/fr/datasets/artisans-nombre-d-entreprises-chiffre-d-affaires-et-valeur-ajoutee/
    lien

    View Slide

  6. numero_dpt nom_dpt CA VA VAdivCA
    1 Ain 3733454 1337401 36
    2 Aisne 1481264 622101 42
    3 Allier 1077386 446607 41
    4 Alpes-de-Haute-Provence 893614 328565 37
    5 Hautes-Alpes 625819 247288 40
    …. … … … …
    92 Hauts-de-Seine 4261561 1712656 40
    93 Seine-Saint-Denis 4906761 1859847 38
    94 Val-de-Marne 4342048 1693719 39
    95 Val-d'Oise 4033383 1632224 40
    d3 : SIMPLE GRAPHIQUE + INTERACTION
    lien

    View Slide

  7. d3 : CARTOGRAPHIE + INTERACTION (1/2)
    {"features": [{"properties": {"code_cant": "16", "insee_com": "31223", "statut":
    "Commune simple", "code_reg": "73", "nom_comm": "GOUDEX", "geom_x_y":
    [43.37900016496823, 0.95672253235213], "y_centroid": 62554, "nom_region":
    "MIDI-PYRENEES", "z_moyen": 278, "x_centroid": 5343, "code_dept": "31",
    "superficie": 262, "nom_dept": "HAUTE-GARONNE", "id_geofla": 26123,
    "population": "0.05", "y_chf_lieu": 62551, "code_comm": "223", "x_chf_lieu": 5341,
    "code_arr": "2"}, "geometry": {"coordinates": [[[0.966509300938647,
    43.37118193151432], [0.95965918117808, 43.372330875107586],
    [0.951507247771663, 43.37226686395076], [0.945204705848765,
    43.376035040243444], [0.94429130588836, 43.38088628912926],
    [0.946900205936581, 43.38522846323652], [0.963531549704915,
    43.38666754957034], [0.968799588515603, 43.37759634310168],
    [0.966509300938647, 43.37118193151432]]], "type": "Polygon"}, "type": "Feature"},
    {"properties": {"code_cant": "22", "insee_com": "31197", "statut": "Commune
    simple", "code_reg": "73", "nom_comm": "FRANQUEVIELLE", "geom_x_y":
    [43.13106049112282, 0.5341889569851989], "y_centroid": 62288, "nom_region":
    "MIDI-PYRENEES", "z_moyen": 527, "x_centroid": 4992, "code_dept": "31",
    "superficie": 1096, "nom_dept": "HAUTE-GARONNE", "id_geofla": 26140,
    "population": "0.351", "y_chf_lieu": 62295, "code_comm": "197", "x_chf_lieu": 4992,
    "code_arr": "2"}, "geometry": {"coordinates": [[[0.497789607158656,
    43.11802260021483], [0.493841800223386, 43.12663280243098],
    [0.503454583757349, ……………………………………………
    Données géographiques .json (open data)
    Carte d’Occitanie (altitude moyenne des 4565 communes et
    identification des communes de plus de 3500 habitants)
    lien

    View Slide

  8. d3 : CARTOGRAPHIE + INTERACTION (2/2)

    View Slide

  9. Des exemples d’applications par centaines …..
    https://bl.ocks.org/mbostock
    Ex : Earthquake Data Discovery

    View Slide

  10. EN RESUME
    La visualisation de données pour le web (sur la base de d3.js)
    o Des graphiques qui s’adaptent aux besoins utilisateurs (et non l’inverse !)
    o Possibilité des créer des applications légères performantes
    o Flexibilité : graphiques sur mesures, Interactivité, transition, traitement des données
    o Accessibilité : Fonctionne avec un simple navigateur – accès immédiat
    o License : Open-source. Free for all uses.
    o Nombreuses applications disponibles - Communauté très active (réutilisation de
    graphiques)
    o Transforme la communication
    o grâce à la facilité de diffusion
    o grâce à l’interaction avec les données (exploration de données, data journalisme,
    tableaux de bord dynamiques, storytelling…)
    => Une nouvelle façon d’aborder la visualisation de données
    Author driven narrative -> Viewer driven narrative
    Data Driven Document (D3)

    View Slide

  11. LA BOITE A OUTILS DE LA VISUALISATION DE DONNEES
    « Total cost of ownership »
    o Fonctionalités
    o Cout d’acquisition des licences
    o Apprentissage – formation
    o Tps de développement
    o Testabilité
    o Maintenabilité
    o Scalabilité
    o Réutilisation
    o Facilité de diffusion

    View Slide

  12. EN CONCLUSION
    La visualisation de données pour le web
    o Permet de couvrir un très large spectre de besoins de réalisations graphiques
    o Permet aux utilisateurs de questionner les données
    o Individualisation de l’information
    o Meilleure communication et appropriation de l’information
    o + de transparence
    o Suivant le besoin, elle est économiquement intéressante

    View Slide