introduction

Avec jupyter notebook, une série de flux allant de l'analyse des données à la visualisation est possible avec seulement python, mais si vous regardez l'expressivité et l'interactivité élevées de D3.js, la visualisation se fait avec JavaScript. Je pense qu'il y aura de nombreux cas. Par conséquent, je voudrais vous présenter comment préparer les données en python et les transmettre à JavaScript.

Dans l'explication suivante, nous utiliserons un package appelé py_d3 qui exécute et affiche le code de D3.js sur le notebook jupyter, mais il n'est pas limité à D3.js et est arbitraire. JavaScript peut être exécuté. [^ 1]

Configuration de py_d3

pip install py_d3

Vous pouvez l'installer avec. Pour utiliser la fonction, écrivez comme suit au début du cahier.

%load_ext py_d3

Ensuite, si vous écrivez «%% d3» au début de la cellule, le code de cette cellule sera interprété comme HTML et JavaScript.

Pour plus de détails, veuillez consulter cet article. [^ 2]

Préparation

La coopération utilise la fonction du package IPython.display.HTML, mais il est difficile à utiliser tel quel, donc je vais définir la fonction JavaScript suivante et l'envelopper. Exécutez-le dans la cellule immédiatement après % load_ext py_d3```. Il est bon de s'inscrire dans des extraits de code, etc.

%%d3
<script>
function pyexec(command) {
    return new Promise(res => {
        IPython.notebook.kernel.execute(command,
            {iopub: {
                output: 
                    out => res(JSON.parse(eval(out.content.data["text/plain"])))
            }}, 
            {silent: false});
    });
}
</script>

La coopération

Passez le code python à exécuter sous forme de chaîne à la fonction pyexec ci-dessus. Du côté python, veuillez renvoyer la valeur au format json.

Par exemple, définissez la fonction côté python comme suit.

import json
import numpy as np
def get_data(count):
    return json.dumps((np.random.rand(count)*10).tolist())

Le côté JavaScript est décrit comme suit. Décrivez le traitement à effectuer après réception des données puis après pyexec. Cette fois, j'exécute un exemple simple du didacticiel D3.js.

%%d3
<g></g>
<style>
element {
    height: 25px;
}
div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;
    margin-right: 2px;
    background-color: teal;
}
</style>

<script>
pyexec("get_data(7)")
.then(dataset => {
    d3.select("g").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("height", function(d) {
        let barHeight = d * 5;
        return barHeight + "px";
    });
});
</script>

Ensuite, le graphique suivant sera dessiné sur le cahier.

スクリーンショット 2017-06-12 18.46.40.png

Je publierai le notebook créé cette fois → http://nbviewer.jupyter.org/gist/ssugiyama/29b586b25dc63730eb67ee6c1daefac8

référence

note de bas de page

[^ 1]: Il est possible de créer un lien avec le package standard IPython.display.HTML sans utiliser py_d3, mais comme il est nécessaire d'écrire du code JavaScript et HTML dans la chaîne de caractères et que l'échappement est gênant, c'est dans la cellule. Nous recommandons py_d3, qui vous permet d'écrire directement du JavaScript et du HTML.

[^ 2]: Cependant, la méthode de chargement de py_d3 a été modifiée par rapport à la description de cet article, veuillez donc utiliser % load_ext py_d3.