Tabitha - Voice Recognition and Voice Response for Tableau
Requirements for Tabitha
• A Tableau Public Visualization that you would like to interact with
• Chrome browser
• Hosting capability, preferably secure hosting for microphone permission
• Some sort of text editor, for example Notepad++ (download here for free)
Step 1 - Build your Viz
Create your visualization and load it up to Tableau Public. In this demonstration we will show how to control the viz using both Highlight and Filter Actions. To make it easy, start with a single worksheet or a simple dashboard and pick a single dimension, for example a category or state, that you wish to highlight or filer.
In this tutorial I will be using the "Star Words" viz created by Matt Francis located here.
Step 2 - Create a basic HTML page
Start with some basic tags to create a generic HTML page.
In the example below we add:
• An onload event in the "body" tag calling the "initializeViz" function.
• A div id referencing the viz (we use "center" to align the viz to the center)
• In the script section:
• create some variables for the viz, workbook and worksheet
• create the function for "initializeViz"
• enter the URL for the viz you want to call
var url = "https://public.tableau.com/views/my-workbook/my-view"; TIP - Use the Twitter share button on any Tableau Public Viz to get the URL
• set width and height to match the viz TIP - Use the Embed code from the Tableau Public viz to get width and height
Right click on these files and "Save As" to save them to your computer. Then upload to your hosting server in the appropriate directory.
Next we add code for the various viz functions. In this Star Words viz, we will create 4 selection functions and a function to start over for this tutorial. There is a demo at the bottom of this page that includes all of the functions for Matt's viz.
Place this code in the script tag, right before the closing "/script" tag section in the above code. In this example, the field name is "Character" and the values in the field are the names of the characters, for example "DARTH VADER" and "YODA". The function uses activeSheet and the selectMarks based on those selections. Think of it as dragging the blue pill named "Character" over to the filter shelf and then selecting the name of the character you are filtering.
In the step we create voice commands, add them to annyang and start the listening. Each voice command line is structured with 3 parts:
1.) the words that Tabitha is listening for
2.) the function to control the viz
3.) the voice response back from Tabitha
'Select Darth Vader' - these are the words Tabitha is listening for selectVader() - the function we defined to control the viz to select Character = "DARTH VADOR" responsiveVoice.speak('selecting Darth Vader', "UK English Female"); - this is the text that Tabitha speaks back and the voice type.
Putting it all together
Here's what the final HTML looks like for this tutorial. Feel free to copy and paste from the box below and play with it. In addition, I completed all of the functions for "Star Words" and included a link below.
A completed version of this tutorial with all of the commands added is available here.
Using Filters instead of Selecting Marks/Highlight
When using Filtering instead of Highlighting, use "applyFilterAsync" instead of "selectMarksAsync"
For Example, this code filters for the State="AL" instead of highlighting.
activeSheet.getWorksheets().applyFilterAsync('State', 'AL', tableauSoftware.FilterUpdateType.REPLACE);