Einführung

Mit jupyter notebook ist eine Reihe von Abläufen von der Datenanalyse zur Visualisierung nur mit Python möglich. Wenn Sie jedoch die hohe Ausdruckskraft und Interaktivität von D3.js betrachten, erfolgt die Visualisierung mit JavaScript. Ich denke, es wird viele Fälle geben. Daher möchte ich vorstellen, wie die Daten in Python vorbereitet und an JavaScript übergeben werden.

In der folgenden Erklärung verwenden wir ein Paket namens py_d3, das D3.js-Code auf einem Jupyter-Notebook ausführt und anzeigt, aber nicht auf D3.js beschränkt ist. JavaScript kann ausgeführt werden. [^ 1]

Einrichtung von py_d3

pip install py_d3

Sie können es mit installieren. Um die Funktion zu verwenden, schreiben Sie am Anfang des Notizbuchs wie folgt.

%load_ext py_d3

Wenn Sie dann am Anfang der Zelle "%% d3" schreiben, wird der Code in dieser Zelle als HTML und JavaScript interpretiert.

Weitere Informationen finden Sie in diesem Artikel. [^ 2]

Vorbereitung

Die Zusammenarbeit verwendet die Funktion des IPython.display.HTML-Pakets, ist jedoch schwierig zu verwenden. Daher werde ich die folgende JavaScript-Funktion definieren und umbrechen. Führen Sie es in der Zelle unmittelbar nach `` `% load_ext py_d3``` aus. Es ist gut, sich in Snippets usw. zu registrieren.

%%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>

Zusammenarbeit

Übergeben Sie den Python-Code, der als Zeichenfolge ausgeführt werden soll, an die obige Pyexec-Funktion. Auf der Python-Seite geben Sie bitte den Wert im JSON-Format zurück.

Definieren Sie beispielsweise die Funktion auf der Python-Seite wie folgt.

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

Die JavaScript-Seite wird wie folgt beschrieben. Beschreiben Sie die Verarbeitung, die nach dem Empfang der Daten in und nach pyexec ausgeführt werden soll. Dieses Mal führe ich ein einfaches Beispiel aus dem D3.js-Tutorial aus.

%%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>

Dann wird das folgende Diagramm auf das Notizbuch gezeichnet.

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

Ich werde das diesmal erstellte Notizbuch veröffentlichen → http://nbviewer.jupyter.org/gist/ssugiyama/29b586b25dc63730eb67ee6c1daefac8

Referenz

Fußnote

[^ 1]: Es ist möglich, eine Verknüpfung mit dem Standardpaket IPython.display.HTML herzustellen, ohne py_d3 zu verwenden. Da jedoch JavaScript- und HTML-Code in die Zeichenfolge geschrieben werden muss und das Escapezeichen problematisch ist, befindet es sich in der Zelle. Wir empfehlen py_d3, mit dem Sie JavaScript und HTML direkt schreiben können.

[^ 2]: Die Methode zum Laden von py_d3 wurde jedoch gegenüber der Beschreibung in diesem Artikel geändert. Verwenden Sie daher bitte "% load_ext py_d3".