iPython/Jupyter Notebook：如何使用 Desmos API 嵌入交互式图形？答案

【问题标题】：iPython/Jupyter Notebook: How to Embed Interactive Graph Using Desmos API?iPython/Jupyter Notebook：如何使用 Desmos API 嵌入交互式图形？
【发布时间】：2016-02-24 22:04:24
【问题描述】：

我最近从使用纸笔系统为我的微积分 II 课程记笔记转为使用 Jupyter（以前称为 iPython）笔记本。有什么不同！

无论如何，作为一个通过视觉演示学得最好的人，我真的很想在我的笔记本中嵌入一些交互式Desmos 图表（对于不熟悉 Desmos 的任何人来说，它是一个非常强大但又易于-使用基于网络的图形计算器）。

不幸的是，iPython/Jupyter notebook security model 阻止了嵌入在 Markdown 单元格中的 JavaScript 的执行。 HTML Sanitization 库（我相信是Google Caja）会去除您放入 Markdown 单元格的所有 HTML 标记和 JavaScript 代码。

根据note in the security model docs，计划支持某种机制，以允许 HTML/CSS 用于笔记本主题。但该注释没有提及 JavaScript 支持。

我意识到跨站点脚本是一个严重的问题，而且很难防御，但是真的没有办法放松对笔记本作者的安全限制吗？也许在未来可能会为笔记本元数据添加一个配置选项（可以在笔记本会话中进行编辑）以指定允许的标签列表。

与此同时，有没有人知道使用 JavaScript 在笔记本的 Markdown 单元格中嵌入来自第三方 API 的输出的变通方法、hack 或其他方法？

如果要在 Python 单元格中使用 Python 打印适当的 HTML 和 JavaScript 代码，会避免这些限制吗？也许我应该为 Desmos API 编写一个 Python 包装器......

【问题讨论】：

标签： javascript python ipython ipython-notebook jupyter

【解决方案1】：

我认为有几种方法可以做到

使用iframe
使用原始html显示，可能需要你写一些包装器首先使其可重用
使用一些 3 方库：mpld3、plot.js，这是一个 list
使用其他类型的 3 方库：IPython-Dashboard

【讨论】：

【解决方案2】：

您始终可以使用来自 IPython 小部件的交互

from IPython.html.widgets import *
import numpy as np
import matplotlib.pyplot as plt
import math

def linear(w,x,b):
    return w*x + b

def logistic(z):
    return 1/(1+math.e**(-z))

def plt_logistic(a, b):
    x = np.linspace(-20,20, 100)
    h = linear(a,x,b)
    y = logistic(h)
    plt.ylim(-5,5)
    plt.xlim(-5,5)
    plt.plot(x,h)
    plt.plot(x,y)
    plt.grid()
    plt.show()

interact(plt_logistic, a = (-10,10,0.1), b = (-10,10,0.1))

【讨论】：

【解决方案3】：

以下是如何使用 jp_proxy 小部件将 Desmos 嵌入 Jupyter：

请看https://github.com/AaronWatters/jp_proxy_widget -- 此代码基于快速入门示例：https://www.desmos.com/api/v1.2/docs/index.html

【讨论】：