Visualisation de données

D3JS

Crée par Wijdane NOUIRA Et Chayma M'SAKNI

Plan

  1. Visualisation de données

  2. Différentes librairies

  3. Présentation de D3

  4. Environnement

  5. Points positifs

  6. Exemples d’utilisation de D3

Visualisation de données

  • Une période importante de profusion de données

  • Nous avons besoin d’informations résumées et synthétiques pour comprendre rapidement des données et pouvoir prendre des décisions pertinentes

  • Ce n’est pas seulement une manière de présenter les données mais de les explorer et de les comprendre

  • Les outils actuels
    • Outils utiles pour transformer les données en informations et en graphiques attrayants

    • Graphiques conventionnels :représentations sectorielles, histogrammes...

    • Un éventail de choix supplémentaires: les Treemap pour afficher les données hiérarchisées ou les nuages de mots des représentations géographiques

  • Un besoin d'antan
  • Déjà en 1869, Charles Joseph Minard a dessiné ce qu’on pourrait appeler une visualisation de la campagne de Russie de Napoléon de 1812.

  • Cette carte améliorée permet de répondre à un grand nombre de questions d’un seul coup d’œil.

  • Le chemin parcouru par l’armée en beige lors de la marche vers Moscou et en noir lors de la retraite.

  • Partant avec 400.000 hommes, ils n’étaient plus que 10.000 à l’arrivée.

Différentes librairies

  • Highcharts

Une très large palette de visualisations et un nombre incalculables d’options dans son API pour personnaliser les datavisualisations.
  • NVD3.js

Le plus beau :
moins complète et légèrement moins simple que Highcharts, cette librairie fait toutefois partie de ce qui se fait de mieux en termes de design et d’ergonomie.
  • Raphael/gRaphael

pour les bulles :
en matière de graphiques, la célèbre librairie n’apporte pas grand chose, sauf peut-être pour ses “dotcharts”, qui permettent par exemple de représenter un emploi du temps, ou pour l’interactivité de ses légendes

  • ArborJS

pour les réseaux :
cette librairie qui visualise puissamment et simplement les relations entre différentes entités

Présentation de D3

  • D3 est une bibliothèque de fonctions JavaScript crée par Mike Bostock, employé dans l'équipe du site Internet du New York Times.

  • D3 est une librairie JavaScript de visualisation de données qui va servir à créer des graphismes vectoriels au format SVG, à partir de données fournies directement ou en provenance d'un fichier ou d'un flux externe et d'un programme
  • Projet open-source, cette bibliothèque a connu un grand développement grâce à la participation de nombreux développeurs et testeurs.

  • On l'utilise côté client en l'appelant depuis un fichier HTML

  • Au lieu de fournir des types de graphiques précuits, D3 fourni les outils de base nécessaires à manipuler les données et les documents d’une manière efficace.

Environnement


La librairie JavaScript D3.js permet de manipuler et d’afficher des données à partir de HTML, SVG et CSS sans passer par un framework généraliste

  • D3

    • à l’instar de jQuery est une librairie JavaScript facilitant la manipulation d’un arbre DOM.

    • implémente des routines permettant de charger des données externes dont les formats JSON, XML, CSV ou texte sont nativement supportés.

    • Le développeur écrit la logique de transformation des données en éléments HTML ou SVG afin d’en avoir une représentation.
      • la représentation peut prendre la forme

        • d’un tableau (éléments HTML)

        • d’une courbe (éléments SVG)

    • Permet de produire des Documents Orientés Données

Points positifs

  • Cette librairie nous permet de ne pas avoir à gérer:

    • les disparités de moins en moins importantes entre les navigateurs.

    • de s’affranchir de solutions comme Flash :
      D3.js permet la visualisation graphique des données sur tous types de terminaux comme:

      • PC (Windows, Mac ou Linux)
      • tablettes ou
      • smartphones sous iOs ou Android.
  • la librairie D3 est importante dans le cadre de:

    • La production exponentielle de données par les systèmes informatiques: phénomène Big data

    • l’art de la représentation visuelle des données afin de leur donner du sens et de mieux les comprendre

    • la Visualisation des données ou Data visualization prend une place grandissante et ce, en proportion du volume de données produites par les systèmes d’information.

Exemples d’utilisation de D3

Tutoriel

Merci