WebGL Data Visualisation - via Bus

In the course of running the main site for National Express Buses in the Midlands there's some great opportunities to do utilise the site data. As a bit of a side project we put the immense amount of route data into the mixer in an attempt to create a visualisation.

In the course of running the main site for National Express Buses in the Midlands there's some great opportunities to utilise the site's data. Here's a quick run through of what we did with 7354 km of route data, visiting 9994 bus stops.

The goal here, is to create an explorable 3D map of the pulse of the city's bus routes and in doing so give the user an idea of the complexity and scope of the system.

To do this we turned to ThreeJS along with our extremely large dataset of bus stop and route data.

One of the things we discovered in exporting the data to a consumable format was that we had full GPS data for each of the stops, including elevation so immediately we set about creating a topographical map of the routes.

After a lot of experimentation the following method seemed to do the trick, working on an array of Route > Stop > {x,y,z} data.

plotData: function() {
    for(var j in busroutes){
      var group = busrouts[j];
      for(var i = 0; i < group.length; i++) {
        var route = group[i];
        var geometry = new THREE.Geometry();
        var colors = [];
        var spline = new THREE.Spline(route);
        for(var k = 0; k < route.length; k++) {
          if(route.hasOwnProperty(k)) {
            var index = k / (route.length);
            position = spline.getPoint(index);
            var plot = this.getPosition(position.x, position.y, position.z);
            geometry.vertices[k] = new THREE.Vector3(plot.x, plot.y, plot.z);
            geometry.colors[k] = new THREE.Color(0xffffff);
          }
        }

        var line = new THREE.Line(geometry, material);
        var scale = 1;

        line.scale.x = line.scale.y = line.scale.z = scale;

        line.position.x = 0;
        line.position.y = 0;
        line.position.z = 0;

        scene.add(line);
      }
    }
}

We've only completed the first phase of this project so far, but to see it in action point a WebGL enabled browser over here