Comment intégrer ("embed") une visualisation créé avec un notebook d'observable d3.js dans un site web ?

Active March 22, 2022    /    Viewed 54    /    Comments 0    /    Edit


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)

Comment intégrer ("embed") une visualisation créé avec un notebook d'observable d3.js dans un site web ?

et copiez alors le code fourni dans la fenêtre:

Comment intégrer ("embed") une visualisation créé avec un notebook d'observable d3.js dans un site web ?

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 :

Comment intégrer ("embed") une visualisation créé avec un notebook d'observable d3.js dans un site web ?

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) :

Comment intégrer ("embed") une visualisation créé avec un notebook d'observable d3.js dans un site web ?

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 :

Comment intégrer ("embed") une visualisation créé avec un notebook d'observable d3.js dans un site web ?

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)

Comment intégrer ("embed") une visualisation créé avec un notebook d'observable d3.js dans un site web ?

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)

Comment intégrer ("embed") une visualisation créé avec un notebook d'observable d3.js dans un site web ?

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:

Comment intégrer ("embed") une visualisation créé avec un notebook d'observable d3.js dans un site web ?

Remarque : pour déboguer le code, une solution consiste à utiliser chrome : Affichage -> Développeur -> Outils de développement.

Références


Card image cap
profile-image
Bazinga

Salut, je suis Ben.

J'ai développé ce site web à partir de zéro avec Django pour partager avec tout le monde mes notes. Si vous avez des idées ou des suggestions pour améliorer le site, faites le moi savoir ! (vous pouvez me contacter via le formulaire de la page d'accueil). Merci!



Did you find this content useful ?, If so, please consider donating a tip to the author(s). MoonBooks.org is visited by millions of people each year and it will help us to maintain our servers and create new contents.

Amount