Empty Pipes

Europe by Train

  • 25 Mar 2015
  • |
  • python
  • maps
  • leaflet
  • |

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.

Paris</td> </tr>
Vienna</td> </tr> </table>

Slowing Down the Force Directed Graph in D3

  • 18 Feb 2015
  • |
  • javascript
  • d3.js
  • |

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.

pkerp@toc:~/projects/emptypipes$ diff js/d3.js js/d3_slow.js
<         d3.timer(force.tick);
>         setTimeout(function tick(){
>             force.tick();
>             if(alpha >= .005)
>                 setTimeout(tick, 234);
>         }, 0);
>         //d3.timer(force.tick);

The modified version of d3.js used in the ‘slow’ example abov used in the ‘slow’ example abovee is available here.

Selectable Force-Directed Graph Using D3.js

  • 15 Feb 2015
  • |
  • javascript
  • d3.js
  • |

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:

  1. Clicking on a node selects it and de-selects everything else.
  2. Shift-clicking on a node toggles its selection status and leaves all other nodes as they are.
  3. Shift-dragging toggles the selection status of all nodes within the selection area.
  4. Dragging on a selected node drags all selected nodes.
  5. Dragging an unselected node selects and drags it while de-selecting everything else.

Finally, the cursor is changed to a crosshair when the user presses the shift key.

The code for this example is available on bl.ocks.org or directly from github gist. An example of its use is found in this RNA secondary structure visualization tool.