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.
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.
We will create this visualization using data from the Hydropower Database provided by the IFC Myanmar.
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.
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.
We have also prepared a Google Sheet to help you with the data preparation process. Click Here to access this sheet.
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.
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.
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.
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.
Now, locations of these dams are plotted on the map.
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.
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.
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.
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.
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.
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:
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.