Fun with D3 and Web Visualizations


I've started learning D3 for a new series of data visualization tools I'd like to build.

In addition to Mike Bostock's tutorials, there is an excellent book by Scott Murray which is also freely available online.

For a first exercise, I took inspiration from E.J. Marey's famous train schedule from the 1880s.

E.J. Marey's Train Schedule

Instead of Paris-Lyon, I used the PATH train routes, by downloading the schedule data from their publically-available developer resources.

Unlike Marey's original design, or Mike Bostock's own attempt using Caltrain data (which I just found out about after completing mine), I didn't draw all the route lines at once.

Instead, routes are shown one at a time, by clicking on any of the station stops (I stuck with PATH's own color scheme for the routes: green is Hoboken to 33rd Street, red is Newark to World Trade Center, etc.).

PATH Schedule visualization screenshot

The first attempt is a little rough around the edges, but is fun to play with.