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
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
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
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.
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”.
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!
See the Pen Localizing Tableau Viz by Ben Sullins (@bsullins) on CodePen.