Python 和 Matplotlib：在 Jupyter Notebook 中制作交互式 3D 绘图答案

【问题标题】：Python & Matplotlib: Make 3D plot interactive in Jupyter NotebookPython 和 Matplotlib：在 Jupyter Notebook 中制作交互式 3D 绘图
【发布时间】：2016-11-16 19:03:46
【问题描述】：

我使用 Jupyter Notebook 来分析数据集。笔记本里有很多地块，其中一些是3d地块。

我想知道是否可以使 3d 绘图交互，以便我以后可以更详细地使用它？

也许我们可以在上面添加一个按钮？点击它可以弹出一个3d图，人们可以缩放、平移、旋转等。

我的想法：

1。 matplotlib, %qt

这不适合我的情况，因为我需要在 3d 绘图之后继续绘图。 %qt 会干扰后面的剧情。

2。 mpld3

mpld3 在我的情况下几乎是理想的，无需重写任何东西，与 matplotlib 兼容。但是，它只支持 2D 绘图。而且我没有看到任何关于 3D 的计划 (https://github.com/mpld3/mpld3/issues/223)。

3。散景 + visjs

在bokeh 画廊中没有找到任何实际的 3d 绘图示例。我只找到https://demo.bokeh.org/surface3d，它使用visjs。

4。 Javascript 3D 绘图？

由于我需要的只是线条和表面，是否可以在浏览器中使用 js 将数据传递给 js plot 以使其具有交互性？（那么我们可能还需要添加 3d 轴。）这可能类似于 visjs 和 mpld3。

【问题讨论】：

见stackoverflow.com/a/33440743/1204331尝试：%matplotlib notebook
@eldad-a 刚试了一下，好像不错。是否可以在一个 jupyter notebook 中混合使用 inline 和 notebook？
我不知道如果你只使用notebook会错过什么；只需将评论重写为答案，以便其他人更容易找到。
产生那些好看的绿色的代码是什么？
@CMCDragonkai 我用 viridis 做彩色图

标签： python matplotlib jupyter-notebook

【解决方案1】：

试试：

%matplotlib notebook

见jakevdp回复 here

为 JupyterLab 用户编辑：

关注instructions安装jupyter-matplotlib

那么上面的魔术命令就不再需要了，如示例：

# 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()

最后，请注意 Maarten Breddels 的reply；恕我直言ipyvolume 确实令人印象深刻（而且很有用！）。

【讨论】：

因为我正在制作大量的情节（请参阅cdn.rawgit.com/cqcn1991/Wind-Speed-Analysis/master/output_HTML/…）
抱歉，我仍然没有看到问题。你试过用notebook 运行它吗？
1.我在笔记本中同时使用 2d 和 3d 绘图。如何在%matplotlib notebook 和%matplotlib inline 之间切换 2. 我的笔记本需要很长时间才能运行（5 分钟）。使用%matplotlib notebook 将在所有单元格完成后渲染图像，而不是在一个单元格完成后。
无法真正帮助您提供有价值的信息（我没有在这个级别玩过它）。从外观和感觉来看：inline 嵌入了一个自动生成的静态 png，而notebook 让您可以像 matplotlib 一样摆弄图像，直到您点击“关闭”按钮并切换到静态图像。我会搜索一个自动“关闭”命令，该命令将放置在您不需要交互模式的无花果中。不知道现阶段有没有实现。

【解决方案2】：

有一个名为ipyvolume 的新库可以满足您的需求，the documentation shows live demos。当前版本不做网格和线，但来自 git repo 的 master 做（版本 0.4 也是如此）。（免责声明：我是作者）

【讨论】：

不错的图书馆！使用它瞧

【解决方案3】：

您可以使用Plotly 库。它可以直接在 Jupyter Notebooks 中渲染交互式 3D 绘图。

为此，您首先需要通过运行安装 Plotly：

pip install plotly

您可能还想通过运行以下命令来升级库：

pip install plotly --upgrade

在你的 Jupyter Notebook 之后，你可能会写如下内容：

# Import dependencies
import plotly
import plotly.graph_objs as go

# Configure Plotly to be rendered inline in the notebook.
plotly.offline.init_notebook_mode()

# Configure the trace.
trace = go.Scatter3d(
    x=[1, 2, 3],  # <-- Put your data instead
    y=[4, 5, 6],  # <-- Put your data instead
    z=[7, 8, 9],  # <-- Put your data instead
    mode='markers',
    marker={
        'size': 10,
        'opacity': 0.8,
    }
)

# Configure the layout.
layout = go.Layout(
    margin={'l': 0, 'r': 0, 'b': 0, 't': 0}
)

data = [trace]

plot_figure = go.Figure(data=data, layout=layout)

# Render the plot.
plotly.offline.iplot(plot_figure)

因此，将在 Jupyter Notebook 中为您绘制以下图表，您将能够与之交互。当然，您需要提供您的具体数据，而不是建议的数据。

【讨论】：

【解决方案4】：

Plotly 不在此列表中。我已经链接了 python 绑定页面。它绝对具有动画和交互式 3D 图表。而且由于它是开源的，其中大部分都可以离线使用。当然它正在与 Jupyter 一起工作

【讨论】：

Plotly 不是我最喜欢的任何维度的绘图方式，但它确实值得在这里占有一席之地，因为一旦你知道如何使用它，它就会非常强大。我不知道为什么这被否决了。为了清楚起见 - Plotly 有一个离线模式，您可以像使用任何其他绘图库一样使用它。 IE。无需向 Plotly 服务器上传任何内容。

【解决方案5】：

我想出的一个解决方案是在 iframe 中使用 vis.js 实例。这显示了笔记本中的交互式 3D 绘图，该绘图在 nbviewer 中仍然有效。 visjs代码借鉴了3D图上的示例代码page

一个小笔记本来说明这一点：demo

代码本身：

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

【讨论】：

【解决方案6】：

对于 3-D 可视化，pythreejs 可能是笔记本电脑中的最佳方式。它利用 notebook 的交互式小部件基础设施，因此 JS 和 python 之间的连接是无缝的。

一个更高级的库是bqplot，它是用于 iPython 笔记本的基于 d3 的交互式可视化库，但它只做 2D

【讨论】：