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
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).
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
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 »
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)
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
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
alaino
kenta_hi
linedevth
lmt_swallow
nakasho
konifar
autifyhq
colopl
.png){kind=icon}
pharma_x_tech
mploed
ewolff
cheng_wei_chen
ytaisei
marktimemedia
ammeep
sonatard
palkan
dougneiner
rmw
jponch
sstephenson
csswizardry
edds
productmarketing
deanohume