Show Sidebar Hide Sidebar

Atlas Maps in Chart Studio

Create an Atlas Map in Chart Studio

Step 1

Try an Example

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

Open data

Step 2

Add Your Data to Chart Studio

Head to Chart Studio’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. Chart Studio 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 USA Airport Traffic dataset, which can be added by clicking 'IMPORT' and selecting 'By URL'. Then paste in the URL:

add data

Step 3

Create Chart

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

chart type

Now, in the panel on the left-hand of the screen you ought to see options to select the variables. First, click the ‘Latitude’ dropdown and select the column name ‘lat’ and then for the longitude dropdown select the column name ‘long’. This ought to have filled scatter points over the map. Additionally, click the ‘Hover Text’ dropdown and select the column variable ‘airport’, which will display the column values when a user hovers over a data point.

trace values

As you can see for this particular dataset all data points appear to be in the USA, thus click the ‘Map Region’ dropdown and select ‘USA’. This simply changes the region to the USA as opposed to a global map. Below, the projection dropdown will automatically default to ‘Albers USA’.

map region

For this particular dataset, there is a variable called ‘cnt’ which represents air traffic (frequency of arrival and departures) at each airport. Thus, click the ‘Color’ dropdown and select the variable ‘cnt’. This will color each airport data point by its ‘cnt’ value and a colorbar will appear by default on the right-hand side of the plot. Viewers of the plot will be easily able to identify which are the less busy and busiest airports in the USA.

color trace

Step 4

Style Chart

To apply different features and styles to the plot click the ‘STYLE’ tab. Here, you ought to see numerous options such as Traces, Layout, Notes, etc. For now, select ‘Traces’ to apply styles to the traces.

First, in the ‘Traces’ panel select the appropriate color scale. For this tutorial, we’ve used the regular grey-red color scale. Other options that are available are the direction of the color scale, visibility, and custom range. For now, simply click ‘Show Color Bar’.

color bar

Second, in the same panel immediately below, select the ‘Diameter’ text box and enter the value ‘8’. This ought to increase the size of the data points in the plot, making it easier to discern the colour of each data point.

style data points

The last changes we will make in this panel, again immediately below, are the ‘Values Shown on Hover’ section. Here, unselect the ‘Lat’ and ‘Lon’ checkboxes. This ensures that latitude and longitude values are not displayed on hover.

show on hover

Now, click ‘Color Bars’ under ‘STYLE’ tab and then select the ‘Size and Positioning’ panel. Here, you can adjust the size, horizontal and vertical positioning, and padding. For this tutorial, simply enter the values in the text box and click the ‘Positioning Anchor’ and select ‘Left’.

color bar settings

Now, click ‘Layout’ under the ‘STYLE’ tab and then select the ‘Title and Fonts’ panel. Here, under the ‘Title’ section you can enter the plot title “USA Airport Traffic” and click ‘B’ to make the text bold. Alternatively, you can edit this in HTML by clicking the ‘EDIT IN HTML’ tab at the bottom of the text box. Another option, is to manually edit this directly in the plot by clicking where the title is situated.

styling title

Step 5

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.