Recently I feel in love w/ the small multiples types of graphs that show each individual state level metrics separated into a grid style layout. This isn’t new, and I’m not the only one that feels this way, but when I wanted to look into building this with Tableau I wasn’t super excited about all the steps it may take.
- Build Tableau Viz w/ Map of full United States (or whatever country you wish)
- Place these images on a page and style accordingly so they are responsive to the user’s screen size
Build a Tableau Viz
Here what I’ve done is take the Regional view that comes with the Tableau Desktop samples. It shows obesity rates for every county in the United States. Once we have this, we really are done w/ Tableau at this point. Simply publish this to your Tableau Server or Tableau Public and move on to step 2.
Before we dive in here, remember what master Yoda says about
“You must unlearn what you have learned” – Yoda
- Get a list of states we want to generate maps for
- Pass these states into Tableau via the URL to filter the viz
- Load these images on to our page
So let’s begin…get a list of states. For this, I went into my Tableau viz, dragged “State” on to the row shelf, then exported the data. In Excel I created a formula to put each State in quotes with a trailing comma, and pasted that into my codepen
Now that we have our list of States, we need to call Tableau and pass this in as a filter. This can be done a few ways but for our purposes, I wanted to keep it simple and just use a “for loop”. This is a basic concept in nearly every programming language that allows you to execute a piece of code repeatedly until the “for” condition is met. More on that here
In this snippet above we’re looping through our list of states one at a time, parsing the individual state, generating a URL, then adding an image to the “tiles” container where we’ll house our final result.
When we added the images to our page they had an opacity of 0 which makes them invisible. This is so we can control the loading of images on the page and make it more smooth for our users.
Here is the final result up and running. Feel free to copy, reuse, or distribute this code in any fashion you wish.