Your first widget

In this guide, you will create your first bar and pie charts, as well as your first map. Step by step, you will be guided into making a real case scenario widget that you can then share with people.

We will be using the Resource Watch platform to create the widgets. You will need to create an account to start the creation process from zero.

Table of content

• Creating a bar chart
• Creating a pie chart
• Creating a map

Creating a bar chart

In this tutorial, we'll create a stacked column chart where each column is the total power capacity of a country, and each of the smaller pieces of different colors inside are a fuel type. We'll limit the chart to the top X countries that have the most power capacity.

Let's start by using the “Global Power Plant Database” dataset from Resource Watch. Remember that you need to create an account first.

1. Go to the widget creation page on Resource Watch
2. Select the “Global Power Plant Database” dataset

Once you've done so, the widget-editor will appear. The first thing we want to do is to select the columns for the axes.

3. Select the “Country” column in the dropdown named “Category” at the bottom of the visualization pane
4. Select the “Capacity (MW)” column in the other dropdown called “Value”

At this moment, a bar chart will be visible.

5. Select the “Table view” in the settings pane

You will see that there are several rows with the same country name (for example China). This is because this dataset contains one row for each power plant in the world. What we want to display is the total power capacity of each country, so we need to sum up the capacities of each of the power plants per country.

6. Select the “General tab” of the settings pane
7. Under the “Description and labels” accordion, you will find a dropdown called “Value aggregation”. Select its “Sum” option.

Now the chart displays what we originally intended: the countries from most power capacity to least. You can verify there are no duplicates by going to the “Table view” tab again.

Next, we're gonna select the top 15 countries only.

8. Under the “General” tab, expand the last accordion, “Order”
9. Change the “Limit” value to 15

Now, if we were to stop here, we would give the widget a name and a description.

10. Go to the “Description and labels” accordion
11. Give the widget a title, like “Top 15 countries with most power capacity”
12. Give the widget a description too: “Bar chart representing the top 15 countries with most power capacity (all fuels included).”

You can now save the widget and share it with other people!

... or if you wish, we can also breakdown the total capacity by fuel type, by creating a stacked column chart instead.

13. Change the visualization type to stacked columns, by clicking the visualization selector and selecting the second “Columns” option
14. In the legend module, find the dropdown that says “Single color” and select the “Fuel” column

Now you can see that the total capacity is broken down into fuel types. Unfortunately, the chart doesn't display the top 15 anymore. Why is so? Well if you look at the table again, you will see we have exactly 15 rows, but not 15 countries. Remember one row equals one power plant.

So what we want is not to limit to 15 rows but to 15 countries instead. However, the widget-editor doesn't know the relation between the rows and the countries. One way to do achieve our result is to get the list the top countries and use them as a filter.

Below, we've decided to only display the US, China and India, which were the top 3 countries.

15. Change the “Limit” field located in the “Order” accordion to 500 (the maximum value)
16. Expand the “Filters” accordion and click “Add filter”
17. Select “Country” as the column to filter with
18. As an operation, select “Filter by values”
19. In the dropdown, select the options “United States of America”, “China” and “India” (the order doesn't matter)

And here you are, now you have the top 3 countries with most power capacity, broken down by fuel type. If you save this widget, don't forget to update its title and description!

Creating a pie chart

If you haven't followed the previous tutorial, please know that you need a Resource Watch account to follow these steps.

Here we're gonna create a pie chart that displays the different fuel types that power the US.

First thing, we're gonna go to the Resource Watch page that lets you create a new widget, and select the correct dataset.

1. Go to the widget creation page on Resource Watch
2. Select the “Global Power Plant Database” dataset

At this point, you can now see an empty widget-editor. Let's create a simple pie chart.

3. Change the visualization type to “Pie” in the visualization selector located at the top of the visualization pane
4. In the legend module (at the bottom), click the dropdown and change the value from “Single color” to “Fuel”

This indicates that each slice (each color) will represent a fuel type.

5. Above the legend, modify the value of the dropdown called “Value” to “Capacity (MW)”

This indicates that the value associated with each slice is the capacity of the fuel type.

6. In the settings pane, click the “Table view” tab

The table view shows you the data that is being used by the chart. Here you can see the fuel types are repeated. This is because the dataset contains a row for each power plant anywhere in the world. What we'll need to do is to only get the ones in the US, and to group the fuels by type. Let's start with filtering by country.

7. Click on the “General” tab
8. Expand the “Filters” accordion in the settings pane
9. Click the “Add filter” button at the top right of the accordion
10. Select the “Country” column in the dropdown
11. As an operation, select “Filter by values”
12. Select the “United States of America” option in the dropdown that appeared below

If you look again at the table, you will see there are still duplicate fuels. This is because the US have multiple power plants of the same fuel type. We'll now sum up all the capacities per fuel type.

13. In the “Description and labels” accordion (“General” tab), set the “Value aggregation” dropdown to “Sum”

Now, the table doesn't have duplicates anymore, and the chart actually displays the types of fuels that power the US!

To finish, you can add a title and a description to your chart.

14. In the “Description and labels” accordion, add a title and a description

And voilà, your pie chart is done!

Creating a map

If you haven't followed any of the previous tutorials, please know that you need a Resource Watch account to follow these steps.

In this section, we'll create a map that displays the location of the solar power plants in France.

Let's go to the widget creation page in Resource Watch first.

1. Go to the widget creation page on Resource Watch
2. Select the “Global Power Plant Database” dataset

After selecting the dataset, an empty widget-editor should have appeared. By default, it's set to a columns chart. We'll change it to a map.

3. Click on the visualization selector and select the map visualization type

Now, we're gonna select the layer we're interested in.

4. Click the “Map” tab in the settings pane
5. In the “Layers” dropdown, select “Solar Power Plants by Capacity (MW)”

As you can see, the map updated and the legend indicates that each orange area is a solar power plant. We'll zoom in the correct area next.

6. Using your mouse, move the map so that France is located at the center of it
7. Using the zoom buttons, your trackpad, mouse wheel or by double clicking, zoom on France so it is bigger on screen

For people not familiar with Europe's geography, we may want to display the country borders and the country names.

8. In the settings pane, tick the “Show boundaries” checkbox
9. Select “Labels light” in the “Labels” dropdown

Now you may want to adjust again the position or zoom of the map, because what you see is what will be saved.

If not, we're ready to give the widget a title and a description, and save it.

10. Go to the “General” tab and fill in the “Title” and “Description” fields