Nicolas Garcia Discusses Uber Engineering’s Framework for Advanced Data Visualization

/, Educational Resources, Google Android, Support Links, WebGL & Wearable Computing/Nicolas Garcia Discusses Uber Engineering’s Framework for Advanced Data Visualization
Data is mission-critical to the advancement of any technology, but it loses value if we are unable to understand and visualize it.

In 2016, we acted on this philosophy by open sourcing deck.gl, a WebGL-powered framework specifically designed for exploring and visualizing data sets at scale. deck.gl lets us extract both historical and real-time insights from large, complex data sets, allowing us to think in 3D.

Today, we open sourced our latest version of the framework, deck.gl 4.0, empowering anyone, anywhere to rapidly visualize and explore data sets. Our goals for 4.0 were threefold:

  1. Enable advanced geospatial exploration through a rich set of visualization layers, capable of on-the-fly data aggregation.
  2. Extend our offering beyond maps to non-geospatial visualizations, including machine learning and abstract data visualization (graphs, networks, etc.) use cases.
  3. Make deck.gl easier to use for developers by providing more comprehensive (and interactive!) docs, standalone examples, new and advanced demos, and an upgrade guide from deck.gl 3.0.

 

Advanced Geospatial Visualization

deck.gl 4.0 brings a new set of powerful layers to our catalog, now capable of covering more use cases from across the mapping world. Check out a few of the dozen new layers and examples of how they can be used:

GeoJSON layer: Able to render any type of GeoJSON data set, this layer is designed to process and depict multiple types of geometry features defined in the GeoJSON format including points, lines, multi-lines, polygons, and multipolygons.

Below, we rendered Vancouver’s property value data using the extrusion feature in the GeoJSON layer. Height encodes property value and color is percentage growth for that value.

This map shows the property value growth in Vancouver, BC in the GeoJSON layer.

Grid and Hexagon layers: These layers encode the aggregation results of location data by square or hexagon in the color or height of their cells, providing a 2D heatmap or 3D heightmap visualization of the data.

In the model below, we used data from data.gov.uk to depict the number of personal injuries based on location in the UK since 1979. The model demonstrates variable granularity for grouping data, variable radius for hexagons, and a simple way to select percentiles from the overall distribution.

Using data from data.gov.uk, this 3D heatmap shows the number of personal injuries in the UK from 1979 to the present day in a hexagonal layer.

For a full list of layers and examples, please refer to the layer catalog and our gallery.

 

Beyond Maps

Some internal needs at Uber related to machine learning and network visualization have generated new use cases for deck.gl. To meet these requests, we worked on decoupling the mercator projection viewport from deck.gl so that a user can take in any type of viewport, including standard 3D perspective and orthographic viewports.

3D surface layer: This layer can be used for rendering things like Partial Dependence Plots for machine learning models, highlighting the correlations between two variables and their impact on a prediction. The 3-D surface layer depicted below shows how to use deck.gl to render 3D surface plots, which makes use of our built-in picking mechanism to query the value for the surface at any arbitrary point.

This example enables the user to explore 3D surfaces interactively with deck.gl.

Point-cloud layer: deck.gl 4.0 also incorporates a point-cloud layer for 3D point-cloud data visualization to get accurate models of reality.

 

Making deck.gl Easier to Use

In addition to adding new layers and functionalities, deck.gl 4.0 makes the framework more accessible to new and experienced users alike.

Documentation has been extensively improved and reorganized in response to user feedback. In particular, every layer now has an interactive layer browser allowing the user to play with all the properties of the layer while reading the docs. This makes it much easier to understand how the provided deck.gl layers work, as well as determine whether or not they work for your use cases.

An example of the new interactive layer documentation in deck.gl 4.0, using BART station locations as input data.

deck.gl also provides multiple stand-alone examples, with minimal configuration files (package.json, webpack.config.js, etc.). These examples are easy to copy directly to new files, which makes visualizing your data quicker than before.

With its new set of powerful visualization layers, re-architected codebase, and user-friendly, interactive documentation and examples, we hope that deck.gl 4.0 can help your team, too! To stay informed on the latest updates and get visualizing, check out the deck.gl website.