D3：如何展示大数据集

Question

D3：如何展示大数据集

31

我有一个包含10^5个数据点的大型数据集。现在我正在考虑与大型数据集相关的以下问题：

有没有有效的方法来可视化非常大的数据集？在我的情况下，我有一个用户集，每个用户有10^3个项目。总共有10^5个项目。我想一次显示每个用户的所有项目，以便快速比较用户之间的差异。有人建议使用列表，但我认为列表并不是处理这个大型数据集时唯一的选择。

注意

我想一次显示每个用户的所有项目。

这意味着当我点击一个用户时，我想显示所有的数据点，当我点击两个用户时，我可以比较它们之间的数据点差异。

- SolessChong

“Efficient” 一词的意思是什么？ - Lars Kotthoff

1

时间效率。当数据量变得巨大时，渲染需要相当长的时间，动态布局也变得不可能。 - SolessChong

这个描述非常模糊。你到底想做什么，你尝试了什么，为什么它不起作用？ - Anko

你的意思是说你想一直显示所有内容。我认为在这方面提高效率的空间不大，因为你需要渲染所有内容。 - Lars Kotthoff

@LarsKotthoff 我认为渲染点比渲染矩形更有效率。构建静态布局比动态布局更高效。因此，我在处理大型数据集时寻求适当的设计。虽然计算工作量存在下限，但我们仍然可以比较不同的设计并选择合适的方案。 - SolessChong

我们没有具体的代码或数据就不能进行比较。除了像你刚提到的那些高级别的东西，任何回答都是推测性的。 - Lars Kotthoff

2个回答

1

硬件加速图形是数据可视化的好工具。

使用LightningChart JS进行10万个项目散点图可视化只需不到一秒钟。

const { lightningChart } = lcjs

const data = new Array(100000).fill(0).map(_ => ({ x: Math.random(), y: Math.random() }))

const tStart = Date.now()
const chart = lightningChart().ChartXY({disableAnimations: true})
const scatterSeries = chart.addPointSeries()
  .setPointSize(1)
  .add(data)
  
requestAnimationFrame(() => {
  const tEnd = Date.now()
  chart.setTitle(`${data.length} points visualization ready in ${((tEnd-tStart)/1000).toFixed(3)}s`)
})

<head>
<script src="http://unpkg.com/@arction/lcjs@3.1.0/dist/lcjs.iife.js"></script>
</head>

- Niilo Keinänen

2

这也是一项价值1000美元的订阅服务，没有可比较的替代品。 - Kristof Gilicze

惊人的库。 - zero_cool

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Biovisualize · Accepted Answer

问题不在于渲染它们。你可以切换到canvas或webgl进行渲染部分。你可以找到一些使用D3数据绑定的canvas和X3DOM的例子。但由于DOM对象的数量，速度会比较慢，因此最好将它们分开，就像这个平行坐标示例一样。该示例还具有渐进式呈现功能，以加载和呈现所有数据元素。

在客户端内存中保留它们并进行操作也不是问题。D3常常与Crossfilter一起使用，快速处理“百万甚至更多记录”的数据。

对于SVG交互式渲染来说，10^5个数据点略微过多。但在可视化中有太多的数据点通常意味着您拥有错误的抽象级别或错误的绘图策略。许多点可能会重叠或视觉上融合。那么为什么不聚合这些形状，例如使用热力图（颜色缩放以用于重叠点的数量）、分箱（六边形分箱、直方图）或汇总数据集？

如果您想要概述和比较数据集，您可能需要一个抽象表示，例如一些统计数据总结您的数据集，然后按需查看详细信息（语义缩放、聚焦+上下文、钻取）。