Building towards d3.js “plugins” for Tableau

This post is a follow up to my Vizception post from a few months back. We are still building off the technique described in detail within that effort. Here we will look at two additional implementations leveraging the capabilities available within d3.js (thank you Mike Bostock!).

The first of the two implementations looks at leveraging d3.js mapping projections. Tamas Foldi and I presented this example during a recent Think Data Thursday. Here we will leverage the referenced d3.js code and adapt it for use with our Tableau integration method. This will allow us to build choropleth maps in Tableau with access to the d3 projection library which provides just a few more options in addition to your standard Web Mercator (the Tableau default).

Let’s take a look at the example, and then we can go through some details of how to make it happen. You can modify the view by changing the parameters provided.

click on the image above to interact directly with the map projections example

click on the image above to interact directly with the map projections example

Here are a few tweaks and modifications I made to the initial Vizception code base to make this work. First things first, we need to modify our Tableau event listener to work off of parameter change instead of mark selection. Here is that line of code, we are now calling the function “onParmChange” each time the user changes a Tableau parameter.

Next, within the function we are calling, we are going to do one of two things depending on which parameter the user has changed. This is executed with an if statement and by calling different functions based on the parameter name.

Each of those functions will either transition the opacity of the choropleth or the map projection based on the user selection (named accordingly).

We put this together along with mapping the getData() call to the d3.js visualization and we can leverage d3 map projections within our Tableau dashboards.

While I have only touched on a few snippets, the entire code for this example has been published to Github here.

Still with me? Let’s get into the second example, leveraging d3-brush to filter a dashboard. This is the simplest implementation I have shared thus far. As a result, I was able to spend a little more time on the “plugin” aspect of the deliverable. Assuming these files have been saved onto your Tableau Server, these are the two things that a Tableau dashboard developer will need to do to leverage this technique (e.g., no more hard-coded field names).

  • Drag a webpage object on their view with the correct URL. (See the caveat below, but for now the size of this object should be ~975px width and 75px height.)
  • Create two parameters
    • “xAxisField” – The name of the Date field to display on the X-Axis (also used for date range filtering).
    • “yAxisField” – The name of the measure to display on the Y-Axis.
  • Caveat – This is still fixed in size, with more work it could be built completely responsive, etc. to make it adaptable in any size dashboard vs one that is fixed in size. 

Let’s take a look at the result and then get into some of the details. You can modify the view by moving, shrinking or expanding the brush component (grey rectangle) of the d3 visualization.

click on the image above to interact directly with the brush example

click on the image above to interact directly with the brush example

Let’s look at the calls where we leverage the Tableau parameters to drive the d3.js visualization. Here we call getParametersAsync() and then store the resulting array into the variable “parms”. We loop through the array and look for our two specified parameters and also store their corresponding values into variables. We will later reference these variables for all arrays and manipulation associated with our getData() call at the bottom of the code snippet below.

Let’s also look at the modified “brushed” function from the d3.js code referenced above. We have changed this to leverage the Tableau JS API and apply the appropriate filter to the sheets in our dashboard upon being called. Here we leverage the applyRangeFilterAsync() call to apply the min/max date values of the brush to our dashboard.

While I have only touched on a few snippets, the entire code for this example has been published to Github here.

As you can see, we are inching closer and closer to this code being a stand alone plugin on Tableau Server. As I said in the Vizception post, I am really excited about all the possibilities this can open up and firmly believe that we are just scratching the surface with the above examples.

Telling a Story in Tableau

This short post is around trying to create an article like structure with in-line visualizations all within Tableau. Inspiration for this pulls from sites like 538 and polygraph as well as several authors from the Tableau Public community (like the one noted below, this recent VotD).

There have been many examples across the Tableau Public community showing the data storytelling capabilities of Tableau. These include leveraging additional JS libraries (via API/embed) like reveal.js (thank you Jeff Shaffer!), but others that caught my eye recently where examples of building out an entire story in a long form Tableau dashboard. Here is one example that Rob Radburn posted recently that got me thinking. Note: there are several others, this one by Rob is just a single recent example. 

I decided to see just how much work it is to do something like this, all within Tableau. The answer... not all that much. Like every tool, Tableau makes some hard things easy and some easy things hard. This type of visualization is a great example of the former and demonstrates the creativity that Tableau can empower it's Desktop users with. The viz story is just a simple collection of visualization sheets and text boxes, you can download the workbook to see how I went about laying out the story. The viz below is best viewed in landscape, hope you like it! 

3D "Printing" in Mapbox, Alteryx, and Tableau: "I've got big balls!"

3D "Printing" in Mapbox, Alteryx, and Tableau:  "I've got big balls!"

While starting to work on a new viz project, I came up with the idea to create empathy by putting the user inside of a 3D map with the data happening around them like a virtual reality movie.  Yes, the DataBlick crazy-town express train is starting to chug out of the station again.  This post shows some of my initial explorations into jumping in a viz.

Read More

Rose Curves in Tableau

Rose Curves in Tableau

I love when people get creative and come up with visuals like these, if you want to see more, check out Shirley Wu’s project with Nadieh Bremer at datasketch.es for starters. Techniques like these (or using things like the rose curve) to encode data will definitely require a more engaged user base. Readers will need to take some time to understand what each rose petal/shape is and then it will take them time to compare the petals across the visual. This type of technique is probably not the best choice to visualize your data when granular differences between your marks need to be analyzed by your reader.

Read More

Sensor vs. Simulated IED: Max's Science Fair Project using Tableau for Image Analysis

Sensor vs. Simulated IED:  Max's Science Fair Project using Tableau for Image Analysis

This is a post by Max, Anya's 12-year-old son.  It was his Science / Engineering Fair project where he used Tableau to visualize his results.  Thank you, Adam McCann and Merlijn Buit for your posts on color analysis that were used by Max for this project.

Each year many people die of bombs and other explosive devices. Some examples are the Boston Marathon and the recent bombing in Manhattan. In many modern wars, thousands of soldiers die due to IEDs (Improvised Explosive Devices). In my project, I will use an infrared sensor to find a cell phone (in place of an IED) in different temperature environments. Judging by how easy it is to see the cell phone, we can tell where infrared would work best, as well as where it would not work.  Using this information we can know when to use infrared sensors to save lives.

Read More

The 3D Tableau Full Monty

The 3D Tableau Full Monty

Recently DataBlick had a client project dealing with analyzing parts on a car during manufacturing and transport, and the client wanted something like Noah's Tesla.  We all want a Tesla, right?  Well, now you can have one (in Tableau at least).  In this post, I'll walk you through how to find a 3D model and get it into Tableau.  The next post will show how to trick it out a little bit as well as "explode" parts in a 3D tool before bringing them into Tableau so you can highlight and interact with them on your dashboard.

Read More

X, Y and a bit of Z - Cheater 3D Orthographic Views & Making everything "Spatial"

X, Y and a bit of Z - Cheater 3D Orthographic Views & Making everything "Spatial"

Anya must have pinged me 10 times over the course of the last week asking me questions about rendering 3d cars in Tableau. I figured it must have something to do with curing malaria. My reply was a bit ironic given the fact that I’ve done my own 3d car. I did it for fun though… I don’t like being told I can’t do stuff. it just doesn’t work as part of a production workbook. Well… from a performance standpoint maybe we will get there soon. But for now my suggestion was to pick a good angle and then drive a steamroller over it and just make it into polygons. I really should have seen the next question coming, but she asked how to do that. I was stumped. My best idea was, hire a graphic artist to trace it for you…

Last night she told me she solved it using QGIS… mind explosion! Of course! Why not use mapping software for this? Geography isn’t the only thing spatial. Why shouldn’t you use QGIS to map your car, your plane, the shelves of your supermarket, what have you. I always thought background images were misplaced in Tableau, I wonder if this is what they were thinking when they put it under maps. Latitude and Longitude are just a special name for x and y (or is it the other way around?). Why not hijack Tableau’s mapping capabilities and import your polygons as custom shapes?

I’ve gone to great lengths to hack multiple layers onto maps, so I was excited to hear multi-layered maps will be coming to Tableau, but this opens the door to hacking that feature into all sorts of things. Someone once told me that everything in Tableau is a scatterplot but I’m starting to think maybe everything should be a map. Oh… I am going to crash that Beta so hard!

Read More

#Data16 Twitter Network Project

#Data16 Twitter Network Project

For this year’s conference I undertook a project with Keith Helfrich to harvest tweets tagged with #data16.  We collected the tweets regularly throughout the week, and updated a view of high level summaries and detailed network visualizations.  This post details some of the highs and lows that we came across, and provides access to the workbook so you can do your own analysis and review as well. Please also be sure to check out Keith’s post on the same subject here.

Read More

On the topic of community: & being friends and mentors.

On the topic of community:  & being friends and mentors.

First - sign up and sign up for Emily Kunde's Mentor Match program, and have a chance to win an hour of help with either Allan or Anya as well as other prizes to be announced on Emily's site soon.  

This friendship started with a Tweet:  March 5th, 2014 Tweet to @AllanWalkerIT help…..!  ? "Since you are the king of Tableau Maps, I wanted to see if you had any suggestions?"  For over two years now, we have worked together on many collaborations.   We hope with a quick review of how we have expanded our skills by working together, you can learn from our take-aways and find friends and mentors to work with. 

Read More

Vizception: Viz in a viz & native d3.js integration on Tableau Server

Vizception: Viz in a viz & native d3.js integration on Tableau Server

We wanted to show a real example of how to bring more to Tableau Server without additional hardware or hosting needed. That’s right, no additional server purchase requisition requests needed. There are really too many use cases to count when it comes to this, the details herein are only the tip of the iceberg.

We had a few short discussions and landed on the following example. This includes not only native d3.js integration but also an example of viz in a viz (in a viz) on Tableau Server. As a starting point, we used the twitter network graphs that Keith Helfrich and I recently shared, which were showcased on the Tableau bloglast month.

Read More

Tableau Padawan: Faster Nested Sorts

Tableau Padawan: Faster Nested Sorts

Tableau's sorting behavior is somewhere between "a little weird" and "WTF?!?" for those of used to the nested sorting behavior we can get in Excel and other tools. This is one case where Tableau's "mental model" of sorting doesn't match the mental model of many users, if you'd like Tableau to change this you can vote for the Independent Sorting feature request. Explaining why Tableau sorts the way it does would take a much longer post, for now, I'm going to skip the "why" for the "how" and the "what" and jump into my preferred & faster way to do nested sorting using an ad-hoc calculation.

Read More

Tableau Padawan - When the Pill You See is Not the Pill You Use

Tableau Padawan - When the Pill You See is Not the Pill You Use

Today’s lesson is about understanding Tableau as a data driven drawing engine: change the data and we’ll change what Tableau draws. In this case we’re going to change the data to change the color. Recently I received a question where someone had created a heatmap with a diverging color palette like this (demo built using Tableau’s CoffeeChain sample data).

Read More