Au début, j'étais un peu inquiet à l'idée d'utiliser d3 pour créer des outils d'analyse de données car je ne connait pas très bien le language javascript, mais l'investissement en temps en vaut vraiment la peine.
Ainsi, après avoir créé une visualisation simple à l'aide du bloc-notes observable d3 (Data Driven Decisions), j'ai voulu tester comment l'intégrer dans une simple page HTML :
Option 1: intégrer une ou plusieurs cellules d'un d3 observable notebook
Considérons le bloc-notes Observable suivant Bar Chart Transitions. Pour intégrer le graphique par exemple une solution est d'aller sur la cellule du graphique et de cliquer sur les 3 points verticaux sur le côté gauche (voir image ci-dessous)
et copiez alors le code fourni dans la fenêtre:
Ensuite vous pouvez créer sur votre machine locale par exemple un fichier 'test.html' et insérer le code fourni :
<!DOCTYPE html><html lang="en"><head><title>D3 Observable Testing</title></head><body><iframe width="100%" height="584" frameborder="0"src="https://observablehq.com/embed/@d3/bar-chart-transitions?cells=chart"></iframe></body></html>
si vous ouvrez maintenant le fichier html avec un navigateur web (chrome par exemple), vous devriez obtenir quelque chose comme l'image suivante :
Notez qu'en bas, il y a des liens vers le site Web Observable et vers le bloc-notes (les liens du bas ne peuvent pas être supprimés).
Il est également possible d'intégrer plusieurs cellules. Par exemple le graphique et le bouton de sélection (après avoir cliqué sur les 3 points, sélectionnez les cellules que vous souhaitez afficher : "chart" et "viewof order" ici) :
Puis copiez et collez le code :
<!DOCTYPE html><html lang="en"><head><title>D3 Observable Testing</title></head><body><iframe width="100%" height="627" frameborder="0"src="https://observablehq.com/embed/@d3/bar-chart-transitions?cells=chart%2Cviewof+order"></iframe></body></html>
Nous avons maintenant le graphique + le bouton de sélection en haut :
L'intégration d'une cellule est une option très simple et rapide si vous souhaitez partager une visualisation d3. Vous pouvez par exemple créer une présentation assez sympa en utilisant revealjs (un framework de présentation HTML open source) et y inclure une visualisation d3.
Option 2: télécharger le code
Une autre option consiste à effectuer une intégration plus avancée (voir Observable Examples et Advanced Embedding and Downloading).
Pour cela, il suffit de télécharger le notebook en cliquant (voir image ci-dessous)
puis décompressez le fichier, allez sous le dossier appelé "bar-chart-transitions" ici et ouvrez le fichier index.html avec un éditeur de texte. Vous devriez obtenir:
<!DOCTYPE html><meta charset="utf-8"><title>Bar Chart Transitions</title><link rel="stylesheet" type="text/css" href="./inspector.css"><body><script type="module">import define from "./index.js";import {Runtime, Library, Inspector} from "./runtime.js";const runtime = new Runtime();const main = runtime.module(define, Inspector.into(document.body));</script>
Pour tester le code une solution est d'utiliser par exemple python, il suffit d'entrer
python -m http.server 8001
dans le terminal.
Ensuite, ouvrez un navigateur Web et entrez l'url suivante "http://127.0.0.1:8001/" (Notez dans l'image ci-dessous que j'ai utilisé le port 8009 au lieu de 8001 mais cela n'a pas d'importance)
vous pouvez voir que toutes les cellules du bloc-notes ont été affichées ici. Mais que se passe-t-il si nous ne voulons montrer que certaines cellules ?. Ensuite, vous devez mettre à jour le fichier index.html. Par exemple, montrons uniquement "chart" et "viewof order":
<!DOCTYPE html><meta charset="utf-8"><title>Bar Chart Transitions</title><link rel="stylesheet" type="text/css" href="./inspector.css"><div name="viewof order"></div><div name="chart"></div><script type="module">import define from "./index.js";import {Runtime, Library, Inspector} from "./runtime.js";const runtime = new Runtime();const main = runtime.module(define, name => {if (["chart", "viewof order"].includes(name)) {return new Inspector(document.querySelector(`[name='${name}']`));};if (name === "update") return true;});</script>
Remarque : ici, la cellule appelée "update" doit également être exécutée (la cellule est exécutée mais pas affichée)
Résultats:
Remarque : pour déboguer le code, une solution consiste à utiliser chrome : Affichage -> Développeur -> Outils de développement.
