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.
Being the data hacker that I am I decided to use my rusty JavaScript skills to auto-generate 50 individual state-level maps from one Tableau viz. Here is how…
Contents
Steps
- Build Tableau Viz w/ Map of full United States (or whatever country you wish)
- Use JavaScript to generate an image for every state from that Tableau viz
- 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.
Use JavaScript
Before we dive in here, remember what master Yoda says about the force JavaScript…
“You must unlearn what you have learned” – Yoda
Steps
- 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
[snippet id=”573″]
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
[snippet id=”574″]
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.
[snippet id=”575″]
This function above is executed after the previous loop is completed (which adds all of the images to the page) and simply fades the tiles to be visible. This section uses another JavaScript library named imagesLoaded and can be found here
The last step is to wrap this whole thing up in a function and call it. This isn't totally necessary but in following with common JavaScript form I thought this would be nice. If we wanted to do anything more advanced like add a callback function after everything is done we could do so using this structure.
[snippet id=”576″]
Final Result
Here is the final result up and running. Feel free to copy, reuse, or distribute this code in any fashion you wish.
See the Pen Generate 50 State Images with Tableau and JQuery by Ben Sullins (@bsullins) on CodePen.