9/22/2016
Building the International Space Station Tracker Using JSON and Tableau Javascript API
A few weeks ago I created a viz that tracks the position of the International Space Station using a live JSON feed and the Tableau Javascript API. In this post, I will walk through the steps in building this visualization. This requires a bit of coding, HTML, Javascript and AJAX, but the code is very short and very straight forward. Below is an outline of the code, a description of how it works and it's set up so you can just copy and paste.
Step 1 - Build a Tableau Viz
The first step is creating a Tableau visualization that plots a point on a map using a parameter. This requires two parameters and two calculated fields.
Create a new parameter called Lat and use the default floating format. Set the starting value at 39.123
Create a new parameter called Long and use the default floating format. Set the starting value at -84.51
Create a new calculated field Latitude and set it equal to the parameter [Lat]
Create a new calculated field Longitude and set it equal to the parameter [Long]
Right click on Latitude and set the "Geographic Role" to Latitude.
Right click on Longitude and set the "Geographic Role" to Longitude.
Place Longitude on Column and Latitude on Rows.
You should now have a visualization that plots a point on a map in Cincinnati, Ohio. Pretty simple, right? Just two quick parameters and two calculated field. Now style the visualization as you wish and save it to Tableau Public.
Optional step - find a space station icon to use as a custom shape.
Step 2 - Get the JSON data
There is a live JSON feed maintained by NASA providing the current location of the International Space Station. The URL for this data is http://api.open-notify.org/iss-now.json.
Using a basic HTML page, the code below retrieves the latitude and longitude from this JSON feed and stores them in the variables Lat and Long.
The last line of the code above is LatLong(Lat,Long). This calls a JavaScript function that passes the values into a Tableau workbook parameter. I will create that function as the last step below.
Note - because of the 'jsonp' it is very important that the Tableau function is called inside the GetValue function.
Step 3 - Setting up the Tableau Viz and JavaScript Functions
I recycle code over and over again to set up Tableau visualizations for the JavaScript API. There are a number of resources available on my Tableau Reference Guide under the section on JavaScript API that will help you get started. The code is pretty straight forward and is outlined in detail here.
Note - The JavaScript API library and the AJAX lbirary have to be called, which you will see in the <head> tag below.
The code below creates a workbook variable and then 3 additional variables for a placeholderDiv, the URL and options. Once those are all created, then the last line of code is used to put it all together, var viz = new tableauSoftware.Viz(placeholderDiv, Url, options);
onFirstInteractive is used to set up the workbook and getValue is the functon we created above to get the very first reading of the latitude and longitude. I call the function so that the viz updates the ISS position immediately after it loads. var viz = new tableauSoftware.Viz(placeholderDiv, Url, options); puts all the pieces together for the JavasScript API using the variables that were just set (placeholderDiv, Url, options). I added window.setInterval("getValue()","8000"); which refreshes the browser every 8 seconds.
Note - the URL needs to be set to read your Tableau Public viz. The format of the URL is: https://public.tableau.com/views/[VIZ NAME}/[WORKSHEET NAME]?:showVizHome=no
The last step in the code above is creating a function that passes the parameters to a Tableau workbook. In step 1 we created two parameters in Tableau, one for Lat and one for Long. The function LatLong(a,b) creates a function that changes the workbook parameters using workbooka.changeParameterValueAsync("Lat", [a]); and workbooka.changeParameterValueAsync("Long", [b]);. Remember, this function is called above as the last line of code in the GetValue function. In other words, after the GetValue returns the latitude and longitude of the space station and holds them in variables, then it calls this functions to pass them to Tableau into the parameters that are set up.
You now have all the code you need to control your viz. You can add some additional styling of the webpage background color and CSS styling of the viz as you see fit. Here's what the finished code looks like all put together.
I hope you find this information helpful. If you have any questions feel free to email me at Jeff@DataPlusScience.com
