HTML5 Developer Conference header
  • Sampumon Kaipiainen
Sampumon Kaipiainen

Sampumon comes from Viiksipojat (moustache boys), the cultural production and internet collective in Helsinki. Viiksipojat organizes urban swimming & ice swimming festivals on summer & winter. Also a researcher at Helsinki Institute for Information Technology HIIT, currently on the SUPERHUB EU project doing HTML5 user interfaces. Previously held Introduction to Computers, the first course for new students at the Department of Computer Science, University of Helsinki.


  • SUPERHUB route planning w/ Leaflet.js, and D3.js
  • Time: Wednesday @ 11:40am | Room N-122

The SUPERHUB project1 has created a multimodal journey planning scheme which encourages users towards sustainability and sociability. We have created an HTML5 visualization for the journey planning, which shows all possible transport types on the same map+list visualization, allowing users to compare between different criteria in one view. Each journey plan is simultaneously shown on a synchronized list and map, with possible disruptive events (accidents etc.), presenting all required criteria and decision data in one view. We use Leaflet.js for the map, which in turn uses SVG for the map vectors. During the development, we discovered that Leaflet.js is not well compatible with D3.js, as Leaflet uses JavaScript API, while D3 works by manipulating the SVG DOM. We created an adaptor bridge between these two with AngularJS. We argue that the visualization is superior compared to current journey planners2 3 4 5, since none of them offer all possible transport types on same view. We also argue that the AngularJS adaptor has many uses in making SVG more usable with other, JavaScript-driven technologies.


This presentation was contributed by The Graphical Web, for more info see Graphical Web Abstracts


Slides (Google Presentation)

Interested in
being a sponsor?

Contact us at

Newsletter Signup
Signup for our newsletter today!