BIG SPATIAL DATA VISUALIZATION

The traditional method works fine when drawing only a couple thousands of points. Once it reach 10,000+ points, it becomes chunky. It takes time to draw the first time and the map becomes unresponsive to move because every move will redraw those points. If we use some smart algorithm(such as geojson-vt) to slice geojson files into tiles and draw on the canvas, it can easily draw 100,000 points on a Leaflet map and move the map without lagging. This seems to be a promising way to render mid-size spatial data.

100,000 points are impressive. But points are the simplest shape, how about triangles, rectangles? It can easily triple or quadruple the drawing. To draw over millions of points on a map, I have to find the alternative way. It turned out WebGL can leverage the GPU to achieve unparalleled drawing performance. I was impressed and decided to give it a try! This screenshot shows 1,000,000 points, and I can still move the map smoothly, smooth like butter!

Now that the WebGL technology looks promising, I started to look at the possibility of creating different kinds of visualization using WebGl. So one of the use cases is to show the geographical density based on some kind of aggregation. I did a test using a 9-million tweets dataset and aggregated them into block groups. I plotted it on a map and showed a neighborhood level density visualization of NYC.

Up to this point, all visualizations were created using plain WebGL API, which looks weird to most of the designers or front-end developers. An easier approach is to leverage MapboxGL's API, which already has built-in methods to draw standard geoJSON formats. But drawing large amounts of data from a single geoJSON file is not a good idea, because it will block the UI. A more async way is to generate map tile files for the data and let MapboxGL API to handle the drawing based on different zoom and different location.

WebGL is really the backbone of the modern 3D web gaming engine, which makes me think that it can enable more sophisticated big data visualization. Usually, the spatial dataset will contain other data attributes in addition to the latitude and longitude, such as a number of activities, pick up time in a taxi data set. Since the two-dimension X and Y coordinates are already used to represent the latitude and longitude. We have to use another variable to represent the additional attributes. Color and size are great examples of representing additional attributes.A higher dimension even adds more possibilities to create interesting visualizations. By using the amazing Three.js library, I added a 'height' variable to represent taxi pickup activities in NYC.

Getting to more complex 3D models, take buildings for example. I can recreate a Google-3D-Map like visualization as long as I get the data. So I went ahead to do a test by downloading a small set of data from OpenStreetMap.