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.
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:
