29

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

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

笔记

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

这意味着我想在单击用户时显示所有数据点，当我单击两个用途时，我可以比较那里数据点之间的差异。

4

2 回答 2

49

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

将它们保存在内存中并在客户端操作它们也不是问题。D3 通常与Crossfilter一起用于“百万或更多记录”的快速数据操作。

10^5 个数据点对于 SVG 交互式渲染来说有点太多了。但是可视化中的太多数据点通常暗示您有错误的抽象级别或错误的绘图策略。很多点可能会重叠或视觉融合。那么为什么不聚合这些形状，例如使用热图（重叠点数量的色标）、分箱（hexbin、直方图）或汇总数据集？

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

于 2013-08-15T13:12:18.327 回答
0

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

使用 LightningChart JS 可视化 100000 项散点图只需不到一秒。

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>

于 2021-09-09T10:26:41.243 回答