Mapbox in Chart Studio

Mapbox Access Token

Before you can create a visualisation with mapbox, you must ensure that you have a mapbox token and that it is added to you Plotly account. If you need to do so, check the Mapbox Setup tutorial.

Step 2

Try an Example

You can also use the data featured in this tutorial by clicking on 'Open This Data in Plotly' on the left-hand side. It'll open in your workspace.

Step 3

Add Your Data to Plotly

Head to Plotly’s new online workspace and add your data. You have the option of typing directly in the grid, uploading your file, or entering a URL of an online dataset. Plotly accepts .xls, .xlsx, or .csv files. For more information on how to enter your data, see this tutorial.

For this tutorial, we are using the USGS Earthquake dataset, which can be added by clicking 'IMPORT' and selecting 'By URL'. Then paste in the URL: https://raw.githubusercontent.com/bcdunbar/datasets/master/earthquake_march_2017.csv

Step 4

Create Chart

After adding the data, go to GRAPH on the left-hand side, then 'Create'. Click 'Chart Type', then choose 'Satellite Maps' in the 'MAPS' column.

Now, in the panel on the left-hand of the screen you ought to see options to select your variables. Firstly, click the ‘Latitude’ dropdown and select the column name ‘latitude’ and then for the longitude dropdown select the column name ‘longitude’. This ought to have filled scatter points over the map. Additionally, click the ‘Hover Text’ dropdown and select the column variable ‘place’, which will display the column values when a user hovers over a data point. Finally, select the variable ‘mag’ (magnitude) from both the remaining dropdown menus (‘Size’ and ‘Color’).

Step 5

Style Chart

Now, click ‘Traces’ under ‘STYLE’ and select the color scale you wish to apply to the data points. For this tutorial, select yellow to blue. In addition, to color scales there is the option of reversing the scale and toggling the visibility of the color bar. Here, leave the default values of ‘Hide Color Bar’ and ‘Normal’ scale.

In the ‘Values Shown On Hover’ section, uncheck the ‘Lat’ and ‘Lon’ boxes, which will prevent the latitude and longitude being displayed when a viewer interacts with a data point.

Next, we can make changes to the current Mapbox features.

For this tutorial, we will make a borderless map with a darker style. To do this, first, click ‘Layout’ under the ‘STYLE’ tab. Now, to change the map style to dark, click ‘Map Style’ and select ‘Dark’ from the ‘Preset Styles’. This ought to have changes your layout from the default light to the darker layout as seen below.

As you may have noticed, majority of the data points – earthquakes – occur around the pacific ring (commonly known as the ‘ring of fire’). Thus, to set a better default position for the viewer, click ‘Map Positioning’ and enter ‘19’ for ‘Center Latitude’, ‘-155’ for ‘Center Longitude’, and finally increase the ‘Zoom Level’ to ‘2’.

As previously mentioned, in this tutorial we want to make a borderless map. Thus, select the ‘Margins and Padding’ panel. Here, enter ‘0’ in all the available options (Top, Bottom, Left, and Right).

No we have finished making changes to the traces and layout, we can add some annotations and notes to provide more information about data source and statistics for the viewer. To add these, click ‘Notes’ under the ‘STYLE’ tab and select the blue ‘+ Annotation’ button. From the dropdown select ‘source to data’.

Next, enter ‘Source: USGS’ in the text box. It will also provide you with the option to enter a URL/link. You can paste in the link https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php. Finally, change the font by clicking the ‘Typeface’ dropdown and selecting the font ‘Raleway’, then change the ‘Color’ of the text to white.

Now add a second annotation by clicking the blue ‘+ Annotation’ button again, but this time select ‘caption’ from the options.

Here, you can enter your caption; for this tutorial, paste in “Earthquakes: 2017/03/04 - 2017/04/04 size and color are representative of magnitude” and make the first section bold. Again, like before, change the ‘Typeface’ and ‘Size’ to ‘Raleway’ and white. It is also important to note that you can adjust the vertical and horizontal position of the caption, however we’ll leave its default value in this tutorial.

Step 6

Save and Share

Your chart is now done! Click SAVE on the left-hand side.

After giving your file a name, select your PLOT and DATA as 'Public' or 'Private'. For more information on how sharing works, including the difference between private, public and secret sharing, visit this page.