用于改进具有多行的交互式 Altair 折线图的选项答案

【问题标题】：Options for improving interactive Altair line charts with many rows用于改进具有多行的交互式 Altair 折线图的选项
【发布时间】：2021-07-24 07:24:29
【问题描述】：

我的要求是将形状为 (50,000, 2) 的 pandas 数据框绘制为交互式折线图。一列包含datetime64[ns]，另一列包含浮点整数。

不幸的是，对于这么多的数据，交互式图表似乎变得非常缓慢平移和缩放。我的图表非常基础，我可以观察到，一旦将行数减少到 FAQ 并了解官方指南甚至不建议一开始就超过 5,000 行。尽管如此，我正在寻找提高性能的方法，并且似乎没有太多关于此的讨论

我不需要一次显示所有 50,000 个数据点，但我确实希望将所有 50,000 个数据点存储在一个独立的 .html 文件（即图表）中。

我正在考虑“将绘图保存到磁盘”、“使用滑块创建限制一次显示的数据点数量的滑动窗口效果”、“使用更有效的数据类型”、“改变线条的外观，以减少渲染的密集度”。真的，任何可能有帮助的东西都很好。在某些情况下，我正在将性能与更专用的可视化软件（如 Matlab）进行比较，在其中我可以毫无问题地进行交互包含这么多数据的折线图。

另外，我也很高兴听到解释为什么由于 HTML、JSON、Altair、Vega 或其他任何东西的限制，无法以交互方式绘制这么多数据。

【问题讨论】：

标签： python pandas altair

【解决方案1】：

正在努力提高 Vega 的性能（包括通过 WebGL），您可以在此处阅读 https://github.com/vega/vega/issues/2619。在那些土地之前，我认为你最好的选择是放大一个较小的区域，这听起来可能很好，因为你提到不需要一次显示所有点。我发现使用 data_server 后端也可以帮助减缓一些大数据速度，尽管与渲染无关。

import pandas as pd
import numpy as np
import altair as alt


alt.data_transformers.enable('data_server')

N=50000
test_df = pd.DataFrame({'t' : range(0, N, 1),
                        'A' : np.random.randint(0, 100, size=N)})

alt.Chart(test_df).mark_point().encode(
    alt.X('t', scale=alt.Scale(domain=[4000, 6000])),
    alt.Y('A', scale=alt.Scale(domain=[40, 60]))).interactive()

【讨论】：

谢谢（再次）乔尔！我认为从根本上说，我只是想弄清楚减速是由我的错误代码还是 Vega 的限制引起的。知道没有 WebGL 支持让我安心。另一方面，我在这里看到了您的评论：github.com/vega/vega/issues/2619#issuecomment-825118328。你认为我值得一试使用散景或情节吗？我正在尝试构建的图表并不是很花哨（我的目标是 vconcat 一些交互式折线图），我想知道我是否使用了错误的工具来完成这项工作。
@KenLin 是的，当大数据集的流畅交互是主要的时，我认为情节和散景（+holoviews）都是不错的选择。如果你有比 webGL 处理的更多的数据，你可以试试 datashader，它在显示之前将数据光栅化为图像datashader.org/getting_started/Interactivity.html
您大概知道有多少数据可能需要光栅化？同样，它将构建一个包含两列的简单交互式折线图。 100k 行？ 100 万行？感觉你以前也遇到过类似的问题，会有一个大概的想法。
@KenLin 我经常看到提到的是用webgl应该可以达到数万到数十万的点，但是数百万到十亿需要datashader。我在这方面没有丰富的经验，所以你想自己尝试一下。