javascript - 构建火车运动图

Question

我需要建立一个图表来反映每天的火车运动。像这样的东西：

我从来没有建立过这样的图表。你知道我应该从什么开始吗？我找到了一个图形库d3.js，但还没有使用它的经验。

你能指导我一点吗？

谢谢！

Answer 1

您的首要任务是组织和理解您的数据。从我在您的（小）图像中可以看到，您有一个网格，上面覆盖着对角线。假设您使用图形库，我将首先绘制网格，将网格交点坐标添加到数据结构中。那么遍历你的数据并绘制对角线应该是一个相对简单的事情。

你要求指导。试一试，如果您遇到困难，请返回您开发的代码和数据结构。

Answer 2

这看起来像 EJ Marey 的 1880 年的火车时刻表，它在Tufte 的“定量信息的视觉显示”的封面上，并在这篇博文中进行了描述。

实际上有一个CalTrain 时间表的交互式可视化，它复制了 Marey 的可视化，内置在 Protovis 中。尽管 Protovis 不再被积极开发，但您也许可以使用该示例。

然而，正如@HBP 所说，这种可视化非常简单，无需学习任何专门的可视化库即可手动构建。