Python et Matplotlib : Rendre un graphique 3D interactif dans Jupyter Notebook

Question

J'utilise Jupyter Notebook pour analyser des ensembles de données. Il y a beaucoup de graphiques dans le notebook, et certains d'entre eux sont des graphiques en 3D.

Je me demande s'il est possible de rendre le tracé en 3D interactif, afin de pouvoir ensuite jouer avec plus de détails ?

On peut peut-être y ajouter un bouton ? En cliquant dessus, on pourrait faire apparaître un tracé en 3D et les gens pourraient zoomer, faire des panoramiques, des rotations, etc.

---

Mes réflexions :

1. matplotlib, %qt

Cela ne convient pas à mon cas, car j'ai besoin de poursuivre le tracé après le tracé 3d. %qt va interférer avec les parcelles ultérieures.

2. mpld3

mpld3 est presque idéal dans mon cas, pas besoin de réécrire quoi que ce soit, compatible avec matplotlib. Cependant, il ne supporte que le tracé 2D. Et je n'ai vu aucun plan travaillant sur la 3D ( https://github.com/mpld3/mpld3/issues/223 ).

3. bokeh + visjs

Je n'ai pas trouvé d'exemple concret de tracé 3d dans la base de données de l'UE. bokeh galerie. Je ne trouve que https://demo.bokeh.org/surface3d qui utilise visjs .

4. Tracé 3D en Javascript ?

Puisque ce dont j'ai besoin n'est qu'une ligne et une surface, est-il possible de passer les données à js plot en utilisant js dans le navigateur pour le rendre interactif ? (Nous pourrions alors avoir besoin d'ajouter des axes 3D). visjs y mpld3 .

Answer 1

Essayez :

%matplotlib notebook

voir jakevdp réponse aquí

EDIT pour les utilisateurs de JupyterLab :

Suivez les instructions pour installer jupyter-matplotlib

La commande magique ci-dessus n'est alors plus nécessaire, comme dans l'exemple :

# Enabling the `widget` backend.
# This requires jupyter-matplotlib a.k.a. ipympl.
# ipympl can be install via pip or conda.
%matplotlib widget
# aka import ipympl

import matplotlib.pyplot as plt

plt.plot([0, 1, 2, 2])
plt.show()

Enfin, notons que l'article de Maarten Breddels réponse ; IMHO ipyvolume est en effet très impressionnant (et utile !).

Answer 2

Il existe une nouvelle bibliothèque appelée ipyvolume qui peut faire ce que vous voulez, la documentation présente des démonstrations en direct . La version actuelle ne fait pas les mailles et les lignes, mais la version master du dépôt git le fait (tout comme la version 0.4). (Disclaimer : Je suis l'auteur)

Answer 3

Plotly est manquant dans cette liste. J'ai mis un lien vers la page de liaison python. Il a définitivement des graphiques 3D animés et interactifs. Et comme il s'agit d'un logiciel libre, la plupart de ces éléments sont disponibles hors ligne. Bien sûr, il fonctionne avec Jupyter.

Answer 4

Une solution que j'ai trouvée consiste à utiliser une vis.js dans une iframe. Cela montre un tracé 3D interactif à l'intérieur d'un carnet de notes, qui fonctionne toujours en nbviewer . Le code visjs est emprunté au code d'exemple sur le graphique 3D page

Un petit carnet de notes pour illustrer cela : Démonstration

Le code lui-même :

from IPython.core.display import display, HTML
import json

def plot3D(X, Y, Z, height=600, xlabel = "X", ylabel = "Y", zlabel = "Z", initialCamera = None):

    options = {
        "width": "100%",
        "style": "surface",
        "showPerspective": True,
        "showGrid": True,
        "showShadow": False,
        "keepAspectRatio": True,
        "height": str(height) + "px"
    }

    if initialCamera:
        options["cameraPosition"] = initialCamera

    data = [ {"x": X[y,x], "y": Y[y,x], "z": Z[y,x]} for y in range(X.shape[0]) for x in range(X.shape[1]) ]
    visCode = r"""
       <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" type="text/css" rel="stylesheet" />
       <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
       <div id="pos" style="top:0px;left:0px;position:absolute;"></div>
       <div id="visualization"></div>
       <script type="text/javascript">
        var data = new vis.DataSet();
        data.add(""" + json.dumps(data) + """);
        var options = """ + json.dumps(options) + """;
        var container = document.getElementById("visualization");
        var graph3d = new vis.Graph3d(container, data, options);
        graph3d.on("cameraPositionChange", function(evt)
        {
            elem = document.getElementById("pos");
            elem.innerHTML = "H: " + evt.horizontal + "<br>V: " + evt.vertical + "<br>D: " + evt.distance;
        });
       </script>
    """
    htmlCode = "<iframe srcdoc='"+visCode+"' width='100%' height='" + str(height) + "px' style='border:0;' scrolling='no'> </iframe>"
    display(HTML(htmlCode))

Answer 5

Pour la visualisation en 3-D pythreejs est probablement la meilleure façon de procéder dans le bloc-notes. Il exploite l'infrastructure de widgets interactifs du notebook, de sorte que la connexion entre JS et python est transparente.

Une bibliothèque plus avancée est bqplot qui est une bibliothèque de visualisation interactive basée sur d3 pour le bloc-notes iPython, mais elle ne fait que du 2D.