Pop Viz: America’s Regional Tastes

December 17, 2013

When Allrecipes reached out to Tableau to create a dashboard about Thanksgiving recipe trends, I was salivating… not just because of all the appetizing recipes but because this is some deliciously juicy data! The Allrecipes data team (shout out to my man Bob, who is awesome!) provided me with data on page views for Thanksgiving recipes broken up by state (based on IP address) and category (turkey, stuffing, pie, etc.). Here’s the viz:

Learn About Tableau

It was a super fun viz to make and I learned some useful techniques via my own personal Tableau master and desk neighbor Dan Hom about the new 8.1 ranking feature. Here’s what I did:

The Map

map
Obviously, the main feature of this viz is the map. Getting it to display the data for just the top recipe was a bit of a challenge, but once you get the technique down, it’s really useful. Here’s what I did:

  1. Write the calculations for Rank and for hiding everything but #1. There are two calculations I needed to write to create this view. The first one uses one of my favorite new 8.1 features, the Rank table calculation. Anyone who has ever struggled with all the hackery involved in getting Index to behave like Rank is going to be overjoyed with this new function. The calculation was simply RANK([Page Views]), since page views are what I was ranking my recipes on. The second calculation was to hide any data that isn’t the number one ranked recipe. I’m not sure what the intricacies are that keep you from using a simple filter on Rank, but you can’t. So, Dan showed me how to use a LOOKUP calculation instead. That calculation was LOOKUP([Rank],0) where Rank is the calculation I wrote to rank the recipes.
  2. Build out a chart sorting the recipes by state. I wanted to start out building a bar graph instead of jumping right into a map because it’s easier to see what’s going on. I dragged State and Recipe to the rows shelf and Page Views to the columns shelf. Then, I sorted descending. I also dropped Recipe Sub-Category on to the color shelf as an attribute. It was important to add it as an attribute because otherwise it will eventually show one top recipe for every sub-category instead of just what was the number one recipe.
  3. Add the ranking. I added ranking to the rows shelf as a dimension. I adjusted the Rank table calculation to be computed using both State and Recipe, with it being computed at the deepest level (recipe) and restarting every State. I checked to make sure the ranking numbers matched the length of the bars.
  4. Bring in the Lookup calculation to hide everything but the #1 recipe. I put the Lookup calculation as a filter and set it to 1. I was left with a view that showed only the top recipe in every state. (They weren’t being filtered by category yet. That came with a dashboard action filter).
  5. Switch it to a filled map. I used Show Me to switch the view to a filled map. Show Me likes to think it knows better than me, so it mixed around all my dimensions and measures. I put them back where they needed to be. Originally, I had the recipe name on label so that you could quickly see not just what kind of recipe was #1 in each state, but what the actual recipe was. But, that looked pretty cluttered so I took it away.
  6. Other design stuff. I took away the base layer of the map. I figure that anyone who is looking at a map of Thanksgiving food is probably from the US and doesn’t need the map stuff. I also made the borders white. I duplicated the map twice to make ones centered at Alaska and Hawaii to float in the final dashboard. Lastly, I matched the colors to match Allrecipes’ branding.

The category selector

categories
I really like using icons as buttons for filters. They provide a lot more visual interest and I think the are more intuitive to use for people who have never seen Tableau before. I also recently used this technique on my Pokemon dashboard using the different energy types as shapes. It’s a pretty easy thing to do.

  1. I grabbed the icons from a set of food icons in Smashing Magazine. They have a bunch of free icons to use for free. I added the entire folder of food icons to my shapes folder in Tableau. I have so many now that I definitely NEED to make more food vizzes.
  2. I created a new sheet with category on shape. I then chose which shapes I wanted to represent each type of food.
  3. I also put category on the columns shelf. The reasoning for this was so that I could adjust the spacing between each icon.
  4. I added labels and color.

The Top Recipe box

toprecipe
There are actually three sheets going into this section of the viz and an image. I made the rounded rectangle the same way I did for the Author Profile viz. The three sheets make up the title, the image, and the caption.

  1. For the title, I made a blank sheet with nothing but the category on label. I edited the label to say “#1 [Category] recipe in the US”. I also got rid of the borders and changed the background color so that it would blend in with the box behind it.
  2. For the image, I used custom shapes based on category. I actually had to make a duplicate of the Category dimension, since I had already assigned shapes to the original dimension to make the buttons at the top of the viz. The reason I chose to only show an image of the top recipe was for a couple reasons. It would’ve been cool to show an image of whatever was the top recipe in the state if you clicked on it or of the recipe you selected in the table, but that would mean I needed a picture for each recipe in the viz (which is several hundred…too many to download and assign to shapes). I could’ve used a URL action to link directly to those images on allrecipes.com, but if you have a URL embed in your viz, any URL actions automatically open in that embed. That means that when you clicked on a recipe to view it, the recipe would load in the little box that the image is in, which definitely wouldn’t work. I recently learned a workaround for this issue using the Javascript API which I’ll probably share with you soon. Anyway, to build the sheet I put the category on shape and set the level of detail to title. Then I put rank on rows and used my “Hide Rank” calculation to only show the top category.
  3. The caption was made by combining the last two things. You have to use Rank/Hide Rank to make sure you are displaying the right title, and then put title on label. When I made it, I actually just cloned the sheet that made the image, changed the mark type to text and put title on the text.

The Table

table
The table is pretty simple. However, it gets around a problem I often see a lot of new Tableau users get into with tables like this, so I’ll explain it anyway.

  1. I put title on rows.
  2. I put title and rank on label like “#[Rank]. [Title]
  3. I added State and Category as attributes. This is so that I could make a dynamic title. Did you know you can use fields in your titles? I have the title set up to say “Top [Category] Recipes in [State]”.
  4. I hid the header for the rows. Now what we are left with is a nice clean list. I’ve seen people try to do this but have the fields they want displayed just as rows and nothing in the marks, so they end up with a bunch of “abc”s all over the place.
  5. Lastly, I made sure that URL was in there to support the URL Action.

That was pretty much it! Hope you learned something useful!

 

Tags
#Main #Pop Viz #Tutorials
2 Comments
December 17, 2013 @ 2:35 pm

This is so mega. You Yanks do have some strange pie preferences though. Need to see the UK version of this!

Cheers
@paulbanoub
http://www.vizninja.com

Reply
  • Pingback: To be Sorted | Pearltrees

  • Leave a Reply

    Your email address will not be published. Required fields are marked *


    *