Back-End

23 dez, 2016

Visualize conjuntos de dados na web com o framework deck.gl do Uber

Publicidade

Não importa em que você trabalhe, os dados movem as decisões atualmente. Na Uber, nós gostamos de ver esses dados se movimentarem para realmente os entendermos. Agora, qualquer um com um grande conjunto de dados pode fazer o mesmo na web.

Em novembro, nós abrimos o código do deck.gl, um framework baseado em WebGL desenvolvido especialmente para exploração e visualização dos conjuntos de dados em escala. O deck.gl nos permite visualizá-los sem compromissos.

Dados visualizados rapidamente

Enquanto a arquitetura do deck.gl serve tanto para visualizações abstratas quanto para científicas, dados relacionados a mapas são nosso maior ativo na Uber. Nós estendemos e testamos o deck.gl em muitos ambientes de mapeamento diferentes antes de seu primeiro lançamento.

Na Uber, os vários pontos de GPS que nós processamos todos os dias servem a necessidades em toda a empresa. Se tivermos um problema em nossa plataforma, podemos diagnosticá-lo explorando os dados do histórico de geolocalização. Se existe um acidente na rodovia, podemos explorar os traçados do GPS de uma certa viagem para entender o contexto completo. Se existem problemas em relação às localizações dos pontos de embarque em uma cidade, podemos comunicar os planos para as autoridades da cidade por visualizá-los. Nós precisamos que esses dados estejam disponíveis na web, em tempo real e sejam compartilháveis, para que outras equipes na Uber possam utilizá-los. Para atender a todos esses requisitos, nós desenvolvemos o deck.gl.

O deck.gl foca nos seguintes aspectos-chave para os usuários:

  • Performance: Ter uma alta performance renderizando grandes conjuntos de dados (milhões de pontos ou vértices), incluindo funcionalidades como rápida agregação e exploração visual, baseadas nas mais novas tecnologias WebGL.
  • Precisão: Alcançar alta precisão numérica nos cálculos da GPU, graças à nossa biblioteca matemática personalizada fp64. Que nós tenhamos conhecimento, nenhuma biblioteca baseada em WebGL atualmente tem essa funcionalidade, que é crucial para a interatividade dos conjuntos de dados geográficos.
  • Flexibilidade: Utilizar os últimos padrões de códigos, incluindo o ES2016, e um rico ecossistema de bibliotecas e configurações que viabilizam a rápida depuração e a análise das aplicações WebGL.

O que o deck.gl oferece ao caso de uso de mapeamento

Os conjuntos de funcionalidades do deck.gl se adapta a uma grande variedade de casos de uso, incluindo o mapeamento. Por exemplo, o deck.gl pode ser utilizado em conjunto com o sistema de câmera do MapboxGL, para que os dados possam ser opcionalmente exibidos sobre um mapa Mapbox e visualizado no modo perspectiva. Você também pode iniciar qualquer projeto de visualização de dados com o conjunto de camadas principais do deck.gl, incluindo o diagrama de dispersão, linha, arco, mapa temático, e camadas de grade, ou você pode opcionalmente conectar a outras bibliotecas de terceiros como nosso popular framework open source react-map-gl, um encapsulamento de React ao redor da API MapboxGL no JavaScript.

Para demonstrar, nós desenvolvemos um conjunto simples de exemplos que focam nos casos de uso de mapeamento. Cheque esta demo para ver a performance do deck.gl com uma grande quantidade de conjuntos de dados: 2M de pontos e 36k viagens de táxi em Nova York com a interpolação da GPU ao vivo.

1

Nós também desenvolvemos camadas para visualizar as estruturas dos prédios em 3D, segmentos das ruas, dados de pontos de nuvem, e mais, que nós vamos disponibilizar em lançamentos futuros. Vamos nos aprofundar um pouco no design e na arquitetura de decisões por trás do deck.gl!

Instanciação + camadas

Combinando instâncias e camadas, o deck.gl cria visualizações complexas possíveis sem travar os computadores. Se nós tivéssemos trabalhado com visualizações 3D no passado, então você já estaria familiarizado com o conceito de instanciação. Instanciação é quando você renderiza múltiplas cópias de um único objeto, com pequenos ajustes entre elas. Você termina com o que aparentam ser objetos diferentes, mas todos são exibidos sem problemas devido à forma como o API WebGL funciona. Por exemplo, para criar um diagrama de dispersão, você tem que circular elementos e aplicar modificadores ao raio, posição e colorir esses círculos baseados nos valores de cada linha de dados.

2

Para utilizar esse recurso de instanciação, o deck.gl tem um sistema de camadas para sobrepor diferentes conjuntos de dados (com os módulos de mesclagem, recortes etc.). Você pode pensar sobre diferentes tipos de dados com  separações semânticas claras em uma grande imagem, adicionando ou removendo camadas conforme você precise. Por exemplo, uma aplicação comum do deck.gl na Uber pode incluir camadas para pontos de embarque e desembarque, solicitações, elevações, prédios em 3D, e dados de pontos de nuvem, todos renderizados com alta performance porque as geometrias primárias são apenas cópias.

As camadas também podem criar cálculos como agrupamentos e agregações. Isso é usado para criar mapas de calor da densidade populacional rapidamente. Este exemplo mostra a agregação dinâmica em uma grade. Os cálculos são realizados ao vivo e a granularidade muda de acordo com o nível de zoom.

3

Cálculos de alta precisão da GPU

Uma funcionalidade do deck.gl da qual temos realmente muito orgulho é a habilidade de lidar com transformações de alta precisão e outros cálculos numéricos na GPU. O WebGL e muitas outras bibliotecas gráficas como a Metal da Apple suportam uma precisão somente de 32 bits single floating. O WebGL é particularmente compatível com uma precisão numérica em muitas das plataformas que ele suporta.

Como o deck.gl visa a fornecer tanto precisão quanto performance para um variação altamente dinâmica, grades de dados científicos, nós implementamos uma extensão poderosa para emular uma precisão de 64 bit double floating em todas as plataformas que suportem o WebGL 1.0. Com o dobro de dígitos significantes (46 bits) na mantissa, o tipo de dados emulados de alta precisão permite a renderização de primários que não poderiam ser tratados pela GPU, utilizando números reais de precisão única intrínseca. Isso é incrivelmente útil para renderizar elementos geográficos especificados em pares lat/long em níveis de centímetros ou para renderizar visualizações interativas de dados densos que abrangem de um nível municipal até o nível de intersecção de um mapa.

A maioria das outras bibliotecas que lidam com altos níveis de zoom ou utilizam outros sistemas de coordenadas (como o UTM), que trocam um alcance dinâmico por precisão, ou realizam cálculos baseados na CPU para o alinhamento com o mapa, que trocam performance por precisão. Ao fazer todos os cálculos de alta precisão do tipo floating, somos capazes de mover todos os cálculos para a GPU e manter a precisão, a performance e a interatividade ao mesmo tempo. Este exemplo mostra as operações de alta precisão.

4

Construído com os mais recentes padrões de código

Nós construímos o deck.gl para ser o mais relevante possível para outros usuários como nós. O deck.gl, portanto, usa os mais recentes padrões de código do JavaScript, com classes e outros conceitos de ES6 (ES2015) e ES7 (ES2016), suportados pela transpilação de Babel. Naturalmente, ele vem em um módulo npm e é compatível com pacotes JavaScript padrão, como Browserify e webpack.

Para tornar o deck.gl fácil para ser utilizado, nós criamos uma biblioteca associada chamada luma.gl, que usa as mesmas convenções de design e desenvolvimento que o deck.gl. luma.gl vem com:

  • Os mais recentes padrões de códigos JavaScript, incluindo ES2016;
  • Funcionalidades bem suportadas com a chegada do padrão WebGL 2.0, tais como coleções instanciadas nas aplicações WebGL 1.0;
  • Classes que expõem as funcionalidades do WebGL 2.0, permitindo que você comece a experimentá-lo hoje nos navegadores suportados*.
  • Depuração avançada, rastreamento, verificação de erros e facilidades para inspecionar os buffers e a memória a fim de simplificar o notoriamente difícil processo de depurar aplicações WebGL;
  • Biblioteca de sombreamento com um pacote de emulação de 64 bits de floating para a GPU, testado e colocado em produção para a maioria dos drivers de GPU da indústria (a biblioteca fp64 é amplamente utilizada no deck.gl para criar camadas de alta precisão).

* Em breve, será habilitada utilização do WebGL para executar sombreamento de cálculos para usos gerais.

Interoperabilidade com React e Mapbox

Nós construímos o deck.gl com o modelo de princípios de programação reativa (popularizado pela React) e trabalhamos na interoperabilidade completa com o sistema de câmeras do Mapbox. Como resultado, o modo de perspectiva e o alinhamento funcionam “fora da caixa” para as aplicações de mapeamento. Este exemplo mostra o modo de perspectiva do Mapbox com a camada de arcos no deck.gl. Ele está exibindo a migração país para país nos Estados Unidos. Utilize shift + arrastar para mudar a perspectiva no mapa.

5

Nós temos a intenção de, no futuro, integrar com outros aspectos do Mapbox, mas vamos manter as bibliotecas separadas, para que você possa utilizar com outros pacotes à sua escolha.

Mais para vir

Com esse primeiro anúncio do deck.gl, também estamos trabalhando em um roadmap ambicioso, aproximando a interoperabilidade com o Mapbox, mas também indo em outra direção: fazer do deck.gl um bloco de construção para a visualização de outros tipos de visualizações científicas.

Fique à vontade para falar com nessa equipe através do e-mail data-viz@uber.com se você tiver quaisquer comentários. Esperamos ver o que você constrói com isso.

***

Este artigo é do Uber Engineering. Ele foi escrito por Nicolas Garcia Belmonte. A tradução foi feita pela Redação iMasters com autorização. Você pode conferir o original em: https://eng.uber.com/deck-gl-framework/.