Scrolly Map in Tableau and Webflow (Part 1)

Map
Beginner

Sometimes a map that stays still just doesn't cut it - for example when you want to show how things change over time. We use Tableau’s ability to create stylish maps combined with Webflow’s interactive capabilities to make a “scrollytelling” map that reveals additional information as the user scrolls down a page.

Follow the recipe’s example of mapping hydropower dams in Myanmar or easily substitute your own data.

Stats

Ingredients
Hydropower Dams in Myanmar
Tools
Google Sheets, Tableau, Webflow
Read in other Languages
No items found.

Introduction

Imagine your readers scrolling through a long article scanning for something that captures their attention. If you can show them something that visually pops and crystallises the main focus of the story - that's a sure fire way of drawing them in. In the visualization created for Frontier Myanmar's article Power Play, we center the narrative of the story around this "scrolly map" that shows how large hydropower projects are being planned along Myanmar's rivers, often with investments from neighboring countries, particularly China, all in an elaborate "power play" as the article's name suggests.

As a first Thibi recipe, we will replicate this visualization showing the geographic spread and growth of hydropower capacity in Myanmar between 2009 and 2030. We will walk you through every step and provide you with resources to reproduce the visualization exactly as seen in the original article. Along the way you will also learn design concepts and get your feet wet with two powerful tools.

1

Preparation

Getting and Preparing the Data

Getting Data 

We will create this visualization using data from the Hydropower Database provided by the IFC Myanmar. 


  1. To get this dataset, visit the Strategic Environmental Assessment of Hydropower Sector in Myanmar Resources webpage by clicking HERE.  
  2. On that webpage, click Hydropower Database to download an Excel file.


Preparing Data 

We will clean and analyze the data using Google Sheets instead of Excel because Google Sheets is free, collaboration is much easier, and it is accessible to everyone.

First, we will import data from an Excel file to a Google Sheets file. 

  1. In Sheets, create a new spreadsheet by choosing a Blank Template. 
  2. When the sheet appears, click File > Import.
  3. Navigate to the “Upload” tab on the far right.
  1. Upload the Excel file we downloaded from the Hydropower Database earlier and click Select.
  2. It will prompt import options. Among these options, choose “Replace spreadsheet”. 
  1. Click Import Data
  2. An Excel Sheet will appear. Rename it as “Hydropower Data”.

In the imported sheet, you can see many variables. Many of them are unnecessary in creating our desired visualizations. Because we are visualizing “the geographic spread and growth of hydropower generating capacity in Myanmar between 2009 and 2030,” we only need these variables: the name of the dam, the dam’s location, its hydropower capacity, and the year it was (or it will be) built. We will only keep these variables in the Google Sheet. 

  • name of the dam   -  Hydropower Plant
  • the dam’s location  -  LAT N, LON E
  • hydropower capacity -  Installed Capacity
  • the year it was (or will be) built - Actual Commissioning Year; MoEE Planned Commissioning Year

We have also prepared a Google Sheet to help you with the data preparation process. Click Here to access this sheet. 

  1. First, we will drop unnecessary variables and columns in this spreadsheet. 
  • We will only need these variables to construct visualizations: the name of the dam (Hydropower Plant), Dam’s Location (LAT N, LON E), its Hydropower Capacity (Installed Capacity), and the year it was or it will be built (Actual Commissioning Year; MoEE Planned Commissioning Year).
  • You can now delete all other variables.  

  1. “Actual Commissioning Year” denotes the years for the dams that have already been built. “MoEE Planned Commissioning Year” indicates upcoming dams. So, they are mutually exclusive, and we can combine these values in one column.
  1. Create a new column and name it “Year”. In this column, we will combine the values of “Actual Commissioning Year” and “MoEE Planned Commissioning Year” in every row. 
  1. When we drop the “Actual Commissioning Year” and “MoEE Planned Commissioning Year” columns, the “Year” column will also disappear since its values are calculated using the two former variables. We will therefore need to create a new column before deleting these variables.  
  • Select “Year” Column and press Ctrl + C to copy them. 
  • Click on an empty column beside the “Year” column.
  • Right-click the top-most cell, select Paste Special >Paste values only.
  1. Now, we can safely delete the “Actual Commissioning Year” and “MoEE Planned Commissioning Year” columns, as well as the former “Year” column. 
  2. The final format of the sheet should look like this image below:
  1. Finally, we will need to export this sheet into a CSV file, which will be imported to Tableau. 
  • Click File > Download > Comma-separated values (csv, current sheet).
  • It will download a CSV file named “Hydropower Data”. 
2

Styling

Making and Styling the Map in Tableau Public

From Step 2 to Step 4, we will use Tableau Public to create maps, bar charts and other visuals. We are using a free version in which anyone can create an interactive data visualization. 


  1.  First, we will need to connect the “Hydropower Data” CSV file to Tableau Public.  
  • Click on “Text file” under Connect > To a File
  • A table will pop up, showing that the Hydropower Dataset has already been imported into Tableau Public. 

At the top of each variable, you will see icons that look like this:



Tableau automatically classifies the data (numeric, string, date, geographical, etc). For Latitude and Longitude, you will see the globe icon, which means these are geographic data. 


  1. We will now start working on plotting the location of the dams on the map.


  • Click on the New Worksheet on the bottom left of the Tableau workbook. This is the place where you will create a single piece of visualization. 
  • Since we are making a map, let’s name this sheet “Map”. 

Note: Next to the Pages card, you will see shelves for Columns and Rows. You can drag and drop fields into these shelves to create the visualization.

The first visualization we will make is the map showing the location of dams and their capacities.

  • In the Measure card, click on the Lat N and Lon E. Tableau will automatically plot these coordinates on the map. 
  • Double click Lat N and Lon E measures from the Data pane. Tableau will automatically plot these coordinates on the map. 

Note: You will only see one dot on the map because, by default, location values are plotted by average. Since we are working with geographic data to create a map, we need to choose “Dimension” to plot all locations on the map

  • For the Column shelf, click the drop-down on the Lon E. Then select Dimension
  • Repeat the same for the Lat N in the Row shelf.

Now, locations of these dams are plotted on the map. 


  1. Next, we will make the size of each dot proportional to the magnitude of the hydropower capacity. 
  • From the Data pane, drag the “Installed Capacity (MW)” field under Measures card, and drop it onto Size in the Marks Card.


  1. In the map, we want to plot dams built or planned to be built in a certain time period between 2009 and 2030. We need to filter the year:
  •  Drag the “Year”  field from Data pane to the Filters shelf. 
  • A Filter dialogue box will open. Select Range of values
  • You can adjust the slider to set the beginning year to 2009 and the end year to 2030. Alternatively, you can just type in 2009 and 2030 in the bars under the slider. 
  • Click Apply, and then OK.

You will now see that only the dams in this time frame (2009-2030) remain on the map. We have successfully marked the locations and capacities of hydropower dams on the map. 


  1. We will now improve the appearance of this map and demonstrate data artistry through some visual elements: color, size, background, and visual hierarchy.

First, we will adjust the color, size, and opacity of marks on the map. 

Color 

Color is one of the most important aspects of styling maps. Color used in visualizations should mimic and reflect the color palette or visual branding of the company or agency. This visualization, which we created for the article, also adheres to the brand color of Frontier Myanmar: HTML #ec3f3f.

  • Click the Color bar under the Marks card. 
  • Choose More Colors. The Color Panel will pop up. 
  • Type #ec3f3f in the? HTML bar. In some cases, the HTML bar may not be available. In this case, you may use Red-Green-Blue color selector: R - 236, G - 63, B - 63.

Size

The size of each bubble shows each dam’s hydropower capacity. Some bubbles may be too small to be seen. To help the audience see the hydropower capacity of different dams vividly and immediately, we will need to adjust the scale of these bubbles. 

  • Click the Size bar under the Marks card. 
  • Rescale it to 50 percent
  • In the slider, drag the handle in the middle. 

After resizing, the map should look like: 

Note: As you can see, some bubbles overlap with and block each other. To make all bubbles visible, we can modify their opacity to make them more transparent. 

  • Click Color. 
  • In Opacity, you can adjust transparency by sliding the slider. Marks will become more transparent if you slide towards the left. Set opacity for 70 percent

At this point, some marks may still be too close together and/or may overlap with each other. Assigning a distinctive border color is one way to visually separate these tightly-clustered marks on the map. 

  • Click the Color bar under the Marks card. 
  • Click the drop-down menu next to Border
  • Choose White

We have now got a beautifully crafted map. Take a look at the evolution of this map below before we adjust the background. In just a few simple steps, we have brought the map to a whole new level! 

Background

After formatting the marks, we will work on the visual elements of the base map. 

We used a dark background in the original map, which allowed the audience to see the data better compared to a lighter background. Because we are creating and designing visualizations to present hydropower information, detailed geographic features and state boundaries may distract audiences from paying attention to important features. 

We can adjust the color of base map and declutter some unimportant map elements: 

  • On the toolbar, click Map > select Map Layers.
  • The Map Layers pane will appear. 
  • Click the Style drop-down menu under Background, and then choose a Dark style.
  • Under the Map Layers section, you can show or hide the maps layer(s) to customize your background map . Select only these FIVE layers: Base; Land Cover; Terrain; Light Country/ Region  Borders; Light Country/ Region Names. 



This will give us a basic map showing the location of hydropower dams and their capacities. We will now add a bar chart and other elements to support this map and make it more informative and cohesive. 

That's the end of Part 1! Now that you have a pretty map of hydropower dams, tune in to Part 2, where we will combine this map with a bar chart into a filterable dashboard in Tableau.

Recommended Recipes

Scrolly Map in Tableau and Webflow (Part 2)

Map
Beginner

Scrolly Map in Tableau and Webflow (Part 3)

Map
Beginner

Drawing a Bar Chart with Covid-19 Case Data

Bar Chart
Beginner