Scrolly Map in Tableau and Webflow (Part 2)

Stats

Ingredients

Hydropower dam

Tools

Google Sheets, Tableau, Webflow

Read in other Languages

No items found.

Introduction

Steps 1 and 2 have been covered in Part 1 of this Recipe, where we have completed making a map which shows all the hydropower dams with different sized circles based on their capacity. For Part 2, we cover Steps 3 and 4, which guides you through creating a bar chart using custom calculations in Tableau, and connecting that chart together with the map from Part 1 into an interactive, filterable dashboard.

‍

step-3

Baking Bar Chart

Creating a `Calculated Field` and making a Bar Chart in Tableau

In this step, we will create a bar chart, which shows the combined hydropower capacity of the dams between 2009 and 2030.

First, we will create a bar chart, and filter the year.

Start by creating a new worksheet. Name it “Bar Chart”.
Drag “Year” to Columns and “Installed Capacity” to Rows.

By default, it will create a line graph as shown below.

Since we want to display data in a bar chart:

Click the drop-down menu in the Marks Card.
Select Bar.

A bar chart will appear. You may notice the disproportionate bar chart, which is caused by the lack of construction year data for some of the hydropower plants. We will need to drop these “0” values by filtering the year.

We will need to filter the years (2009-2030) for this Bar Chart Worksheet like we did for the Map Worksheet earlier.

Drag “Year” to the Filters shelf.
A Filter dialogue box opens. Select Range of values.
Type 2009 and 2030 in the bars under the slider.
Click Apply and then OK.

‍Note: Although we have cleaned the data and created new fields in Google Sheets, we may also need to do some calculations in Tableau. In this next part, we will do some quick and easy calculations on Tableau.

This bar chart shows the cumulative amount of hydropower capacity?. Since we want to show the summation of hydropower capacity as it grows over time, we will need to do a table calculation.

In the Columns shelf, click the field drop-down menu.
Click Quick Table Calculation > select Running Total.

‍

Now, we will redesign and reformat this bar chart to make it look cohesive with the rest of the map.

First, we will adjust the color and the size of the bars.

We will be using the same color as the bubbles on the map.

On the Marks card, click Color.
The last time, we customized the color for the marks on the map. We don’t need to repeat that step because this color is now readily available at the bottom of the color panel. Click on that color.

We will also need to resize the bars.

On the Marks card, click Size.
In the slider, drag the handle to the position as shown below (which is close to the rightmost end of the slider).

Now, we will reformat map elements to make it look simple and appealing.

The following picture illustrates the steps we will take in reformatting each of the map elements.

‍

First, we will remove the Title.

Double click the title.
Select the title “Bar Chart”. Delete it.
Click OK.

‍

2. Afterwards, we will remove the grid lines and axis rulers to make the chart simpler.

Right-click on the chart and click Format.

The Format window will appear on the left-hand side. Click on the Lines option, which is a box in the toolbar with four different lines.
Click the Sheet tab.
Click the drop-down menu for Grid Lines. Choose None.
Choose None for Zero Lines, Trend Lines, Ref Lines, Drop Lines, and Axis Rulers.
Only for Axis Ticks, choose the color Black.

3. We will now edit the title, tick marks, and range of the vertical axis.

Double click the vertical axis.

The Edit Axis Dialogue box will open.
In the General Tab, there are four options to choose for Range. Choose Fixed.
Now we can add Fixed Start and Fixed End. Type 0 in a text box for Fixed Start, and 40,000 for Fixed End.
We can also change the title for the Axis in this dialogue box. Type the new title “Hydropower Capacity (MW)” in the Title text box.
Click on the Tick Marks tab.
Choose the Fixed option for Major Tick Marks.
Type “0” in the text box for Tick Origin.
Type “10,000” in the text box for Tick Interval.

‍

4. Let’s move on to the horizontal axis.

Double click the horizontal axis.
In the General Tab, choose the Fixed option for Range.
Type 2008 in a text box for Fixed Start, and 2031 for Fixed End.

Note: we only need the time frame to be 2009-2030 but adding one additional year for the Fixed Start and Fixed End will make the bar chart look better. These additional years help to create some negative space around the map.

Click on the Tick Marks tab.
Choose the Fixed option for Major Tick Marks.
Type “0” in the text box for Tick Origin.
Type “5” in the text box for Tick Interval.

5. We will take a few extra steps to make the bar chart transparent, allowing it to overlay on the map we have created earlier. Later on, we will get to see how neat and professional a dashboard can be with worksheet transparency.

Right-click on the chart and select Format.
In the Format window, click on the Shading option in the toolbar.
On the Sheet tab, click the Worksheet.
In the drop-down list, select “None”.

‍

Let's take a look at the bar chart before proceeding to the next step. You will see that it features only the necessary elements, maintaining simplicity and consistency.

‍

step-4

Dashboard & Filter

Making a Dashboard and adding a Filter in Tableau

We will make a filterable dashboard in this step, which accurately and beautifully features the map and bar chart we created in earlier steps.

First, we will create a dashboard where we will put together a map, bar chart and legend.

Click on the New Dashboard icon at the bottom of the workbook and name it “Hydropower Map”.

Double-click on the Map from the Sheets list on? the left. The map and its legend will appear.

The legend needs to be redesigned and reformatted to be coherent with the base map.

First of all, we will need to add a legend to the worksheet.

Click the legend.
Click the drop-down arrow on the right for More Options.
Change the legend type to Floating as shown below.

We will need to change the color of this legend to make it visible.

Click the legend > Click the drop-down arrow > Select Format Legend
The Format Legend window will appear on the left.
Under the Title section, click the drop-down arrow on Font > select White color.
Also, for the Body section, select White color for Font.

‍

We will also need to modify the distribution of sizes. Tableau automatically adjusts the size of the marks to be consistent with the legend whenever you zoom in or zoom out of the map. We will need to set minimum and maximum values for the hydropower capacity data to determine the distribution of sizes for these marks.

Double-click the legend. The Edit Sizes dialogue box will appear as shown below.
Set an appropriate range for the size in the Mark size range slider.
Among the Sizes vary options, select By Range to customize minimum and maximum values.
Select Start value in legend and in the text box below, type “11” for beginning value.
Similarly, select End value in legend and in the text box below, type “8,000”.

You may notice that the size of the dashboard is quite small. Let’s fix this.

Click the drop-down arrow under Size in Dashboard.
Select Fixed sized > Custom.
Set 1350 px for Width and 860 px for Height.

‍

Next, we will overlay the bar chart on the map.

Double-click the Bar Chart from the Sheet list on the left.

Click the drop-down arrow next to the chart and select Floating.
Place the chart right under the map of Myanmar and adjust the size.

After overlaying the bar chart on the map, we will work on the design of the bar chart. The text and ticks of the axis title are black, making it unreadable against a dark background. We will turn them white to maximize readability. Let’s start with the text.

Right-click the bar chart > Select Format
In the Format window, click on the Font option in the toolbar as shown below.
On the Sheet tab, click the Worksheet drop-down menu.
Select White color.

Now we will need to change the color of the ticks.

Click on the Lines option in the toolbar in the Format window.
Choose White for Axis Ticks.

‍

We will resize the map and readjust the location of the bar chart and legend on this dashboard so that the axes, marks, bars and labels of these elements do not obscure each other.

Use your scroll wheel to zoom in and out.
Double-click the legend (or bar chart) and click on the handle to move around.

The final map should look like below:

‍

Finally, we will add a Year filter that will help you to visualize how the number of dams and hydropower capacities have grown over time.

● Click the drop-down arrow on the right of the dashboard.

● Select Filter >Year. A filter for Year will pop up on the right top of the dashboard.

‍

To make sure we can filter the hydropower capacity and dam locations on both the map and the bar chart, we need to follow these steps:

● Click on the drop-down menu next to the Year filter.

● Select Apply to Worksheets>All using This Data Source.

Now, in the filter, you can play with the slider – or type in the different ending years (2010/ 2015/ 2020/ 2025/ 2030) to see changes over the years.

In the original article, you can see that the marks on the map and bars on the chart pop up at a 5-year interval as you scroll down. This activity helps us see the trend of hydropower capacity over time. In the upcoming steps, we will be moving on to the Webflow to create this exciting interactive feature.