Tutorial – How to create an animated visualisation of earthquakes data with Kepler.gl

Tutorial – How to create an animated visualisation of earthquakes data with Kepler.gl
Geo-temporal visualisation of earthquakes between 13 Dec 2021 - 11 Jan 2022 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 earthquakes' location that takes advantage of one of the tool's best capabilities: geo-temporal playback. You can follow along and adapt this tutorial to other projects where time is of the essence, such as the ones relating to the COVID-19 virus spreading.

2 Prepare the data

Choose → Prepare → Create → Share

I retrieved the dataset on earthquakes from the Real-time Notifications, Feeds, and Web Services from the USGS Earthquake Hazards Program of the U.S. Geological Survey (USGS).

How did I choose the data format from all the available options? Well, Kepler.gl accepts three different data formats: Comma Separated Values (CSV), JavaScript Object Notation (JSON) and GeoJSON. For this tutorial, I used the Spreadsheet Format. I could've used the data in GeoJSON format instead, but this format does not allow labels and icons in the visualisation.

⚠ī¸
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).

Start by downloading the following dataset: Past 30 Days – All Earthquakes to your computer.

Graphical user interface, text, email

Description automatically generated

Alternatively, access the dataset used in this tutorial (retrieved on 11.1.2022) from here.

Open all-month.csv in Excel (or equivalent) to inspect the data and add an attribute. Start by turning text into columns.

⚠ī¸
If the data is already showing in columns, skip the next three steps.

To do so, Select column A, then go to Data > Convert Text to Columns. In the wizard, select Delimited and click Next.

Then, choose Comma and click Next.

Graphical user interface

Description automatically generated

Finally, choose General and click Finish.

Table

Description automatically generated

Notice the presence of two crucial attributes: latitude and longitude. These are the ones that will enable you to map the earthquakes.

Now, add a column called icon, and fill it with the value alert. You'll understand why in a few steps.

A computer screen capture

Description automatically generated with medium confidence

Go to File > Save As and give a more meaningful name to the file (something like earthquakes-past30days-[date]).

Close Excel.

3 Create a visualisation

Choose → Prepare → Create → Share

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

ℹī¸
The app does not seem to work correctly in Safari. Hence, I created this visualisation in Chrome.
Graphical user interface, website

Description automatically generated

A modal window opens for you to add data.

Graphical user interface

Description automatically generated

In the Load Files tab, click browse your files and locate the earthquakes-past30days-[date].csv file.

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

A screenshot of a map

Description automatically generated with medium confidence

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

Graphical user interface, text, application

Description automatically generated

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

A screenshot of a computer

Description automatically generated with medium confidence

Close the data table.

Layers

Notice the two layers created from the data table: point and icon.

Click the trash bin next to icon and remove the layer, for we don't need it.

Graphical user interface, application

Description automatically generated

Rename the Point layer to Earthquakes by double-clicking on the name.

Graphical user interface, application

Description automatically generated

Click on Layer settings (the arrow pointing down).

Graphical user interface, application

Description automatically generated

Here, you'll configure how the layer is displayed on the map.

Under Basic, you can see the layer type has been defined as Point.

Notice how the Lat and Long fields (under Columns) are already set up to the corresponding fields (latitude and longitude).

Graphical user interface, application, Teams

Description automatically generated

We want the data to show as icons on the map. Hence, click on Point and change to Icon.

A screenshot of a computer

Description automatically generated with low confidence

Now, icon is expecting the icon field from the dataset (remember the column we added to the CSV file earlier?).

A screenshot of a video game

Description automatically generated with medium confidence

If you click on How to, you'll discover a list of other icons supported by Kepler.gl.

Graphical user interface, application, table, Teams

Description automatically generated

Choose the icon field to finish setting up the Basic section.

A screenshot of a computer

Description automatically generated with low confidence

Click on the name of the next section, Color, to expand all options.

Graphical user interface, application

Description automatically generated

You're going to keep the default colour palette, but with a couple of modifications. First, click on the palette and decrease the steps to 5 (for a clearer distinction between hues). Then, activate Reversed.

A screenshot of a cell phone

Description automatically generated with medium confidence

Now set Color Based On to the magnitude field (mag).

Graphical user interface, application

Description automatically generated

Hence, the darker colours will represent an earthquake of a higher magnitude.

The Color section is now set up.

Click on the top of Radius to expand the section.

Start by setting Radius Based On to the magnitude field (mag). Then, set the custom input to an interval between 10 and 100. The icons' size on the map, reflecting the earthquake's magnitude, will range between these two values.

Graphical user interface, application

Description automatically generated

The radius section is now set up.

Click on Label to show all options.

Set Label 1 to place, Font Color to a dark grey, Text Anchor to middle, and Alignment to bottom. An informative label will complement the location of each earthquake for a better understanding of the events.

A screenshot of a computer screen

Description automatically generated with medium confidence

Now that we've fully customised the layer, it is time to set up a couple of filters on the data. The filters will be applied to two attributes, magnitude and time, to limit the earthquake events shown in the visualisation.

Filters

Click on the filter icon (the second one, after Layers).

Graphical user interface, application

Description automatically generated

Under Filters, click on Add Filter.

We want to filter the earthquakes data so that only those with a magnitude bigger than 4.5 show. In Select A Field, choose mag. Now enter 4.5 on the lower limit.

Graphical user interface

Description automatically generated

Add a second filter to enable playback of geo-temporal trends. To do so, in select a field, choose time.

A screenshot of a video game

Description automatically generated

You have now added a temporal dimension to your data visualisation. Notice the time slider showing on the lower right corner.

A screenshot of a video game

Description automatically generated
💡
If the timeline doesn't show on the lower right corner of the map, click on the Time Playback clock icon on the filter.

As you might have noticed, both the speed and quantity of points shown on the map are not easily followed. Start by moving the right bar toward the left so that the data displayed on the map corresponds to a smaller time interval at a time.

Chart

Description automatically generated

Then, click on the rocket icon on the lower right and enter 0,05 so that the animation plays slower.

Chart

Description automatically generated

Now, click on y and change to depth. This will give the viewer additional information on the earthquakes more visually.

As you hit the play button, the map shows the earthquakes dynamically.

Interactions

Click on the third icon, Interactions. By default, the tooltips are active.

A screenshot of a computer screen

Description automatically generated with medium confidence

We will keep these tooltips as we want to provide further information on each event as the viewer hovers over the points on the map. However, we will choose a different configuration of attributes.

To do so, click on Clear All. Now click on Select a field and choose, in order: time, place, mag and depth.

Graphical user interface, application, Teams

Description automatically generated

You can also activate the geocoder so that the viewer can enter a location on the top right corner and see earthquakes nearby.

Text

Description automatically generated with medium confidence

Basemap

Click on the Base map icon (fourth from the left). Under Map Style, change dark to light. The icons and labels now come to life.

Graphical user interface, application

Description automatically generated

To remove noise from the basemap and strip the basemap down to the essentials, turn off all base map layers except for Water and Land.

Graphical user interface, text, application

Description automatically generated

Finally, let's add a legend to the map. Go to the last icon on the right corner and click on Show legend.

Graphical user interface, website

Description automatically generated

Click on the blue pin to lock the legend in the lower right corner.

Graphical user interface, website

Description automatically generated

That's it; you're done building the visualisation! It should look something like this.

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.

A picture containing text, device, meter, gauge

Description automatically generated

In the modal, select Dropbox > Login.

Graphical user interface, application

Description automatically generated

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

Graphical user interface, application

Description automatically generated

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

Graphical user interface, application

Description automatically generated

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.

Graphical user interface, application

Description automatically generated

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

Graphical user interface, application

Description automatically generated
  • 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 upload the JSON file from your computer.

Share Map URL

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

Graphical user interface, text, application

Description automatically generated

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

Graphical user interface, application

Description automatically generated

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