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
  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).
  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
  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 » <!DOCTYPE html> <html> <head> <title>.............</title> </head> <style> CSS : esthétique </style> <body> HTML : contenu <script> javascript : interaction </script> </body> </html>
  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
  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
  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
  8. 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)
  9. 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
  10. 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