JavaScript Notebooks in Tableau

Reactive JS notebook using Observable Runtime can be embedded into Tableau Workbooks using the extensions framework. Read more about the Iridium Embedded Computational Notebooks in this Medium Article

This article is a step-by-step walkthrough to get you started on using interactive JavaScript inside Tableau.

Step 1: Create a Tableau Workbook with your data

Import your data as you would normally do

Create a worksheet with the required fields

Step 2: Setup a Dashboard to use the extension

Add a new Dashboard to your workbook, choose a layout that works for you, and add the sheet you created in the previous step to it.

Add a new dashboard where the extension can be added in the next step

Step 3: Download and use the Tableau Iridium Extension

Download the TREX file for the extension: https://wishyoulization.github.io/iridium/tableau-iridium.trex

Create a dashboard, add an extension card to it and choose ‘Access Local Extensions’

Allow the extension access to your workbook

Congrats! Its now ready to use.

Step 4: Write some JS to fetch Worksheet data to Notebook

The extension window is the notebook interface to create, edit and remove cells, you run them using shift+enter or the play icon . You can also pin/unpin the code section.

Read the worksheet and it’s summary data from the notebook

worksheets = tableau.extensions.initializeAsync().then(() => tableau.extensions.dashboardContent.dashboard.worksheets)

data = worksheets[0].getSummaryDataAsync()

Tableau summary data is a 2 dimensional array, that be transformed using some JS

sheet1 = data.data.map(row => {
var tmp = {}
data.columns.map((col, col_index) => {
tmp[col.fieldName] = row[col_index].value
})
return tmp
})

Example: Transformed data to a simple a JSON object array

Step 5: Use any Observable Notebook cell/imports as needed for your analysis

Use Plot, D3 or any other JS based library in the notebook

Don’t forget to save your notebook (the red/pink lines on left border indicate un-executed/un-saved cells)

We can build complex bespoke data visualizations using JavaScript within Tableau without having to open any other tools now!