Crafting Data-Driven Maps
At Uber, we use maps for everything — visualizing millions of geo data points, monitoring road conditions, and advocating for policy change in cities around the world
Over the last few years we have experienced immense growth. As a result, we have many teams across the organization producing map visualizations for a wide range of needs. We saw a need to create a unified system to guide the creation of consistent, high-quality, data-driven maps.
The Challenge(s)
Crafting geospatial visualizations at scale isn’t your everyday design task. The complexity and lack of tooling in this space makes it something of a black art. Nevertheless, there aren’t many companies in the world that have the rich geo-resources Uber has, so we were excited to explore this creative avenue.
Many teams, many maps
The way we’ve made maps in the past worked when the company was smaller. Each map was created for specific purpose. However, as the company grew it was no longer enough to have individually great maps. We needed a framework that made sense for a global scale.
We thought it would be useful to have a starting point for teams across the org to scale up and make better maps, faster.
The image above isn’t an exhaustive list, but as you can see, our maps were, well — all over the map. Individually, each map is successful, but as a family, they lack consistency. That was a core issue we wanted to address.
Lack of tooling
We immediately cracked open Sketch, eager to get started on this meaty problem. But after staring at the screen blankly for a few minutes, the questions started rolling in.
“How do we edit vector maps in Sketch?”, “Should we use Illustrator?”, “How can we simulate thousands of data points?”, “Do we need to hand-draw roads?”
“We can’t use any of the tools we know…this is going to take forever…”
It turns out that Sketch, Illustrator and virtually all of the tools we were comfortable with don’t have much support for common GIS file formats and common cartographic tasks.
Not being able to use familiar design tools put us a little outside of our comfort zone. We eventually overcame these constraints by learning new tools and building custom software, which I’ll get to a little later.
Global scale
To further compound the complexity of this problem, we needed our framework to scale up to the needs of 400+ cities around the world. The vast collection of different geographic features and data types put this design problem into a class all its own.
The Process
Our process was largely characterized by trial and error and by stringing together an unlikely cast of tools to get the job done. Here are some of the highlights of the project.
Creating a foundation
A large portion of our time was spent on defining base map themes. We knew these themes would serve as the foundation of the entire project, so getting them right up front was critical.
We optimized these base maps for data visualization and focused on three main areas:
Detail: We fine-tuned the amount of detail you see at any given zoom level. We went with a relatively minimal approach so the data didn’t compete with the base map.
Color: Starting with Uber’s brand colors, we produced various shades and tones for different map elements. The dark theme was inspired by the night-mode map used in our driver app. The biggest challenge was creating enough contrast between all the different elements that held up for a variety of screens and devices.
Typography: the type system uses our brand typeface (FF Clan) 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.
Tools used
Most of the heavy lifting during this phase was done in the the amazing Mapbox Studio. This web-based tool makes it relatively painless to select all the features on a map and set their fill colors, outlines, icons, etc. It also has awesome support for setting styles based on zoom level.
Bring on the data
Once we had a first cut of our base maps, we began adding data layers. Luckily for us, sourcing the data wasn’t hard, we used our internal systems to generate massive files containing all the geo data we needed. With the data in hand we started with our two most commonly used visualizations:
Scatter plots & Hex Bins
The scatter plots show individual data points, while the hex bins are great for showing density when there are too many overlapping points. The tricky part was finessing the appropriate sizing, opacity, and stroke thickness for points and hexes at different zoom levels.
We take our data privacy and security very seriously at Uber. For most public (and many internal ) use cases we prefer hex bins or some type of clustering aggregation to obscure any potential privacy concerns that come with showing individual data points.
Color scales
Another component of our framework is color. Our internal teams perform extensive data analysis and rely on maps to help them make decisions. Color scales help with finding outliers, trends and ‘needles in the haystack’.
We use one of our core brand colors (Aqua) as the primary hue in most cases, but some datasets required a sequential color scale to accent the extents (highs and lows). We also created a diverging color scale that is great when you want to accent the mean of your dataset and expose data that significantly ‘diverge’ from the norm.
Tools used
While Mapbox provided everything we needed to style the map itself, we found Carto to have better support for creating custom data-driven styles (although I believe this is coming to Mapbox soon). Carto is also more flexible about the types of data you can upload for visualization. When things got really intense, we had to lean on QGIS for custom filtering, projections and manipulation.
Taking it a step further
At this point we were happy with overall creative direction, but it was tedious and slow to create a single map visualization. Next we needed a way to accelerate the process and scale it up.
Trip lines
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. We were hoping there would be a “Generate lines” checkbox in one of our new-found tools, but that wasn’t the case.
To generate the lines, we created a custom tool with JavaScript, D3.js, and the Mapbox directions API. This tool allowed us to take our massive CSV files and generate geo-based path data with a single drag and drop. Now we can generate 50,000 individual trip paths in about three minutes, and then import them into CARTO or QGIS for styling.
Choropleths
Choropleths 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.
Choropleths and Hex Bins are both polygonal in nature, so we gave them the same visual treatment. The biggest struggle with this type of visualization was finding geographic boundary files to experiment with.
Custom Tools
We created custom tooling to facilitate faster styling iterations and to quickly scale our design decisions to hundreds of locations around the world.
We found ourselves spending a lot of time sourcing geo boundary files and tracking down trip lines which made it painfully slow to create a single map visualization.
These tools helped speed up our workflow by exporting complex scenes with thousands of individually rendered paths directly to GeoJSON and SVG files. We’d then take those files and import them into other tools like Carto, Mapbox, and QGIS for further styling and manipulation.
The Results
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. In the end, these guidelines were delivered as an internal framework that teams across Uber can use as a common starting point for creating high-quality, data-driven maps.
Parting thoughts
Though it can be daunting to tackle problems with this scale and complexity, having such an amazing body of data to pull from is one of the greatest advantages of designing at Uber.
For me personally, this project made me feel like a kid in a data-candy store. In the past, finding an opportunity to explore what’s possible with this volume of data would have been nearly impossible. Putting this framework in place allowed us to explore many creative avenues and visualize the data in so many new and interesting ways. There was never a dull moment from start to finish.
We’re hiring — Our cartography team is looking for talented designers and design engineers to join the team! If you’re interested in learning more about Uber Design send me a note or check out our open design roles on our careers page.
