Tutorial – How to create a 4D visualisation of urban mobility data with Kepler.gl

Tutorial – How to create a 4D visualisation of urban mobility data with Kepler.gl
4D visualisation of uber trips in Lisbon, weekday vs weekend, in Kepler.gl

1 Choose the tool

Choose → Prepare → Create → Share

There are two compelling arguments for you to use Kepler.gl: it is free and produces high-impact visualisations of location data. Add that to being a browser-based tool, and you have a winner.

This tutorial demonstrates how I created a visualisation of mobility in Lisbon that takes advantage of two of the tool's best capabilities: Split Map and 3D.

You can follow along and adapt this tutorial to your projects: you can use a side-by-side comparison of a map area for temporal changes in an area's biodiversity and 3D to enhance the communication with the viewer.

2 Prepare the data

Choose → Prepare → Create → Share

I retrieved a dataset on urban mobility, more specifically, on Uber trips, from Urban Movement. Since I was looking into studying Lisbon's mobility - and the differences in traffic between workdays and weekends - I found precisely the data I needed here.

Feel free to choose a different city by clicking on the arrow next to Lisbon (other options include New Delhi, Nairobi, Brussels, amongst others).

⚠ī¸
Kepler.gl is a client-side only application, which means the data you upload is only stored in your browser. No information or map data is sent to any server, which can be interesting if you work with restricted data or have privacy concerns (e.g., health data). Consequently, there is a 250MB limit on how much data you're allowed to upload. So, for datasets larger than 250MB, you should directly load them from a remote URL (custom or from Dropbox/CARTO).

Head to the lower-left corner of the page and click Download data.

⚠ī¸
You might be asked to fill in a few personal details before downloading the data.

Download the lisbon-traversals.csv file (or the one of your chosen city) to your computer. Alternatively, get the same dataset used in this tutorial from here (retrieved 25.1.2022).

ℹī¸
For more details on the methodology behind this dataset, look at New Mobility Heatmap Calculation Methodology.

CSV is one of Kepler.gl's accepted data formats, so we're good to go. No further data transformation is necessary.

3 Create a visualisation

Choose → Prepare → Create → Share

Open https://kepler.gl/ in your browser and click on GET STARTED.

ℹī¸
This tutorial was developed using Kepler.gl version 2.5.5.

A modal window opens for you to add data.

In the Load Files tab, click browse your files and locate the lisbon-traversals.csv file.

Once the dataset has been uploaded, it shows under Datasets on the left-hand side panel.

Hover over the dataset name and click on the first icon on the right to Show data table.

Inspect the data, focusing on the columns (attributes).

Notice the presence of the attribute wktGeometry. This is the one that will enable you to map the trips. Additionally, the attribute hexid identifies each hexbin.

💡
Hexbins split the map area into several parts (hexagons).

Close the data table.

Layers

Two layers were added under Layers after uploading the dataset: lisbon-traversals and hexid. Since we're not going to use the former, remove it.

Now, let's configure the hexid layer by clicking the Layer settings arrow next to it.

hexid's layer type is H3 and uses the hexid attribute from the dataset. More information on it is here.

Click on Color. Change the palette to purples, Steps to 5, and enable Reversed.

Now, enable Height (this will be necessary to allow 3D, later) and click on Height to configure it. Then, set Height Based On to traversals (which stores the number of traversals in each hexbin).

End the customisation of this layer by renaming it. Select the current name and replace it with uber trips weekday.

Filters

Click on Filters. Here, you'll create a filter to show only the traversals on weekdays (excluding the ones on weekends for now).

Start by clicking the Add Filter button.

In Select a field, choose dayType.

In Enter a value, choose weekday.

3D

You're now going to enable 3D. Head to the icons on the far right and click on the second one (3D Map).

You are now seeing weekday traversals in 3D.

Dual map view

If you remember, the idea behind this visualisation is to compare weekday traffic vs weekend traffic. To do so, Switch to dual map view by clicking on the first icon on the far right.

Now, let's configure the map to show weekend traversals. Head back to Layers and click Add Data.

The Add Data To Map modal opens. Add the lisbon-traversals.csv file again.

⚠ī¸
The reason why you're adding the same dataset again is that we're applying different filters to each map on the split view (weekday vs weekend).

Notice how this second dataset has a different colour label from the first one you added. This will help you identify which layer is using which dataset.

In the following images, you'll find that the first dataset (the one used to map weekday traversals) has a purple label, whereas the second one (the one you're going to use to create the weekend map) has a blue label.

From here forward, you will repeat the process you followed for the first dataset. Start by removing the lisbon-traversals layer.

Now rename the layer to uber trips weekend.

Under Color, choose a pink palette, change the Steps to 5 and enable Reversed.

Enable Height and set Height Based On traversals.

Go to Filters.

Click on Add Filter – the new filter will appear on top of the existing one. Set the Data Source to lisbon-traversals.csv (the one with the correct colour label, in this case, blue), in Select a field choose dayType and set Values in to weekend.

Now that the filters for both maps are set up, you can finish setting up the split view. Click on the Show layer panel icon (far right).

Unselect the uber trips weekend layer on the left-hand map and unselect the uber trips weekday layers on the right-hand map.

Enable the legend on both maps by clicking on the Show legend icon.

Click on the blue pin to place the legend in the lower right corner of the visualisation.

Click on the blue icon next to Visible layers to hide the layer list on both maps.

Click on the arrow next to the left side panel to collapse it and get a better view of both maps.

Now feel free to zoom in to an area of interest and compare weekday and weekend traffic on particular roads (e.g. the ones by the University of Lisbon).

💡
Notice the tooltip that appears when you hover over a hexbin.

That's it; you're done building the visualisation!

4 Share your work

Choose → Prepare → Create → Share

Save


Kepler.gl gives you the option to save your map to cloud storage. To do so, you'll need a Dropbox or CARTO account. Here, we'll exemplify saving the map to Dropbox.


Click on the storage icon (third from the top) and then click Save.

In the modal, select Dropbox > Login.

Login with your credentials. From now on, Kepler.gl will be linked to your Dropbox account.

Once you're signed in, you can enter the map's name and description. Then hit Save.

You'll find the map you saved in the Kepler.gl Web App folder in your Dropbox account.

💡
At a later stage, when you open Kepler.gl again, you can retrieve your map by selecting the option Add Data To Map > Load from Storage (from the initial modal) and login into your Dropbox account.

Share

When you create a visualisation with Kepler.gl, you can choose to export the map as an image, export the data, export the map to HTML or JSON, and share a public URL (you'll need a Dropbox account for this too).

Here, we're going to exemplify exporting the map and share the map URL.

Export map

Click on the Share icon (the fourth option) and click Export Map.

The Export Map modal opens. Here, you're given two choices of format: HTML and JSON.

â€ĸ Choose HTML if you want to embed the map in your website (with or without edit permissions). Click Export.
â€ĸ Choose JSON if you're planning to come back to the map later and continue to work on it. Click Export.

💡
When you open Kepler.gl again, you can retrieve your map by selecting Add Data To Map > Load files (from the initial modal) and uploading the JSON file from your computer.

Share Map URL


Click on the Share icon again (the fourth option) and click on Share Map URL.

The Share URL modal opens. Click on Dropbox and add the map by clicking Upload.

A link to the map is produced and shown in Share URL.

Copy the link and open it in incognito mode. There's your map - now share away!

Here's mine 👇

Large-scale WebGL-powered Geospatial Data Visualization Tool
Kepler.gl is a powerful web-based geospatial data analysis tool. Built on a high performance rendering engine and designed for large-scale data sets.
ℹī¸
After sharing, the viewers of your visualisation will be able to interact with it entirely, i.e., adjust filters, change colours etc. However, those changes remain in the viewer's browser and will not modify your saved visualisation.

💡 Do you have a suggestion for future tutorials?

Click to open the survey