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

4fd94a50bc8f2c18fad2a07631b9d396?s=47 visualisation de données
September 27, 2017
Technology
0
39

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

4fd94a50bc8f2c18fad2a07631b9d396?s=128

visualisation de données

September 27, 2017
Tweet

Want more?

4fd94a50bc8f2c18fad2a07631b9d396?s=48 alaino
0
9
4fd94a50bc8f2c18fad2a07631b9d396?s=48 alaino
0
50
4fd94a50bc8f2c18fad2a07631b9d396?s=48 alaino
0
63
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
12
630
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
3
330
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
220
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
420
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
8
250
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
320
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
650
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
190
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
270

Transcript

  1. 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. 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. 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. 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. 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. 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. 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. 8.

    d3 : CARTOGRAPHIE + INTERACTION (2/2)

  9. 9.

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

    Data Discovery
  10. 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)
  11. 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
  12. 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