Building a train movement graph

Question

I need to build a graph that reflects train movement for a daily period. Something like this:

I've never built graphs like that. Have you any idea what I should start with? I found a graphic library d3.js but yet have no experience of working with it.

Can you guide me a little?

Thanks!

Answer 1

This looks like E.J. Marey's 1880's train schedule, which is on the cover of Tufte's "The Visual Display of Quantitative Information" and described in this blog post.

There's actually an interactive visualization of CalTrain schedules that copies Marey's visualization, built in Protovis. Though Protovis isn't actively developed any more, you may just be able to use that example.

However, as @HBP says, this kind of visualization would be pretty straightforward to build by hand without learning any specialized visualization library.

Answer 2

Your first task would be to organize and understand your data. From what I can see in your (smallish) image, you have a grid overlaid with a diagonal lines. Assuming you go with a graphic library I would first draw the grid, adding the grid intersection co-ordinates to the data structure. Then it should be a relatively simple matter of traversing your data and drawing the diagonal lines.

You asked for guidance. Give it a try and if you get stuck come back with the code and data structures you develop.