From CS 294-10 Visualization Sp10

Jump to: navigation, search

For this assignment, I decided to create an interactive visual train schedule after the french rail engineer Ibry's design, as popularized by √Čtienne-Jules Marey's 1885 "La m√©thode graphique..." line Below is a reminder of what it looks like - time progresses across horizontally, and the stations from Paris to Lyon are laid out vertically, according to their relative distances.


When I lived on the peninsula, I used to regularly ride Caltrain, which runs from San Francisco, down to San Jose (and even Gilroy). I just rode it again this past weekend, and was once again reminded at how atrocious the timetable is, in terms of usability. Just as Tufte mentions in one of the readings, it seems to be optimized for the conductors / train operators in the layout (though, in Caltrain's defense, some minor improvements, at least in the web version, have been made over the last 11 years that I've been riding it, it used to be even worse).

With some practice and lots of darting your eyes (and your browser's scroll bars, in the case of the web version), you can figure out when the next train arrives. Figuring out when (or if at all, with the more recent Baby Bullet express and limited stopt rains) this train arrives at your desired destination can lead to further frustration, because the station names can be far away from the schedule. And if you want to plan the return trip, better grab a Snicker's, because you're in for a repeat dose of frustration.

Additionally, since the trains are laid out in individual columns and there are express trains which pass some of the others, there's only a proper time ordering at the beginning of the trip. Further down, as an express train overtakes a local, it's arrival time will actually be earlier than the train listed to it's left. Take a look at this example: for the fourth station from the top, there's a train arriving at 8:05 (express), 8:16, 8:36, and 8:23?!? (another express).


But it doesn't have to be this way. Especially for the web version!


Overall design


This is the sketch of the overall schedule. Some of the interactive features will include:

  • on mouseover highlight the entire route (with timing text displayed next to each stop
  • on click - add station to list of currently highlighted (displayed text times)
  • box constraints - drag arrival and departure time
  • station names appearing as close as possible to the schedule, once time constraints are placed, to ease their reading)
  • fading out the opposite direction of travel, if one is selected.


This is a sketch of what the top of the schedule will look like. It will have:

  • Departure and Arrival boxes, which will show the selected station
    • it's listed as an input box, time permitting.
    • additionally (and again, time permitting), it may be nice to make an additional time input field here
  • draggable the green and red lines, indicating the desired constraints on departure and arrival times respectively
    • traffic light color analogy, with an additional hint from the origin of these lines (green starts on Departure line, red on Arrival)
  • The 'Flip' button is meant to switch the direction of travel (north or southbound) - which will flip the order of departure and arrival lines (hopefully in an animated manner). As the picture is currently shown, we'd be selecting southbound trains, since the departure line is at the top, which is north.


To facilitate feedback on the direction of travel, soft (low contrast) arrows will be placed behind the schedule itself, and change accordingly when the direction is flipped.


Additionally, outside of the schedule (where the station labels are), I may place an additional direction indicator/toggle.

Intuitive constraint selection (dragging selection)

What makes the present design of the schedule frustrating, is that there's a ton of numbers for every station, and no way to filter out the numbers you aren't interested (both because of time and because of station constraints). I thought it'd be nice to specify these constraints right on the schedule:

A user will be able to make time, station, and joint time-station constraints by clicking and dragging out a selection box. For skinny selections - the aspect ratio will determine the type of constraint:


If the box is long and horizontal, make it a time constraint, additionally setting the direction of travel based on the end point relative to the beginning. If the box ends above the starting point, set the time contraints to the selected interval and the direction of travel to Northbound (since North is at the top of the schedule). If the box ends below the starting point, set the time constraints to the selected interval and the direction of travel to Southbound.


If the box is short and horizontal, make it into a one-way constraint, depending on the direction of the box. If it ends to the right, make the starting point to the departure time constraint. If it ends on the left, make the starting point the arrival time constraint.


I already indicated that station filtering could be done by simply clicking on the stations, but additionally, vertical selection boxes can be used to specify both the starting location and the destination (with an implicit direction of travel).


To pull this off, it would be really usefull to give feedback to the user *as they make the selection box* about the nature of the constraint they are placing, as well as the details, if possible. For example, get both the departure and arrival time constraints updated in real-time as you drag across, or indicating the closest station as you drag up and down.

enable new type of queries

In addition to just a standard use of getting from A to B during a certaing time period, these constraints and the fact that both directions of travel are represented in the same space, ease new type of queries, which were previously difficult: Convergence: Say I want to meet-up with my friends from all throughout the peninsula, and we want to meet up in Mountain View before 6pm. With just one station and one time constraint, we can highlight all the trains that arrive there before 6pm. Aimless adventure: Say that it's 2 hours later, and we've had enough of Mountain View, we can set those two as the departure parameters, and see where we can go from Mountain View in either direction after 8pm.

logical conclusion of placing constraints

Once the user has placed all of the constraints, it would be ideal to allow him to get just a text version of all routes that match the selection: collapsing the entire graphic completely, just show departure and arrival times for the trains that fit his criteria.


If there's time, I'd like to also enable the automatic discovery of what I call "longcuts". Because of all the express and limited stop trains, I figured out that instead of following the timed transfers from express to local trains, it's actually sometimes faster to ride an express train that goes past my station without stopping, and to catch a train going in the opposite direction. Hence the name "longcut": you're actually traveling a longer distance, but doing it in a shorter period of time than waiting for the timed transfer. Certainly the visual schedule itself will make the discovery of such "longcuts" a lot simpler by eye, but it'd be nice for it to automatically find them, too.


I'll be using Protovis.

Final Writeup

This is an interactive weekday schedule for Caltrain.

This was my first time doing anything in JavaScript, and I think I created too many elements to get good interactivity (everything is kind of slow). So the mouseover stuff worked great when I only had a few routes, but when I put in the entire data, it was unbearable, so I took it out. I also overscoped the entire project for the amount of time that we had to implement.

I kept only the simple version of the intuitive selection:

    To toggle highlighting all stops made at a particular station, click on a station name or line.
    To toggle highlighting all stops made by a particular train, click anywhere on the train's route.
    To toggle labels that lie within time constraints, click on any whitespace within the schedule .
    To adjust the time constraints (top), click and drag to the right (departure circle) or click and drag to the left (arrival triangle)
    To toggle highlighting Northbound trains, click and drag up.
    To toggle highlighting Southbound trains, click and drag down.

Protovis is very nice - I was quickly able to follow the examples and make stuff work, and I've never done anything in JavaScript before. Nesting elements one after the other was great for making the code a little bit simpler, and having a better mental model for what belongs to what. I also enjoyed the built-in linear scales, which allowed me to think and write everything in terms of data coordinates. What made things difficult was straying from the examples that made the page throw an error and fail to render. There were numerous times (especially in the beginning) where my mental model for how protovis (and javascript in general) works that simple didn't reconcile with what I was seeing, or what was / was not working.

I spent around 30 hours altogether, with the first five just playing around with and modifying protovis examples, a couple of hours reading through O'Reilly's comically skinny JavaScript: The Good Parts, to get a better mental model and gotchas of Javascript, and a couple of hours each for massaging the timetable data from the Caltrain website, as well as tracing out the train route to get accurate distance information. What took the most time is trying to get used to this different programming style, and gain the appropriate mental model.

Here's an online version of the visual Caltrain timetable. File:A4-PaulIvanov.tar.gz

[add comment]
Personal tools