I like travelling. I like trains. I don’t particularly like making decisions. Thus when deciding where to travel to with a train, it would be nice to know which areas are accessible. Taking inspiration from Beau Gunderson’s route times in Seattle, I decided to create maps showing which places are accessible by train from four of Europe’s major cities: London, Paris, Berlin and Vienna.
The methodology is simple. I used the Swiss public transport API to get the best connection between the start city (London, Paris, Berlin and Vienna) and every other city in Europe (huge thanks to @internetztube for a listing of European trains stations). Then I created a grid over all of Europe and interpolated the time to each point on the grid by assuming that any location that wasn’t a train station could be walked to at a rate of 10 minutes per kilometer. The results show a interconnected web of easy-to-reach locations criss-crossing the disconnected countryside.
Darker blue colors indicate a shorter travel time. Colors are proportional to the log of the total estimated travel time. No legend is provided, but clicking on the image leads to a larger interactive version overlayed on OpenStreetMap.
Tracking the stepwise movements of the force-directed graph layout in d3.js is useful when creating more intricate and/or dynamic graphs. Unfortunately, in its current implementations, these changes are fleeting and hard to see due to the speed with which the layout is updated. Slowing it down can help to see how each tick event updates the positions of each node. A method for doing this is described by @DavidBruant in a thread about running the force simulation faster. Keep in mind that this is a hack and probably shouldn’t be used for anything production-related.
Implementing this slowdown requires slightly changing
d3.js. To adjust the desired
delay between each
tick event, simply change the
setTimeout(tick, 234) line.
The modified version of d3.js used in the ‘slow’ example abov used in the ‘slow’ example abovee is available here.
Dragging multiple nodes in a force-directed graph layout is useful for making large changes in its arrangement. Mike Bostock showed a nice example of this while describing the process of creating the 2013 Oscar Contenders visualization in his Eyeo talk about examples.
His example, while instructive and useful, can be made even more helpful by adding the dynamic force calculation, as well as zooming and centering behaviour.
In the example below, hold down shift to select multiple nodes or press the ‘c’ key to center the graph. Zooming and panning follow the typical pattern using the mousewheel and dragging.
The selection process is made to emulate the behaviour of selection and dragging that is seen in most file managers and is thus familiar to most users of desktop computers:
Finally, the cursor is changed to a crosshair when the user presses the shift key.