大型数据集可视化

Question

我有几年(> 20年)的每小时数据,我想提一下如何在浏览器中显示如此大量的数据.我想将数据显示为时间序列,因为所有不同的数据集具有相同的格式(某个时间的值),但显示不同类型的信息.我查看了d3js,并设法绘制我的所有数据,即20年的数据或更多,然后根据这个非常好的例子使用刷子放大.
但是浏览器不支持那么多数据并且变得极其缓慢.
在服务器端,我使用servlet以json格式发送数据.

我显示不同类型的数据,但都具有相同的格式,即时间和价值,但显示不同类型的信息.

感谢您提供有关可视化大型数据集的最佳实践的一些建议,提示和示例.

Answer 1

不要将所有数据都带到客户端.

相反,您可以实现一个服务器端方法,如下所示:
getData(startDate, endDate, maxSteps)

此方法将始终返回大多数maxSteps记录,但哪些记录,完全取决于您和您的数据.我建议采用以下方法之一:

以下两个方法的步骤很常见:

• 获取startDate和之间的所有记录endDate
• 如果记录少于maxSteps返回所有记录

使用由确定的记录子集startDate并endDate继续执行以下步骤.

方法1:从您的数据中获取准确的记录.确定正确的可能是昂贵的:

• 确定数据中的等距点

• 从最接近所选点的数据中获取记录

  point = startDate;
  stepTimeSpan = (endDate - startDate) / (maxSteps - 1); //will fail if maxSteps = 1
  for (i = 0; i < maxSteps; i++)
  {
      records.Add(getClosestTo(point));
      point = point + stepTimeSpan;
  }
  return records;
  

方法2:返回聚合产生的记录:

• maxSteps用记录拆分桶中的记录(按日期)

• 从聚合中获取每个桶中的一条记录

  bucketStart = startDate;
  bucketTimeSpan = (endDate - startDate) / maxSteps;
  for (i = 0; i < maxSteps; i++)
  {
     bucket = getRecordsBetween(bucketStart, bucketStart + bucketTimeSpan);
     records.Add( new Record( AvgDate(bucket), AvgValue(bucket) ) );
     bucketStart = bucketStart + bucketTimeSpan;
  }
  return records;
  

每次用户更改间隔时,在客户端调用此方法(使用示例中底部的小图表).

maxSteps有价值地玩,直到您在性能和细节之间找到适当的平衡.