One lesson I learned a long time ago was that we are all vain when it comes to data viz. Generally, we all care more when a data viz is about us. I've seen this over and over again at clients when I build the famous “me” dashboard which shows an employees relative tenure compared to others in the company.
Of course, this isn't my revelation. In the great book “Made to Stick” by Chip and Dan Heath they have a great story about a local newspaper in a small town that says they would literally print names from the phone book if they could. They know that when people see their name, or the name of someone they know, there is an emotional attachment that gets the reader to care about the content. The same is true in data viz land.
So recently when I was doing a Makeover Monday on corporate tax havens I thought, what better way to get people to care than to make it personal. What I wanted to do in this viz was have it automatically detect the readers location and filter to their state.
This is the most basic, straightforward way to do this I have found. (keeping it simple was another one of the Made to Stick rules)
For this to work you'll need
- A viz with some location property you want to filter on
- Web site to host the viz
- A few lines of JavaScript (which has nothing to do with Java, so don't worry :))
Contents
First, we need a viz
- Create a viz
- Add a “State” parameter
- Create a calc that uses the State parameter to filter the viz
Next, a site to host it
- I use WordPress but wish I was using Jekyll (le sigh)
- If you don't have your own site you can use codepen.io and that's also where you can find my code
Last, some JavaScript
If you've never written JavaScript before, have no fear! It's one of the most common and relatively easy to understand, albeit rather ugly, programming languages. It really is the language of the web and today has extended beyond just web pages into server-side programs using node.js. First, an analogy to clarify one thing about JavaScript
If you don't care about learning how this works, first off shame on you, but I understand, you can copy paste my code below into your site and simply replace the variable values with your own. If you are a curious mind, which I know you are 😉 then read on…
The basic idea here is to
- Ping a remote service from the readers web browser to get the location
- Parse the response containing the location information
- Use the readers location to localize our viz
So on your page first you'll want to include the javascript framework JQuery. That is, if it's not already included. Do that by adding the following reference to JQuery in your <head> tag
[snippet id=”555″]
On our web page, in the HTML <body> we'll need to add some objects to contain our location information. These are all for testing except the <iframe> which is where the actual Tableau viz is loaded. So if you don't want to see all of that go ahead and remove it. I personally like to have it there while I'm developing, then when I publish I remove it.
[snippet id=”556″]
Next, we want to setup some variables to store the values we'll need to load the viz. In JavaScript we need to first start out with a <script> tag that will contain all of our code. Then we'll add the variables and assign them values
[snippet id=”557″]
Notice that paramLevel specifies the geographic role of the parameter we want to pass in. This is important, and you can only use the values in the comments there, exactly as typed.
Now let's make the request to the geolocation service and get our readers location. We do this using a JQuery function $.get(). This function basically makes a request to the URL we provide and then parses the response into an object/variable called “response” which we specified in the what is known as a “callback”.
[snippet id=”558″]
Now we're ready to test our viz! Make sure your HTML document has closing tags for the </body> and </html> elements and you are ready to open it in a web browser and test. If you don't have a web server to use try using Firefox locally and just opening the file. Sometimes browsers block local access so if you want to do this in Chrome or others then you might need to adjust the security settings.
Here is the full code of our page. Feel free to re-use this w/o any attribution necessary in any manner you wish. The simplest way is to just copy/paste this entire snippet into a page and replace the parameter values to fit your needs. I hope you enjoyed this, check back for more tips soon!
Cheers,
Ben
Full Code
See the Pen Localizing Tableau Viz by Ben Sullins (@bsullins) on CodePen.