Jérôme Cukier
Jul 23 · 7 min read

The visualization engineering team at Uber is made up of dozens of technologists with very different specialties — mapping, web, data, low-level graphics, ML, you name it. Many of us fell in love with visualization by experimenting on our own and through the joy of making stuff. And with the team so large and so diverse we don’t always have a chance to work with each other!

Two excellent reasons to launch our second Vis Hackathon, in which 11 teams from across Uber Vis participated. We had two themes this time:

Without further ado, here’s what we did!

Urban Symphony

Jon Sadka

Close your eyes for a moment and imagine what it’s like sitting in a quickly accelerating car. Chances are that part of this imagination includes sound.

Sound is a natural byproduct of movement and speed, yet, by their nature, most visualizations about speed only express data visually. Urban Symphony is an experiment to see what happens when we used speed data to generate a melody for a given path of road segments.

Sparrow

Wesam Manassra, Ed Barwani, Adam Kidder, Ib Green
Best use of city data prize

Apache Arrow is a columnar in-memory data format that is interoperable across different languages, and makes it efficient to transport and scan large datasets without the need for serialization/deserialization on servers/clients.

We unlocked the powers of Arrow by building Sparrow, a tool to visualize a year’s worth of hourly speed data in the browser dynamically and efficiently (around 130 million speed readings). We built a lightweight Python server to read the dataset partitioned by day and stream it over HTTP. We can then visualize hourly speed data in the browser as soon as it arrives from the server. As the user scrubs to a certain date, data is loaded and flushed dynamically to maintain an upper bound on the total memory used by the browser.

This approach allows us to visualize very large data sets with low latency. As a future exploration, we’d like to stream this data directly to the GPU to enable even better performance.

Traffic Flow

Javid Hsueh

This project simplifies the road network and visualizes the traffic flow of the city. The junctions will move toward the major traffic direction at each hour.

The two main challenges of this project were the road network simplification and using transform feedback in a custom deck.gl layer to animate the flow on the edges.

ML Speeds Limit

David Schnurr, Ben Kramer

Predicted speed limits from selected San Francisco streets based on Movement Speeds Data

Basemaps like OSM often have inconsistent availability of speed limit data. Can we build a supervised machine learning model that utilizes Movement Speeds data to predict speed limits on roads where it’s not available?

Our team had limited ML experience, so a lot of time was spent learning about model selection (we settled on a decision tree regressor) and feature engineering.

The accuracy of the final model was actually relatively decent, and we think given extra time its accuracy could be improved even further with better feature engineering, hyper-parameter tuning, and testing deep learning approaches.

SpeedsUp

Bryant Luong, Lezhi Li

In this project, we tried to discover daily speed patterns of various streets in a city using machine learning on Movement Speeds data. On the right, we represent streets as time series of speed over the course of the day. We can then cluster these time series by similarity — the streets which are always fast, always slow, fast and slow at similar times, etc.

We used Apache Arrow to load a very large dataset in the browser and TensorFlow.js for efficient in-browser machine-learning.

Really Fast Rectangles

Brian Ford

Can aggregation and drawing functions based on the incremental lambda calculus be a practical way to speed up data visualization programs? To find out, we wrote one data visualization using d3.js and another one using incremental functions, and then benchmarked the two approaches.

While our intuition is correct and that lambda calculus can yield drastic performance improvement, we also found that writing aggregations in terms of changes is surprisingly difficult, and that not all types of aggregation benefit from this approach.

How to Animate Anything

Shan He
Grand prize

Heights and colors are animated in kepler.gl

In this project, we wanted to experiment with deck.gl’s attributes transition in kepler.gl to visualize speed changes over time.

Animation is, at its core, the transition of visual attributes (position, color, radius, thickness) based on time. In kepler.gl, layer visual attributes can be encoded by selected field values. However, there is currently no way to animate these attributes based on time: e.g., you can draw road segments and color them by speed, but you can’t animate the colors based on speed changes over time.

The way we allow the animation of visual attributes (position, color, radius, etc) is based on an additional time table. The user can select a dataset to draw the shape (road segments), and another dataset that contains a time table (speed per segments per hour). They can then join these two data tables and enable animation for visual attributes that are based on value (speed, # of cars, # of passengers, etc).

Joining an attribute dataset with a time dataset

Cinematic kepler.gl

Chris Gervang, Chun Jiang, Alison Lee

Building animation tooling into the kepler.gl UI

This project provides the ability to sequence animations and generate videos in kepler.gl using an easy magic keyframe UI. It integrates a WIP video library, hubble.gl, into kepler.gl delivering instant videos, right to your downloads! It demonstrates the new luma.gl Timeline and KeyFrames classes.

We were challenged with striking a balance between simplicity and functionality in the UI design, by writing new UI components into kepler.gl, and by figuring out how to integrate the necessary parts of luma.gl, deck.gl, kepler.gl, and hubble.gl together.

Citymorph

Xiaoji Chen, Jerome Cukier
Best use of frameworks prize

From the Movement Speeds dataset, we can deduce how much time it takes, on average, to traverse street segments at various times of the day. We can use that data to morph the maps of cities and from one given point, reposition all street intersections according to how much time it would take to go there.

One interesting aspect of this project is that we did the required graph traversal directly in the GPU.

(The interactive version of this project will be coming shortly to the deck.gl showcase.)

Hex Hedgehogs

Nick Rabinowitz, Ib Green

The Hex Flow project was intended to prototype visualization approaches for city-level trip flow patterns, using the H3 library and deck.gl. Using several weeks of anonymized routes from Jump Bike data, we aggregated flow patterns by hour of week for every H3 cell in the city, then built an interface that could display flow as an animated vector field.

The primary challenge was to aggregate tens of thousands of routes into a format that was both performant and visually comprehensible. Our final version included both offline and runtime aggregation, including multi-pass smoothing, to generate an H3-based vector field for each time slice and interpolate between them.

Validating the data processing and visualization would have been very difficult without knowledge of the city in question. We knew we were on the right track when we could see the clear bike commute patterns up and down Market Street at appropriate times!

Map Collage

Yang Wang, Jian Huang, Ravi Akkenapally

Map Collage is like photo collage, but (wait for it) for maps.

This consolidates multiple sub-maps into one canvas with dynamic boundaries generated by the underlying data. It frees you from constant zooming in and out when examining multiple places-of-interest with limited screen space (e.g. on mobile devices or in a UI widget).

The hardest part of the project was to interactively and dynamically generate the boundaries of each sub-map.

vis.gl

Uber Visualization's open-source frameworks

Thanks to Chris Chua and Wayne Cunningham

Jérôme Cukier

Written by

data visualization person at @uber. More about us at http://vis.gl

vis.gl

vis.gl

Uber Visualization's open-source frameworks

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade