1/11/2016
Tabitha – Voice Recognition and Voice Response for Tableau
Getting began with Tableau Javascript API
Very first thing is to know the fundamentals of the Tableau Javascript API. In case you are under no circumstances conversant in it, there’s a Tableau Javascript Tutorial by Tableau Software program to assist get you began. This may stroll you thru the code step-by-step.
Necessities for Tabitha
• A Tableau Public Visualization that you just wish to work together with
• Tableau Javascript API
• annyang.js
• responsivevoice.js
• Chrome browser
• Internet hosting functionality, ideally safe internet hosting for microphone permission
• Some primary HTML and Javascript information to place it collectively (listed step-by-step beneath)
• Some form of textual content editor, for instance Notepad++ (obtain here totally free)
Step 1 – Construct your Viz
Create your visualization and cargo it as much as Tableau Public. On this demonstration we are going to present the best way to management the viz utilizing each Spotlight and Filter Actions. To make it simple, begin with a single worksheet or a easy dashboard and decide a single dimension, for instance a class or state, that you just want to spotlight or filer.
On this tutorial I might be utilizing the « Star Phrases » viz created by Matt Francis situated here.
Step 2 – Create a primary HTML web page
Begin with some primary tags to create a generic HTML web page.
Customary Tableau Embed code may very well be inserted after the « Good day Phrase » line and you’ll have an embedded viz in your web page. As an alternative of doing this, we’re going to load the viz a special approach. That is the place to begin for utilizing the Tableau Javascript API.
Within the instance beneath we add:
• A reference to the Tableau Javascript within the « head » tag.
• An onload occasion within the « physique » tag calling the « initializeViz » perform.
• A div id referencing the viz (we use « middle » to align the viz to the middle)
• Within the script part:
• create some variables for the viz, workbook and worksheet
• create the perform for « initializeViz »
• enter the URL for the viz you need to name
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 peak to match the viz
TIP – Use the Embed code from the Tableau Public viz to get width and peak
Step 3
Subsequent, you’ll need to obtain 3 Javascript information and place within the listing with the webpage (or no matter listing you want to name them from within the HTML code).
Proper click on on these information and « Save As » to save lots of them to your laptop. Then add to your internet hosting server within the applicable listing.
Voice Response requires responsivevoice.js
Voice Recognition requires two information: annyang.js and annyang.min.js
Step 4
Subsequent we add code for the varied viz features. On this Star Phrases viz, we are going to create 4 choice features and a perform to start out over for this tutorial. There’s a demo on the backside of this web page that features the entire features for Matt’s viz.
Place this code within the script tag, proper earlier than the closing « /script » tag part within the above code. On this instance, the sector identify is « Character » and the values within the discipline are the names of the characters, for instance « DARTH VADER » and « YODA ». The perform makes use of activeSheet and the selectMarks based mostly on these choices. Consider it as dragging the blue tablet named « Character » over to the filter shelf after which deciding on the identify of the character you’re filtering.
Step 5
Within the step we create voice instructions, add them to annyang and begin the listening. Every voice command line is structured with 3 components:
1.) the phrases that Tabitha is listening for
2.) the perform to regulate the viz
3.) the voice response again from Tabitha
Instance:
‘Choose Darth Vader’: perform() { selectVader(); responsiveVoice.converse(‘deciding on Darth Vader’, ‘UK English Male’); },
‘Choose Darth Vader’ – these are the phrases Tabitha is listening for
selectVader() – the perform we outlined to regulate the viz to pick out Character = « DARTH VADOR »
responsiveVoice.converse(‘deciding on Darth Vader’, « UK English Feminine »); – that is the textual content that Tabitha speaks again and the voice sort.
The default is a feminine voice, however discover within the code beneath we now have the response for Darth Vader switched to a « UK English Male » voice. There are 160+ voice sorts obtainable within the newest responsivevoice.js. See the Javascript documentation on their web site for extra data (here)
Placing all of it collectively
This is what the ultimate HTML appears like for this tutorial. Be at liberty to repeat and paste from the field beneath and play with it. As well as, I accomplished the entire features for « Star Phrases » and included a hyperlink beneath.
A accomplished model of this tutorial with the entire instructions added is out there here.
Utilizing Filters as a substitute of Deciding on Marks/Spotlight
When utilizing Filtering as a substitute of Highlighting, use « applyFilterAsync » as a substitute of « selectMarksAsync »
For Instance, this code filters for the State= »AL » as a substitute of highlighting.
perform filterAlabama()
{
activeSheet.getWorksheets()[1].applyFilterAsync(‘State’, ‘AL’, tableauSoftware.FilterUpdateType.REPLACE);
}
That is the approach I utilized in my blog post from March of last year once I added voice to Kelly Martin’s Birdstrike viz here.
I hope you’ve gotten enjoyable including Tabitha to your visualizations. In case you have any questions be happy to e-mail me at Jeff@DataPlusScience.com
Jeffrey A. Shaffer
Comply with on Twitter @HighVizAbility
