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.