Transforming Data Visualization into a Food Recommender

Last holiday season, Tokopedia Business Intelligence Team created a Tableau Visualization as a part of our Monthly Tableau Public Visualization Project. Our Holiday theme was Happy Feast, which turned thousands of recipes from bbcgoodfood.com into one-page recipe recommender which can be accessed here. It is a fun visualization that you can try creating it by yourself by following these steps.

Happy Feast Visualization

Step 1: Gather the Data

Check out dataset provided by a Kaggler and recipe data from BBC Good Food Christmas Recipe. When you search for Christmas recipes, you may find 1660 recipes which can be categorized by type of course, preparing time, nutrition, and cuisines. Also, get the link for each recipe detail page, and scan the content of the page for the information you can possibly use.

BBCgoodfood recipes list and its recipe detail page

Step 2: Clean the Data

1. Scrape the web using python scrapy framework for each component of the web page, such as nutrition information, preparing time, etc. The following image is an example of scraping process result.

2. Since not all columns from the scraping result are ready to use, you need to clean the data further. Here are some examples.

3. The ‘totalTime’ (total preparation time) format is code-like string and needs parsing.

4. The nutrition data, such as sugars, kcal, saturates, fat, salt and rating, contain some characters that need to be excluded.

5. Remove the gram unit on food composition column as well as parentheses and ratings string on rating column, in order to get integer data only in the columns.

6. Eliminate variables that you do not need. In this case, we removed Ingredients and Methods.

Step 3: Design User Journey of the Visualization

Building a dashboard is always related to user journey, which enables user to easily navigate and understand the insights from the dashboard.

1. Define the goal of visualization. In this case, we wanted to create a food recommender for users.
2. List all the touch points. We wanted users to be able to select, sort, filter recipes by type, origins, and rating of the food, as well as to see the image of the food and food profile in terms of nutrition composition.
3. Make necessary changes if needed, then iterate again.

User journey map

Step 4: Create Visualization — Add Filter and Sort Functions

Filtering

1. Create a new worksheet for main data
2. Add measure values: Average of calories, prep time, and rating
3. Add dimensions to the rows pane
4. Drag and drop dimensions to filter into the filter pane, which, in this case, are `Recipe Category` and `Recipe Cuisine`.

Sorting

In sorting, we need to create parameter and some calculated fields.

1. Create a parameter for sorting, name it accordingly (i.e Sort by). It will be used for the sorting options later.

2. Create three calculated fields to rank the data in each option. For example, if we have three sorting options (by calories, cooking time, and rating), then we must create the rank function for each option.

Rank function based on cooking time

Rank function based on rating

3. Create another calculated field to link the parameter to the rank functions. Here, we named it ‘metrics_co’.

Calculated field of metrics_co

4. Lastly, add this `metric_co` to the row pane of your worksheet.

Step 5: Create Visualization — Multi-layer Radar Chart

1. Change our existing data structure by adding metrics column and the normalized value. It requires transposing the food composition column into row (sugar, salt, fat, etc.), for each recipe, like the sample below.

2. Create an X-Axis and Y-Axis value for each metrics, for each recipe by adding two calculated fields. The normalized value is used to generate the chart and to ensure the proper scaling of the radar chart.

3. The most important thing to do while constructing formula for X and Y-axis is to order the metrics alphabetically. That ensures the starting and ending point is well-connected when setting up the radar chart

For more tutorial on radar chart and the rest of the step, you can find this tutorial useful from Tableau Blog, and adjust the tutorial based on the needs.

Step 6: Create Visualization — Dynamic Image on Click

The gif image below shows how our dynamic images change when selecting recipe name.

In order for this to work, all images should be stored in a server where the dashboard have an access to. We will be directly linking the image URLs to our dashboard. Here are some steps to configure dynamically changing images.

1. Create dummy web page object in dashboard, it could be any web page address for initialization.

2. In the related worksheet, include the target address in Rows pane, then hide all dimensions except the Name (just to get the “beautiful” dashboard)

3. Configure action in dashboard to link web page object and worksheet. Insert the column name of target URL in URL pane (in this case, worksheet name is “recommend” & target URL column name is “Url Image”)

4. Finally, you can easily select recipes name, and the images and radar chart will change automatically based on selected recipe.

And those are steps to create a food recommender with data visualization.

Tips for Visualization improvement

We realized that there are still many things that can be improved from our visualization. You may try adding hyperlinks to the actual recipe; adding “search” column that allows text searching in addition to the dropdown filter; or adding some useful information in the radar chart tooltips.

Hope that this article can be a starting point for you who want to explore ways of visualizing data. See you in the next post!

Source: Pixabay