Whether you’re visualizing millions of trips, watching events unfold in real time, or just curious what your city’s data looks like, we created a design system for crafting beautiful data-driven maps.
Data visualization teamJoin our team
Team members / roles
With so many teams across the organization producing maps, we saw a need to create a framework for producing consistent, high-quality data-driven maps. We also needed the framework to scale up to the needs of 400+ cities around the world.
One of the first things we did was take inventory of maps that had been created in the last year. Individually, each map is successful, but as a family they lack consistency. This was a core problem we needed to address.
It was challenging to creating enough contrast between different elements that held up on a variety of screens and devices.
We set out to bring consistency to all maps being created at Uber, and to elevate their overall quality. From a business perspective, we believe consistency is a core tenet of quality. Quality isn’t the easiest thing to tie back to a business metric, but it is tightly coupled with trust. We want drivers and riders, as well as policy makers and civic leaders to be able to trust implicitly in our maps and the data they bear.
Our process was characterized by trial and error, and by stringing together an unlikely cast of tools to get the job done. Here are some key elements.
A lot of our time was spent defining base map themes. We knew these themes would serve as the foundation for the entire project, so it was critical to get them right. We wanted to optimize these base maps for data visualization, so we focused on three main areas.
We fine-tuned the amount of detail you see at any given zoom level. We went with a relatively minimal approach so that the data wouldn’t compete with the base map.
Starting with Uber’s brand colors, we produced various shades and tones for different map elements. For example, the dark theme was inspired by the Night Mode map used in our driver app.
We created a type system that leverages our brand typeface to pull it all together. In the spirit of consistency, we went with a relatively simple type ramp to reduce the amount of variation between our maps.
Once we had a first cut of our base maps, we began adding data layers. Lucky for us, sourcing the data wasn’t hard. We used our internal systems to generate massive data files containing all the geo data we needed. With the data in hand, we started with our two most commonly used visualizations:
Scatter plots show individual data points and are great for showing volume of activity in an organic way.
Hex bins are great for showing density when there are many overlapping points.
A step further
At this point we were happy with the overall look we’d achieved, but creating a single map visualization was tedious. We needed a way to accelerate the process and scale it up.
Trip lines are one of the signature visualizations shown in our CEO’s TED Talk, and featured in a variety of publications. The challenge is that the actual trip path is not baked into the raw data. It needs to be generated in code based on an array of latitude and longitude points. To aid our process, we built custom tools to quickly generate these visualizations for over 400 cities.
Choropleth maps help visualize how a metric or value varies across a geographic area. For this case, we used US postal codes as our geographic boundaries and infused various datasets to create the color variation.
Over the course of this project we produced hundreds of maps to fine-tune the details—colors, typography sizes, opacity, line thicknesses and many more. These guidelines were delivered in an internal framework that we share across teams for creating maps.