Python用户浏览器中的动态科学可视化

作为一名科学家，与数据进行交互使您可以获得新的洞察您正在学习的现象。如果您阅读纽约时报，D3文档或浏览蒸馏，您将看到令人印象深刻的基于浏览器的可视化 - 交互式讲故事，不仅准确地代表数据，而且引起您的注意事项。您的工作良好的可视化可以将您的研究的可访问性提高到广泛的受众。我最喜欢的例子（已经几岁了）是来自詹姆斯高，亚历克斯霍伊，杰克勇敢和船员的大脑的语义地图 - 当时，在浏览器中可视化脑地图数据是闻所未闻的，这里是一种可视化语义如何映射到不同的大脑区域，在浏览器中，无需下载。

来自Python World，大多数可视化您的日常依据与这些依据非常不同：静态图，因为这是在Matplotlib中制作的方便。你怎么能从静音地块的Python世界到JavaScript的巫术？

你遇到的大墙是现代的网络发展很大。熟练掌握很难：在你建立有趣之前，很容易被沮丧和脱落马车。我在这里组装的是一种路线图，以便您可以在构建自我加强技能集的同时开始使用最低障碍的屏障进行有趣的动态可视化。

最后，在本文的末尾，我涵盖了JS库，您可能希望学会用于绘制或数字工作。我在去年的经验中建立了这一点，试验了大约一半的交互式可视化方法;当然，如果你知道更好的课程，书籍或教程，请告诉我在评论中。

您的第一个选项是通过利用基于Python的生成器来说根本没有代码网站。有些工具在Python完全留下了有限的交互性。这些工具在过去几年中看到了爆炸性增长。总的来说，这些解决方案将相同的利基填充了R生态系统中的无处不在的闪亮填充：数据科学团队创建仪表板的方式。尽管如此，您可以使用它们进行互动科学可视化。熟悉这种可视化将有助于您构建一个语法的交互式可视化，并迅速原型更全面的交互式可视化。

Streamlit提供从Python的绘图和仪表板。脚本定义可视化（绘图，视频，图像，映射等）以及窗口小部件，并且整个东西都在云中提供。 StreamLit Server自己的缓存以最小化请求。每个请求都有一些滞后，但解决方案令人惊讶的性能令人惊讶。可以通过组件API在js中写入一些自定义可视化。缺点：轻量级的交互性井滑块，组合框 - 但不是为了什么太互动。默认提供的组件集的限制。此处的样本可视化。

类似于Streamlit，但专注于绘图生态系统。 Dash在企业用户身上瞄准了更多。此处的样本可视化。

一些Python绘图和映射库提供了最小的交互 - 悬停交互，工具提示，互动图例等。这包括绘图，Bokeh W / HOLOVIEWS和ALTAIR W / VEMALITE。在映射方面，IpyLeaglet值得一提。

也许在Python中执行基于动态的HTML的可视化的最低摩擦方式在Jupyter Notebook环境（或Jupyter Lab或Colab）中。毕竟，您现在正在浏览器内编写Python，为什么不使用相同的环境来鞭打快速的交互式可视化？这种解决方案的一个很大的优势在于它最大限度地减少了您必须通过将Python数据类型转换为JavaScript的曲目。因为您并排编写HTML，JS和Python，因此您的迭代周期非常快。最大的问题是，当您将它们发布到Web时，您将在此处创建的大多数小部件不会正确显示，例如，在GitHub上：人们必须下载笔记本电脑以获得互动效果。然而，他们将在粘合剂内部工作。他们是将脚趾划分到这个世界的好方法 - 此时，您可以通过复制和粘贴HTML，CSS，SVG和JavaScript的片段而不是正式学习它们。

当您在Jupyter Cell末尾打印变量时，Jupyter如何知道如何显示它？答案是它查找关联类的_repr_html_方法并调用它。此函数可以返回任何任意的HTML片段，包括Iframe，它是交互式的Interactive事物，或嵌入JavaScript的代码段。有关如何执行此操作，请参阅此Colab。您可以使用这种简单的方法进行相当复杂的东西，例如构建熊猫的交互式小部件。

您也可以使用ipython API从单元格中的任何位置触发丰富的显示器，而不仅仅是最后。同样，您可以包括任意数量的Web技术，包括嵌入式HTML中的嵌入脚本。

IPyWidgets，也称为Jupyter-窗口小部件或简单的小部件，是Jupyter笔记本和Ipython内核的交互式HTML小部件。使用交互式窗口小部件时，笔记本电脑会活下来。用户获得数据的控制，并可以可视化数据的更改。学习成为一个沉重的，有趣的经历。研究人员可以很容易地看到模型对模型的输入如何影响结果。

iPyWidget手册

接下来的复杂性是iPyWidgets。像ipython.core.display一样，iPyWidgets可以显示丰富的HTML;但是，小部件还可以具有导致它们调用Python的事件。有关一个例子，请参阅此笔记本。例如，您可以使用它们来浏览包含窗口小部件的绘图。实际上，这种模式非常常见，是一种称为交互的便利函数，它允许您进行基于滑块的交互。

在Jupyter小部件上建立，您可以在Jupyter笔记本中释放完全成熟的仪表板。这称为瞧。这个想法是你写了一个普通的jupyter笔记本，然后你可以通过网上的龙卷风服务器服务。最终用户看到仪表板，该仪表板是仪表板的输出单元的串联，而无需代码。您可以在Heroku或Google App Engine上部署此应用程序，使您的应用程序世界可访问。

此时，您可能会感到通过到目前为止提供的解决方案提供的有限互动性窒息。并且您可能会感到被全面的现代网络开发吓倒。许多产品存在以填补差距。但是，我争辩在这里，最好在笔记本环境中咬紧子弹并直接跳过编写真正的JavaScript，因为您将继续在Web技术周围建立核心技能。尽管如此，我在这里提到这些选项来完整性，因为它们可以满足您的特定用例。

Unity是游戏开发引擎和IDE。建立离线游戏和VR可视化是一个很好的环境。它将导出的场景和C＃基于脚本转换为WebasseMbly（WASM），因此它还在浏览器中运行。 C＃是一种具有操作员重载的现代语言。 2D和3D相互作用容易容纳。缺点：必须在Unity接口中创建小部件（滑块，输入框等），并且是非本机的。 Unity applet充当围墙花园，使得难以与本地DOM互动。 C＃代码无法使用命令行工具编译 - 它必须与项目组合并在Unity编辑器中编译，项目是几个GB，因此无法在GitHub中跟踪。此外，C＃中的数学库非常有限。总的来说，如果您正在进行3D viz，则为网络的相当有限的选择，虽然它具有相当大的吸引力。

p5.j​​s和开放性能带来加工 - 一个创意编码平台 - javascript。您用Init函数和循环函数写草图，它定义了草图的工作原理。您可以使用允许您绘制线条，矩形，精灵，多边形等的函数进入草图。处理的吸引力是您正在学习创造性的编码，进入的障碍很小。最大的疾病是，当您在环境中学习一点点JavaScript时，您真的不学习现代网络技术。在一天结束时，您会知道如何绘制您的草图，但您不会了解Canvas，SVG，CSS等 - 并且您将在您可以导入该环境的库中有限。据说，它们可以成为您的工具包的一部分，尤其是与平原JS互操作的P5.JS。

复杂性的下一步是基于JavaScript的笔记本电脑。正如使用远程内核（Jupyter，Colab）的基于Python的笔记本环境，就像使用基于本地笔记本的基于笔记本的环境，这些环境使用浏览器中本地运行的JavaScript。这意味着您可以获得Web的全部权力 - HTML，Canvas，CSS，SVG，带有远程库等的JavaScript - 但您正在在支持Jupyter笔记本的熟悉的Repl工作流程的轮子上进行。这些是对识字编程的理想选择，它们混合了文本，数学，代码和可视化。

对于许多人来说，我怀疑这将是复杂程度的正确水平。在实践中，使用笔记本电脑意味着您需要将数据导出从Python出来，以便可视化它 - 对于许多用例，Json将完成技巧。

可观察到的是在浏览器中运行的笔记本环境，由Mike Bostock，D3的创建者创建。可观察到的是像jupyter笔记本一样的像jupyter笔记本，但它使用一种功能样式，其中每个单元格可能只有一个输出，它可以解决依赖性的DAG，以确定哪个单元格在什么时间重新计算，从而避免ipython的陷阱-of订单执行问题。它有一套很好的初学者教程。可观察的运行时是开源，但笔记本电脑环境是闭合源。它仍然发表狂热 - 他们只是增加了多用户协作。严格来说，它不使用JavaScript，它不会使其很容易出口严格的JS - 但是，您可以在网页上嵌入单个单元格。总的来说，一个伟大的地方，可以获得你的回复工作流程。

右舷是一个开源交互式笔记本环境。它使用不同的隐喻，而不是可观察到的，粘贴到Jupyter隐喻的优点和缺点。它的最大内容是它支持通过粘性的javascript和python。你说的是什么？浏览器中的Python？为什么是，实际上是：

“Pyodide通过Webassembly将Python 3.8运行时与浏览器一起带来浏览器，以及包括Numpy，Pandas，Matplotlib，Scipy和Scikit-Learn的Python Scientific Stack。包目录列出了超过75个包的包。此外，可以从PYPI安装纯Python轮子。 Pyodide在JavaScript和Python之间提供对象的透明转换。在浏览器中使用时，Python可以完全访问Web API。“

Pyodide文档

这意味着您可以保留Python中的一些数值计算并根据需要将JS和Python与JS和Python匹配 - 尽管您可能仍然希望使用JavaScript来操纵DOM。 Pyodide最初由Mozilla从另一个（现已过度）的笔记本项目纺出来，称为碘化物，所以右舷，以及jupyterlite等少数人携带火炬。我真的很喜欢右舷 - 编辑感觉很棒，它很糟糕，它令人惊讶地令人惊讶的是令人惊讶的魔法。但是，文档和示例是最小的，它将受益于一系列教程。我认为可观察是现在这个空间中更加活泼和成熟的选择，但右舷是一个观看的。

现在你有机会学习JavaScript，HTML，SVG，足够的CSS在动态可视化的上下文中完成作业，现在您已经准备好解决了世界 - 万维网！在这一点上，这是学习现代Web开发的诱人，其复杂的工具链（NPM + React + WebPack + ...）。我最近与Chris Olah进行了一个有趣的对话，他提到了何时进行可视化，核心技能集 - HTML，DOM，CSS，SVG等 - 比学习任何特定框架更重要，并且它帮助组织了这篇文章。如果您确实需要在较大页面中工作的组件框架，则更轻量级的框架，如Svelte或Vue.js，可能会满足您的需求。

一个非常恼人的Gotcha，您将遇到的是为Web构建的节点和JS之间的包装差异。您将在MathJS中使用的大量包装用于数据分析 - 最初是为节点服务器环境而构建的。你需要建立它们来使用它们，这意味着学习构建工具，很快就浪费了几天，弄清楚了你的译文。现在有云转换器，特别是SkyPack和JSPM，它将为您编译节点JS库，以便您可以立即使用它们而不使用复杂的工具链。这意味着您可以以同样的方式导入JS中的节点包，以与Python导入Pip可安装包：

感谢Guido Zuidhof耐心地向我解释了这一点。对于部署，提供了您不依赖外部服务，您可以使用GitHub页面，或使用像NetLify等CDN服务。如果您需要与数据进行交互，那么您可能需要通过REST API创建和部署数据源。像在Heroku上部署的烧瓶一样轻量级的东西会做这个技巧。

当你经历这个过程时，它通常会感觉像叉子的花园：看似无限的决定。 但是，您可能会与以下内容进行了一组小核心集合： 我认为这足以让您在6个月内携带0到1。 练习，学习，并没有时间，您将准备好进行稳定的可视化！ 碘化物博客文章（碘化物被推翻，但链接的背景和资源仍然相关） JS4DS - 对数据科学的JS综合介绍（长！不谈论D3）