I previously posted two articles where I described some of the application features. Both articles are the following:

• Animating 40 years of California earthquakes
• Kepler.gl + Dropbox = Save and share your maps

In this article we are going to describe the export map feature in Kepler.gl.

Let’s create a simple map

In order to export our map, you first need to create a map. Kepler.gl website has some predefined maps:

• visit Kepler.gl earthquake demo

The new map will look like the screenshot below, showing all California earthquakes over the past 40 years.

Once you are happy with the map and all the layers you can create on it (user guide), let’s move on to exporting the current visualization by clicking on the share button (top left corner),

upon clicking the Share button, you will be provided with a list of options as shown below.

Click on Export Map.

After clicking on Export Map, Kepler.gl will show a modal dialog where you can select the format of your exported map. As shown in the following screenshot

Kepler.gl provides two different options:

• HTML: create a single HTML file of your map with data and configuration.
• JSON: create a JSON file with your current map data and config. You can later load it back to kepler.gl

Export Map as HTML

The default export map option is HTML, see HTML export modal dialog image. As part of HTML export options, you can provide a Mapbox token to be saved in the HTML file.

If you don’t provide a Mapbox token, Kepler.gl will use a temporary one which can expire later. We recommend to use your own Mapbox token.

If you don’t have an access token when you export the map, you can always create a new token and update the generated HTML file later one when necessary.

Data and configuration will be inlined in the single HTML file. You can use it as a static page and share it with other people.

The generate HTML file can be pretty big since it contains all map data.

Export Map as JSON

JSON is the second available option to export your map. Once you click on JSON button, Kepler.gl will show the following modal window.

The lower part of the modal dialog shows the current map configuration.

The map configuration is coupled with loaded datasets; each part of the configuration will contain a dataId which will refer to one of the loaded datasets.

Once you click on Export, Kepler.gl will create a JSON file containing both map configuration and data. The newly generated file can be used to recreate our original map. See below

The generate JSON file can be pretty big since it contains all map data.

Conclusions

In this post we reviewed the Kepler.gl export map functionality to create an HTML or JSON file.

HTML export can be really useful if you want a static representation of our map to include on your website, share it with other users or visualizing it offline on our computer.

JSON is a lean representation of our map and the file can be stored in a CDN, share with other people and load it later to reproduce the exact same map.

Exporting map and data is part of the core abilities Kepler.gl provides and we are continuing working on improving and adding new features.

If you want to know more about Kepler.gl export features, check the user guides.

Kepler.gl: Export Map was originally published in vis.gl on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this post, I will cover new Kepler.gl functionality which allows users to save and share maps using Dropbox.

Background

After launching Kepler.gl, we received a lot of feedback from users about the way they use the tool and what they would like to see in the future.

While going through feedback from users, we noticed an interesting trend where users were asking for functionalities to save and share their maps with other users.

As a workaround to the lack of the cloud storing feature, Kepler.gl has always provided the ability to export map (configuration and/or data) to CSV/JSON files.

We began looking into possible options to store user maps but with the strict requirement that users must always be in control of their data and data should always be living on users’ browser or cloud accounts without using any back-end services to handle operations.

Sharing a Map

Users are able to create beautiful maps with Kepler.gl and they want to share them with other users.

Until now, sharing maps was really tricky because there was no ability to store data and configuration in the same file. To workaround this limitation, users had to share Kepler.gl by exporting the map configuration and sharing both files (data and configuration) with other users.

Kepler.gl should provide the ability to easily share maps with other people without having to worry about downloading and re-uploading files; at the same time, the application must be aware of users’ data privacy. As a reminder, the Kepler.gl data policy is as follows:

Kepler.gl is a client-side application with no server backend; data lives only on your machine/browser and no information or map data is sent to any server.

Having the Kepler.gl data policy in mind, we had to come up with a solution that did not use a backend side component and gave users control over their own data..

After reviewing a few options, we implemented the Map Saving functionality using Dropbox as cloud storage. Read below for details on how to use the new feature.

Let’s map it!

Now, we have introduced all actors in this picture, let’s actually start working on a new map and take advantage of new save and share functionality:

• Create a Dropbox account if you do not have one already.

1. Once you have your Dropbox login credentials, visit Kepler.gl and click Get Started to create a new map. For the sake of this tutorial, we are going to use one of the provided samples to generate a map and save it. Click Try Sample Data.

• Once all samples are loaded, click NYC Taxi Trips (or a different example/your own custom data).

• Now that we have a spectacular view of NYC taxi trips, and are ready to share, we click the Share button. The button will provide a list of share/export options. Click Share Public Url.

• The saving modal dialog provides a list of third-party storage options (currently only Dropbox). Click Dropbox Login (if you have already logged into Dropbox through Kepler.gl you will see Upload).

• Kepler.gl will now open a new modal window which allows users to log into their Dropbox account safely using OAuth. Once successfully logged in, the new window will automatically close and the Dropbox Login button will turn into Upload.
• Click Upload and Kepler.gl will start uploading your newly created map into your Dropbox Account. When the operation is complete, you can see your newly saved map URLs (kepler.gl permalink and map raw file).

Now, your map is saved and you can share other people or social media.

Conclusions

Saving and sharing will save time when you create and share maps with other users. Users can also build on top of their existing works without starting from scratch.

We are always looking for feedback in order to improve Kepler.gl and cover new use cases.

Feel free to check out the Kepler.gl roadmap and if you have new ideas or recommendations feel free to create a new Github issue.

Kepler.gl + Dropbox = Map Save & Share was originally published in vis.gl on Medium, where people are continuing the conversation by highlighting and responding to this story.

Many years ago in college, I decided to take a Computer Graphics class. One of the assignments during the class was to create a visualization using any type of scientific data.

Data

One day, while reading the news, I noticed a small earthquake had happened in California. I decided that earthquake data would make for an interesting visualization.

I chose to use data from the Northern California Earthquake Data Center (NCEDC) , an organization that has measured and made available all California earthquake records from 1967 to the present. Back in the day I used OpenGL to build the earthquake visualization and it looks “kind of” good (fortunately I wasn’t able to find screenshots).

Several years passed, technology improved, and I found myself wanting to recreate this visualization with a modern visualization tool, specifically Kepler.gl, a WebGL based app developed by the mad geniuses at Uber.

Creating the earthquake visualization was significantly easier and quicker this time around.

Creating the dataset

I was able to retrieve earthquake records from NCEDC which had not abandoned it’s 50 year mission of capturing earthquake data. It provides an API (http://service.ncedc.org/) to fetch earthquake records in the following format:

There is an enormous amount of seismic data available through this API, not all of which counts as something we might consider an earthquake. Fortunately the API allows users to filter by parameters such as magnitude.. This is my final query:

Using the above query I created an earthquake dataset of (~55000) by filtering it to contain only 2.5+ magnitude earthquakes. I downloaded it as a CSV file.

Display

The NCEDC recordset was well shaped for visualization with Kepler.gl and didn’t require and manipulation.

Each row contained:

• Latitude
• Longitude
• Magnitude
• Magtype
• Etc…

Without adjusting parameters this is what kepler.gl displayed immediately after loading in my CSV (Figure 3).

I was impressed that the application was able to automatically detect geo fields, the `Latitude` and `Longitude` columns, in my dataset particularly since kepler.gl is entirely browser-based — nothing is sent to remote services. The visualization of all ~55000 data points showed up in just a few seconds without crashing the browser.

Customization

At this point, I thought “this is nice but I need to gather more information about the dataset.” I decided to adjust kepler.gl layer configuration to increase the clarity of the results.

kepler.gl can customize several attributes of your visualization, e.g. point radius/color, so I began by updating the properties of “artwork”. After few really attempts, I decided to customize my point layer based on the magnitude of each single earthquake. At each point, the layer radius and color would be determined based on the magnitude of the particular earthquake, Figure 4.

And after updating few settings I was able to create the following visualization:

The new created visualization is very intuitive and provide a quick and easy way to spot stronger earthquakes in the dataset.

With only few minutes of actually using kepler.gl I was able to replicate the work I did back in college with greater clarity and a significantly more professional aesthetic.

Most importantly, by looking at the above map, you can spot big earthquakes and understand their distribution.

Filters

After I was satisfied with the color palette and various settings, I decided to start using some filters.

kepler.gl has the ability to filter on each column of loaded dataset, for this dataset, possible options were lat, long, and timestamp. I decided to create a filter using the timestamp when the earthquake occurred, Figure 6.

While using time stamp as a filter, kepler.gl performed a domain analysis on the specified property values and generated a histogram to better understand the value spectrum — so I did not have to squint at the map and guess about the optimal distribution.

By clicking on the clock icon on the right top of the filter item panel, shown in Figure 6, the application shows a timeline panel that can be used to scrub through earthquakes over time, shown in Figure 8. This enables a deep understanding of how the data changes over time.

Conclusions

After spending several hours working on large dataset in kepler.gl I was struck by the app’s performance in terms of data loading, data manipulation, map interactions and filtering.

The smart functionality that automatically detects columns is unbelievably useful not just in terms of saving time, but also for detecting insights in the dataset which otherwise may be unknown and/or taken to time to be discovered.

Animating 40 years of California Earthquakes was originally published in vis.gl on Medium, where people are continuing the conversation by highlighting and responding to this story.