Create Next-Level Dashboards with Tableau and D3.js


Create Next-Level Dashboards with Tableau and D3.js

by Robert Rouse

Developing interactive web-based data visualizations used to involve long, frustrating hours of hammering out code and mutilating bugs that kept us awake at night. Those days are largely over thanks to tools like Tableau that are as simple as drag, drop and publish. There are still good reasons for the occasional late-night hackathon. Sometimes, you need a next-level visualization that just isn’t possible with built-in options.

Tableau’s JavaScript API enables interactivity with different parts of a web page. That means you can program a highly-customized viz that controls (or is controlled by) an embedded Tableau view. This is where D3.js comes into the picture. D3 is a powerful JavaScript library for creating web-based data visualizations. A quick scroll through these examples will demonstrate the breadth of creative options available. Below is an example that combines D3 and Tableau to visualize the 2014 Federal Budget by navigating through each agency and bureau. 

That’s a Cool Viz, but Why Bother with Code?

Building in best practices means that Tableau’s Show Me options will likely never include 3-D donut charts and other visualizations that skew our perception of numerical values. That said, D3 supports chart types that are not (yet) practical in Tableau. One great example has to do with graph analysis. If you follow popular data bogs, you have likely seen social network graphs displaying the “connectedness” of followers, friends or colleagues. A recent post by Nicholas Laurenti describes this concept further. D3 has an excellent example of a force-directed layout that shows the relationships among characters in “Les Misérables.” Click one of the circles and drag it around to experience the full power of this JavaScipt library.


Take your time. Keep dragging that graph around. You know you want to. Isn’t it fun? If that’s the kind of “wow” moment you want in your dashboard, D3 is the way to do it. But, you don’t have to create the whole thing that way. Take full advantage of Tableau’s ease of use to design your maps, bars, lines, treemaps, box plots, etc. Save the agony of debugging for only the code necessary to integrate everything.


What Kind of Code Does It Take?

Anyone reasonably familiar with writing JavaScript could create something like this. Most of the examples on the D3 website include the data and code used to build a viz. Just replace the sample data with your own (though it may take some reshaping first) to get off and running. In the Federal Budget dashboard above, I started with the code behind the collapsible tree layout. Then, I added an event listener to filter the Tableau dashboard based on the agency or bureau selected in the hierarchy. That simply calls a function to apply filters and set parameters using the Tableau JavaScript API. Those and other functions are covered in Tableau’s online tutorial.

All of this assumes you are using a web interface other than the one that ships with Tableau Server. The ability to customize vizzes is just one reason to embed views in a different environment, but there are many other good reasons to do so. Customer-facing data especially deserves the extra effort to simplify navigation, match corporate branding and blow people’s minds with sleek and effective presentation of data.

What Else Is Possible?

What isn’t possible? The examples above show how to navigate a hierarchy with a tree layout (a.k.a. “dendrogram”) or analyze a network with force-directed graphs. Here are some other ideas to consider:

  • Sankey Diagrams: These are effective in showing flows through websites (such as with Google Analytics Visitor Flow), call centers or supply chains.

  • Expanded mapping: This includes alternate projections, animated maps and cartograms.

  • Web-based data: You can integrate charts from web data sources with Tableau-friendly data sources (usually a relational database) in the same view. Note: Future versions of Tableau will include web data connectivity.

  • Animation: Well-designed animations can draw attention to data points or visualize change over time. Tableau Desktop supports animation with the Pages shelf, but it is not available through Tableau Server.

In short:

D3 plus Tableau use cases



More About the Author

Robert Rouse

Analytics Consultant
Eine neue Art KPIs in Tableau zu visualisieren Key Performance Indicators sind eines der Dinge, die Leute am häufigsten in Tableau darstellen möchten. Das bezieht für gewöhnlich ein, ...
Disney Data & Analytics Conference 2019 in Review At Disney World, every park has a theme. What you may not know is that their annual data and analytics conference has a theme, too. In ...

See more from this author →

InterWorks uses cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Review Policy OK


Interworks GmbH
Ratinger Straße 9
40213 Düsseldorf
Geschäftsführer: Mel Stephenson

Telefon: +49 (0)211 5408 5301

Amtsgericht Düsseldorf HRB 79752
UstldNr: DE 313 353 072


Love our blog? You should see our emails. Sign up for our newsletter!