D3 et Observable en français

Introduction à Observable

Observable est une plateforme et un environnement de travail basé sur des cellules, comparable à Jupyter, destiné à l'analyse de données et à la création de visualisations. Cette plateforme sert de dépôt en ligne permettant de mener et de partager des études. L'interface de type notebook est conçue pour manipuler des données en JavaScript. En plus de D3, la bibliothèque Observable Plot a été développée spécifiquement pour générer rapidement des graphiques lors de l'analyse exploratoire.

D3 traditionnel versus D3 avec Observable

À l'origine, les visualisations avec D3 étaient intégrées directement dans une balise <script> au sein d'un document HTML. Aujourd'hui, plusieurs environnements alternatifs permettent la création de graphiques D3, et l'utilisation d'un notebook Observable est l'une des méthodes les plus accessibles pour débuter. Néanmoins, il y a certaines différences à considérer lors de la création ou du transfert d'un graphique vers un notebook Observable.

Les cellules dans un notebook

Un notebook Observable se compose de plusieurs cellules pouvant contenir divers types de contenu : images, texte, code, etc. Chaque cellule peut être considérée comme un bloc de code ou une fonction autonome, et chaque cellule doit produire une valeur. Ainsi, les éléments d'un graphique typique peuvent être organisés différemment dans le notebook. Il est courant d'avoir une ou plusieurs cellules dédiées à la gestion des données entrantes, impliquant potentiellement un court script pour créer des données ou une cellule d'importation suivie de cellules pour nettoyer et reformater les données.

Accès aux données

Les notebooks offrent plusieurs méthodes pour importer des données, permettant ainsi flexibilité et personnalisation, bien que certaines options puissent nécessiter une configuration plus complexe. L'option la plus simple reste l'import d'un fichier Excel ou CSV local, qui peut être ajouté par glisser-déposer. Cependant, il est également possible de récupérer des données directement depuis une base de données, d'importer des données d'un autre notebook, et bien d'autres alternatives.

Syntaxe d'Observable JS

Une des principales différences entre D3 dans un fichier HTML et Observable réside dans la syntaxe utilisée. Les notebooks Observable emploient une variante de JavaScript propre à cet environnement. Par exemple, les variables déclarées au niveau supérieur ne comportent pas de mots-clés tels que const ou let. De plus, toutes les variables au niveau supérieur sont immuables par défaut.

// Déclaration d'une variable au niveau supérieur
 totalX = Math.sqrt(100);

Souvent, la définition d'un graphique se limite à une seule cellule et utilise une syntaxe similaire à celle d'une fonction JavaScript, comme illustré ci-dessous :

chart = { // Dans un notebook, la définition du graphique est enveloppée dans des accolades
  const marginTop = val; // et assignée à une variable
  const marginRight = val;
  ...

  const svg = d3.create("svg")
    .attr("viewbox", [0,0, w, h])
    ...

  svg.append("g")
    .selectAll("element")
    .data(source)
    .join("element")
      .attr("x", d => d / 2)
      ...

  return svg.node(); // La syntaxe traditionnelle ajouterait le svg à un div, ici c'est une valeur de retour
};

Conclusion et ressources

Pour plus d'informations sur les notebooks Observable, consultez leur documentation officielle.

Utilisation d'Observable pour créer un site web ou une startup

En intégrant Observable à votre boîte à outils de développement, vous pouvez rapidement visualiser et analyser vos données, rendant votre site web plus interactif et informatif. Par exemple, si vous développez une startup axée sur l'analyse de données, vous pourriez utiliser Observable pour concevoir des tableaux de bord interactifs qui affichent des statistiques en temps réel, facilitant ainsi l'interaction avec vos utilisateurs. Vous pouvez également partager vos notebooks avec votre équipe ou votre communauté pour recueillir des commentaires et encourager la collaboration.