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

Question

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

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

不幸的是，iPython/Jupyter notebook security model prevents the execution of JavaScript embedded in Markdown cells. The HTML Sanitization library (Google Caja，我相信）会删除任何 HTML 标签和 JavaScript 您放入 Markdown 单元格中的代码。

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

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

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

如果要在 Python 单元格中使用 Python 打印适当的 HTML 和 JavaScript 代码，是否可以避免这些限制？也许我应该为 Desmos API...

写一个 Python 包装器

Answer 1

我觉得有几种方法可以做到

使用iframe
使用原始html显示，这可能需要你写首先使用一些包装器使其可重用
使用一些 3 方库：mpld3，plot.js，这里是 list
使用其他类型的 3 方库：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

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

iPython/Jupyter Notebook: How to Embed Interactive Graph Using Desmos API?

javascript

python

ipython

ipython-notebook

jupyter