Calculation and Visualization of

Public Transport Travel Time Maps

with HTML5 Canvas and JavaScript

1
Motivation

2
Travel Time Maps

- Visualizing isochrones
- Francis Galton, 1881
3
 Isochrones for Experts

- A Research Topic
- Decision Making Support
- Experts only

Glander, Kramer, Döllner: “Erreichbarkeitskarten zur Visualisierung der Mobilitätsqualität im ÖPNV”

4
Travel Time Maps
for the Masses

- UK’s mysociety started creating travel

maps for public use in 2006
- First: fixed center, static images
- Then: fixed center, interactive sliders

http://www.mysociety.org/2007/more-travel-maps/
5
And then...

- UK Post code based

- Whole UK

- Also: house prices

and “scenicness”

- Cloud setup

- still in private beta

http://mapumental.channel4.com

6
 Goals for Mapnificent

- Create a Mapumental
clone for Berlin
- User defined start
location
- Usable, i.e. not too slow
- Keep the costs low
http://myhpi.de/~stefan.wehrmeyer/hpidistance/

7
Demo

8
Public Transport Data

9
 Public Transport Berlin
Collect all lines Query Find Service
and their start complete route Interval
and end stations for every line

- Used Python, Mechanize, LXML

- JSON as (temporary) storage format

10
 Collect all lines
and their start
and end stations

- Semi-automatically
- Done once

Result:
- All lines with start
and end station

http://www.fahrinfo-berlin.de/
11
 Collect all lines Query
and their start complete route
and end stations for every line

- About 200 lines

- Straightforward scraping Time
between
stations
Result:
- All stations of a line (with ID)
- Time between stations
- Location of station

Bonus: latitude and

longitude of station
hidden in this link.
12
 Collect all lines Query Find Service
and their start complete route Interval
and end stations for every line

- Used VBB Mobil interface

- More complete
- Easier to extract
10 minute interval
Result:
- Intervals of lines

http://www.vbbonline.de/mobil
13
 JSON Data Format
[{"9196508": {
"stationId": "9196508"
,"reachableStations": [
{"stationId": "9196003", "minutes": 1, "line": "263", "stay": 0}
,{"stationId": "9196507", "minutes": 1, "line": "263", "stay": 0}
]
,"lines": ["263"]
,"name": "Joachimstr. (Berlin)"
,"pos": {
"lat": 52.403066
, "lng": 13.576713}
}
, ... - Size: ~800 kb
]
{
"218": {"interval": 25}
,"133": {"interval": 20}
,...
}
14
Heuristic Routing

15
 Mapnificent Routing
Cost aware depth limited graph traversal (with subtleties).

9 - Multiple connections
between two stations
2
5 - Line switch time
1 2 1 2
- Station stay time
- Same line look-ahead
5
1
5 - Good algorithm?
3

Start 1

16
Result: map of minute values

17
 Web Worker
- HTML5 API for background computations
- Chrome/Safari don’t need them (faster without)
- Opera doesn’t support them
- Firefox needs them badly

- Wrote a facade to abstract different needs

18
 Visualization
in the Browser

19
 Drawing On a Map

- Google Maps Drawing API: slow, too many DOM obj

- Flash: cumbersome, proprietary
- SVG: not the right use case, too powerful
- HTML5 Canvas: easy to integrate, powerful enough

20
 A Canvas in Google Maps

- Canvas is placed as an
Overlay inside the Map
- Resizes for zooming
- Panning with threshold
detection for redraw

21
 Drawing Circles

- When time slider

reaches station,
start drawing circle
at walking speed
- Canvas compositing
subtracts circles
from dark area

22
3D Cones with WebGL

“Performance Assessment for Accessibility Mapping Algorithms in Public

Transport: Does accuracy matter?”
Colored Maps
23
 Where can I live if I need to
Intersections reach place A in 20 minutes
and place B in 30 minutes?

No Safari/Chrome due to Bug in WebKit

24
Evaluation of Routing

25
 Routing: it’s not perfect

- No time tables: heuristic of line switch time

- No regional trains
- Good enough for the big picture

- Comparison with output of VBB command line tool

26
Error in Minutes

≤3 minutes: 36%
≤5 minutes: 53%
≤10 minutes: 78%
≤20 minutes: 96%

27
Error vs. km travelled

Big service interval:

the village buses

28
 How to fix it?
- Difficult. Inherent problem of the approach.
- Idea: another heuristic for line switch time
- interval / 3, interval / 4?
- log(interval, 1.5) ≤3 minutes: 48% (+12 %)
≤5 minutes: 65% (+12 %)
- ?
≤10 minutes: 85% (+12 %)
≤20 minutes: 97% (+1 %)

29
Conclusion

30
Mapnificent London
- It’s easy to port to other cities
- Build at HackCamp London June 12/13 2010
- Data extraction is the hard part
http://london.mapnificent.de

31
 Make it Accessible

- Build for everyone,

build for the Open Web
- Leverage current
Web technologies
- Open Source, liberally
licensed

32
 JavaScript Routing

- Client beats Cloud (in this case)

- Trust JavaScript, it’s fast (in some browsers)
- Try an insane approach (and be surprised)

33
 Thank you!
Mapnificent
http://www.mapnificent.de
http://github.com/stefanw/Mapnificent

Stefan Wehrmeyer
http://stefanwehrmeyer.com

34