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

Question

我最近已经从使用笔纸系统的Calculus II课程笔记切换到使用Jupyter（以前称为iPython）笔记本。有什么区别！

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

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

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

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

与此同时，是否有人知道使用笔记本中Markdown单元格中的JavaScript嵌入第三方API输出的解决方法，黑客攻击或其他方法？

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

Answer 1

我认为有几种方法可以实现

• 使用iframe
• 使用原始html显示，可能需要先编写一些包装器才能使其可重用
• 使用一些3方lib：mpld3，plot.js，这里是list
• 使用其他类型的3方lib：IPython-Dashboard

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

Answer 3

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

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