Easy as Pie React + D3 Chord Diagrams in Tableau

A functional example of Tableau integration with Nivo (React + D3) 

First things first...

Chris Toomey has done great work already in this space and I referenced his code and also asked him for help and input along the way. This write up builds upon his work and provides another integration technique and some additional capabilities within Tableau. Thanks for the guidance along the way Chris!

I am also leveraging code from Tamas Foldi and I’s earlier work on d3.js integration with Tableau, those posts are found here and here. He also helped me out with some of the interactive features in this example, so big thanks to Tamas for his help as well.

Second, the details...

Chris’ above referenced write up has a good intro of React for our purposes, definitely give his blog a read to get more information on that front. We are going to be integrating with and leveraging Nivo, which is self described by Raphaël Benitte (it's creator) as “supercharged React components to easily build dataviz apps, it's built on top of d3.” Nivo is one of many react component libraries that work on top of D3, each are different and bring their own features and focus to their projects. Here are a few more worth checking out (in no particular order):

I am going to assume you know how to leverage create-react-app and npm install to get up and running locally and import all the component libraries you will need. If you have not gone through this install process yet Chris’ blog walks you through some key steps you will need to complete, and Google is of course your best friend here. Here are the commands to run:

  • Create-react-app nivo_int
  • Cd nivo_int
  • Npm install tableau-api
  • Npm install nivo

That is it, if you run npm start at this point, your project will be bundled and rendered locally on your machine... Magic!

Once you have your local instance running, you should take a detailed look at how you want to structure your project and it’s components. This is really one of the key steps in the process and I would liken it to determining how you plan to layout your dashboard. For this effort we are going to create two components one to hold the tableau viz object and the other to house the embedded chord diagram within the Tableau dashboard itself.

Let’s do the easy stuff first and work on getting our viz to render on our page. Note: as Chris points out there is a npm package out there (tableau-react) that can make this very simple, but also is missing some of the api functionality. As such, I deferred to using Chris Toomey’s npm package tableau-api

With using create-react-app we are going to modify the src/app.js to write our code for getting our viz on the page. This can be done by importing our tableau-api library and then leveraging it as we would in plain old html/js. Here is how that looks...

So now we run npm start again (or if you left it running it will hot refresh thanks to webpack) and we should have our viz rendered on our page...

Now we have our viz, but it isn’t doing anything special ... yet. Next we are going to work on the component which we will be embedding within Tableau and integrating/leveraging the Nivo library. The bare minimum we can do here is pull the data out of Tableau (via JS API) and send it to Nivo in order to build our chart (on the fly). We are going to try to take a few steps beyond that for this example, including, exposing in Tableau, all of the props available from Nivo. This will allow us to customize the chord to our liking from directly within Tableau! No additional code required (see section 3 below on how to implement this yourself). 

Here are some of the key parts coded to allow for us to get these separate pieces to talk to each other.

In these two code snippets we see different aspects of how to get the two technologies to work together in order to accomplish our goal. Also, do not worry about re-writing any of the above code, you can easily access it on my git here. Click on the image below to view the interactive version on my GitHub. 

This is a screen shot of the interactive example, click the image to visit the working version. Note: interactive version is working best on Chrome, but also functional in most current browsers.

This is a screen shot of the interactive example, click the image to visit the working version. Note: interactive version is working best on Chrome, but also functional in most current browsers.

Third, how to use this without writing code...

Here is a list of steps that you can take to use this without having to write any additional code. 

  • Grab my git repo
  • Change the viz url in src/app.js
  • In Tableau:
    • Add a webpage object to your dashboard
    • If you are copying this to your own git repo then your URL will be https://<username>.github.io/<repo>
    • Pass desired parameters via CHORD PARMS parameter in Tableau. Note this is optional and you can see an example of the format required in my example Tableau Public workbook. This must be well structured JSON and I have not built in any error checking into this process yet either. 
  • Enjoy your new d3 chord with zero additional code needed!

One other important item to note is that I have created four props that you can pass to make use of this technique. They are as follows (case sensitive and all values are strings): 

  • dataSheet - the name of the sheet in Tableau you want to use as the data source (must be on the dashboard that you have webpage object on as well). I would also try to keep your sheet names pretty simple (e.g., avoid special characters, etc.). Default is first sheet found on dashboard.
  • inField - 1 of 2 dimensions you will be using for the chord flow. Default is first field found on sheet. 
  • outField - 2 of 2 dimensions you will be using for the chord flow Default is second field found on sheet. 
  • valField - the measure that you will be representing in the chord diagram. Default is third field found on sheet. 

In addition to these four new props, you have direct access to all of the Nivo Chord Props via the process as well. 

Fourth, what next?

Here are some next steps that we can take forward on this in my opinion...

  • Complete a few more features into this example, like, enabling two-way interactivity between Tableau and React+D3 (only one-way is enabled at the time of this post).
  • Adapt JS API code to Tableau's new Extensions API structure
  • This same method could be used to render any of Nivo’s available chart types or other React + D3 packages for that matter. Additional, functional examples would help demonstrate this and would not take all that much time to put together. 

Updated on 12/4/2017

Additional example of Nivo integration, demonstrating the Stream component of Nivo working with Tableau.

Example integration of Tableau with Nivo Stream component. THIS IS A SCREEN SHOT OF THE INTERACTIVE EXAMPLE, CLICK THE IMAGE TO VISIT THE WORKING VERSION.

Example integration of Tableau with Nivo Stream component. THIS IS A SCREEN SHOT OF THE INTERACTIVE EXAMPLE, CLICK THE IMAGE TO VISIT THE WORKING VERSION.

Visualizing MLB pitch location data with Alteryx + Tableau

This project started with some really interesting reading on the work done by brooks baseball (Dan Brooks and several others) and fastballs (by Mike Fast) sites. There are references to these sites throughout this post. 

Data gathering & preparation work

I used the Perl script from the fastballs - build a pitch db page to download the data from this MLBAM site. Then I leveraged Alteryx to parse the 2.47 million XML files (no, that is not a typo) over the 8 years I pulled data for. Here is a summary of files and their combined size by year.

Thankfully, tools like Alteryx and Tableau provide the ability to take work that would have taken me days and reduce it down to hours. It also allowed me to do a lot of this work while holding the newest Blicker, my newborn baby girl…

The best part is that it is a pretty simple Alteryx workflow within which I gained a new admiration for the directory and dynamic input tools. I know this has been done many times before, but here is my workflow which parses the XML files into a format more suitable for Tableau.

The workflow is:

  • Query the directory with the Directory Tool
  • Parse the path to obtain the different folders and files
  • Use Dynamic Input tool to import all of the files in each subfolder
  • Based on the type of file, differently configured XML parse tools are used in a synchronous manner.
  • Final data manipulations and output to text files for use in Tableau.

Visualization work

My goal was to visually investigate if pitchers and their pitch location have a defined “shape”, or if they all looked the same. Thus, I decided to go with a binned heat map to see if any shape came out of the location data. To create the binned heat map in Tableau, I binned both the Px [x] and Pz [y] coordinate fields to my desired aggregation level. I then manually adjusted (can you see me cringe as I type that?!?) the axes and size of the squares in order to achieve my desired look and feel. Lastly I added a small multiple layout and sorted/limited the data to the top 25 pitchers based on earned run average (ERA) for the year. You can reverse engineer all of this from the workbook embedded at the bottom of the post.

What I found is that most pitchers seem to have pretty consistent angled shape to their pitch location based on whether they throw left or right handed. This of course can differ slightly from one pitcher to the next. There are also some pitchers like Clayton Kershaw and Tim Lincecum (early 2010s) that had shape which was much less angled and thinner than then their same handed counterparts. Here are some examples of this.

Once the pitch location heat map was complete, I decided to supplement it with additional pitch data like speed and movement information (shown in the image above). I utilized a labeling trick that you might have seen before in order to add the pitcher’s names, numbers and various additional stats that you see above, it is not perfect, but worked well enough for this project. First we place the mark (dual axis with circles that are too small and transparent to see) and then we add a separate field with the text to be shown on the label.

I was not thrilled with text only for these additional data points, this limited my ability to easily place the pitcher within the population by scanning the detailed numbers across the small multiple. Thus, I set out to add a secondary layer of visuals, settling on the idea of an overlay of graphs when a specific pitcher is selected by the end user, here is how the overlay looks…

With this approach, I had to cope with the fact that I am covering up two of the five pitchers in each row upon selection. For that I came up with a little trick. Before I get into it, I will say that this method has some issues. Some of which are:

  • You are overlaying visuals on top of your page, you will not be able to leverage tooltips on the underlying viz.
  • I floated the visuals on top, thus sizing was required to be somewhat fixed so all the various dashboard objects where lined up well.
  • You have to create two copies of each overlay chart, this could cause additional maintenance.

That being said, I was reasonably happy with how the effect turned out, so here is how I did it. First thing first, create the base dashboard, then create an additional sheet for the first overlay. Make sure you are happy with this and it is complete, then duplicate the overlay sheet, naming one sheet … L and the other … R. Drag, place and size the sheets on top of your dashboard. Your view should look something like this.

Next we are going to create three simple calculated fields to trigger the effect. “Show L” and “Show R” are simply hardcoded values, these could be set to any value as long as they remain in sync with “Show Value”. “Show Value” is used to display either the right or left side depending on which column in the small multiple grid you are in. If the first 3 columns show the overlay on the right, otherwise show the overlay on the left.

Lastly, we are going to add three dashboard actions to implement the effect on our dashboard. Then, trigger and test that they are working correctly. 

  • We are going to highlight the selected pitcher so the overlaid chart is focused on the selected pitcher.
  • We add two action filters. One for left and the other for right. The are pretty much identical except one filters the left overlay using Show Value -> Show L and the other the right overlay using Show Value -> Show R.

Here is the result, I hope you like the viz and find some useful tricks within it as well. Since I was able to scale this with Alteryx, there are several other years on my public page as well. 

Note: I am just scratching the surface of this dataset and I look forward to digging in more and seeing what others do with it. Please note the license of the dataset if you do decide to download my workbook(s) and do some analysis of your own.

Where's DataBlick at #data17?

We're saddened and outraged by the tragedy in Las Vegas and offer our sympathies to those affected. And we are determined to help make the Tableau Conference a place of connection, community, and support for the attendees and those who were affected. Please check the #data17donates hashtag for how you can help out yourself, the Tableau community is already responding!

We've got a smaller crew than usual at #data17—it might be hard to believe, but babies and little ones can be even more fun than the Tableau Conference. No matter what, though, we're going to rock some new tee shirts, here's a sneak preview:

Who is this jolly fellow?

Who is this jolly fellow?

If you want to find us—Anya, Jonathan, and friend of DataBlick Allan—to score a tee shirt or just say "hi" here's where we know we'll be and when:


Zens in the Community
What: If you've ever wanted to find a Tableau Zen Master and say "thanks!" or "why did you do that???" or ask "what is a Zen Master, anyways??" this is your chance. There will be Zen Masters available in the community center throughout the conference!
Where: South - L1 - Bayside C - Data Village - Community Center
When: Tue 10/10 12-1pm (Anya & Allan)
Wed 10/11 3-4pm (Jonathan)
Thu 10/12 8-8:30am (Jonathan)
Thu 10/12 9-10am (Anya)

PATH #visualizenomalaria Booth
What: Anya, Allan, and Jonathan have all been volunteers on the #visualizenomalaria project and we're excited that PATH has this opportunity to show to the community the great work that has been done by the team of volunteers, partner vendors, PATH, and most importantly the Zambian Ministry of Health staff!
Where: South - L1 - Bayside C - Data Village - Community Center
When: Various times (Anya & Allan)
Tue 10/10 1-1:45pm (Jonathan)
Wed 10/11 4-4:45pm (Jonathan)

Tableau Zen Doctor
What: Hey, we get to play Tableau Doctor and answer your Tableau questions! We've heard that when you register for Tableau Doctor there's no way to request us, you can always leave a message for us at the Tableau Doctor registration desk!
Where: South - L1 - Bayside A
When: Mon 10/9 10:45am-12pm (Jonathan)
Tue 10/10 7-8am (Jonathan)
Wed 10/11 9:45am-12pm (Allan)
Thu 10/12 8:45-10am (Allan)

Crafting Powerful Data
What: Anya & Allan are delivering this session on making "tools not jewels", and incorporating UX from other fields to make more powerful Tableau visualization.
Where: South - L2 - Oceanside D
When: Tue 10/10 2-3pm

Meetup: The Tableau community and user groups
What: This is a celebration and gathering of the Tableau community forums users, user group leaders, and more!
Where: Data Village - Meetup Tables
When: Tue 10/10 3:30-4:30pm

Healthcare User Group
What: Jonathan is facilitating this annual Tableau conference healthcare user group where there will be two presentations from Virginia Commonwealth University Health System and Evolution Health and some time for networking.
Where: Four Seasons - L2 - Four Seasons Ballroom 4
When: Wed 10/11 7-8am


High Alert: Mastering Data Driven Alerts
What: Jonathan & Tableau's Candy Wong are presenting a session on how to take advantage of the new data driven alerting feature introduced in v10.3. Following the session Jonathan will be available for more Q&A at the Zens in the Community.
Where: North - South Pacific E *and* livestreamed for the Tableau Conference Live!
When: Wed 10/11 1:30-2:30pm

See you next week!

What does this person have??

What does this person have??

Lighting as an attentive attribute in KPI dashboards

Lighting as an attentive attribute in KPI dashboards

I have been mulling over his technique of using broadly applied atmospheric washes of paint to draw focus and create intensity, and how to apply it to data visualization.  We usually use the attentive attributes of color, size, shape, position, etc. to draw focus in dashboards.  

I have been spending a lot of time pondering the UX of things not related to data viz and asking how to apply those design ideas to visualization work, as with my widget post.  Outside the sphere of data viz, in everything from photography, to video games, and interior design, lighting is a powerful way to draw focus and create emotion.  I wanted a Marks card with a "Lighting" shelf.

Read More

Dataviz Fun for #Datakids

As we all get ready for back to school (or are already back in school), whether it be Kindergarten or 8th grade its always fun to get vizzing and to get your kids involved!

Recently, the one and only Anya A’Hearn posted her inspiring quantified self project “Consumed”. My daughters are quite young, in the womb, 3 and almost 6. The thought I had was to have them build this type of viz with something they have way more of than they need. For us, an easy candidate for this was their (ridiculous) stuffed animal collection.

Since the kids are so young, having them document this in Excel and then create a Tableau viz wasn’t really going to happen (yet I made sure it did), so we embarked to create our dataviz on the floor of their room. First things first, we took all of the stuffed animals and tossed the into a one big pile…

One step that I missed at this point, was getting a guess from everybody on how many stuffed animals we actually had. Looking back at it now, I think we all would have grossly under estimated the number of animals we have. Oh well, something to remember for next time.

I didn’t really have much of a plan going forward at this point, but next we decided to split up the animals into different categories and make smaller piles for each category. I had the thought of breaking up the animals into the different types that we had, e.g., bears, people, etc. The girls were on board with this, but also overruled the appropriate category for some of their “specials”. This is why there is a bear in the monkey pile, a seal in the “pets” pile, a rainbow bunny in the people pile, another bear in the “Elmo” pile and so on.

At this point we decided to each make a guess at how many stuffed animals were in each pile. This part was pretty fun and we even got Mom involved on the guessing as well. The best part for me; watching my almost 6-year-old take the piles and put them into lines so that she could make more accurate guesses for our game and when my 3-year-old guessed “a lot” for one of the big piles.

Once we finished our guessing game, we made a big bar chart so that we could get actual counts for each of our categories.

And after the final tallies were in…

Our almost 6-year-old came in the big winner, only being one stuffed animal off of the total. The only thing left to do was for the kids to document our real life bar chart on paper (and apparently add some spirals, thanks Moana).

Lastly, it was time for Dad to translate that into Tableau, including matching colors and smiley faces in each bar. I tried to talk them out of this and explain visualization best practices, but, as you can see I was not successful.

I hope you find some fun items and concepts to viz at home as well and look forward to seeing your results!

Tableau Ambient Widgets - the tiny, moody, & relevant data experience!

See that in the lower left corner?  That would be a live updating Tableau Dashboard as a desktop widget on my Mac.  I can keep an eye on things while getting important work done. :-). 

Ambient Tableau Desktop Widget

Almost as hot as those shoes right?  

Why did I make this?  After school and work my kids and I talk about our day.  Sometimes feeling particularly proud of myself, I will show off some dashboard that I have been working on, only to get a "meh" from my kids.

Annoyed with the tween eye-roll, I asked Max what he thought was a cool dashboard?  He fired up Star Wars Battlefront, and then Halo 5 on his Xbox to show me how the "youngs" think data should be consumed.  While in the process of battling the "Dark Side", Max kept a constant eye scan on the little floating widgets which let him know key things such as the weapon he was using, the position of his team & the opposing team, his health level, etc.

battlefront.jpg

This got me to thinking about the standard user experience of getting to a dashboard.  The user experience is:

  • purposefully stops whatever work they were actually doing
  • logs into a server or portal
  • browses for a particular dashboard or view
  • get what they were looking for
  • close the view
  • go back to work

I wanted to create an experience more like Battlefront, so I can keep an eye on key data while they are happening.  Could I just create small widgets for my desktop that would keep me up to date while not interrupting my workflow?  The updated experience would be:

  • glance left

Create a Widget and move it to your desktop on a Mac:

I googled desktop widgets for the Mac and found you could create a "Web Clip" widget from any webpage.  I tested out this using the Polar Clock created by Chris DeMartini with an animation trick by Allan Walker.  

polarclock.gif

 

You can then move the widget from your Mac dashboard to your desktop with this easy to follow step by step guide.

Animation:

Taking advantage of the same technique for animation as used in the Polar Clock, you can use comparisons from a time field in your data to the current time minus how far in the past you want to show in your dashboard.  Mine for example just shows the last 60 seconds.  Once you have pubished your workbook, you can add it to a webpage and animate it with Allan's code.  Just swap out your published viz for the Calls one below:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Tableau Desktop Widget">
<meta name="author" content="Allan Walker, Anya A'Hearn, Jonathan Drummey">

<script src="https://public.tableau.com/javascripts/api/tableau-2.0.0.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>

.middle {
margin: auto;
position: absolute;
top: 0; 
left: 0; 
bottom: 0; 
right: 0;
width:204px;
height:370px;
}
.bannerhide {
width: 204px;
height: 300px;
overflow: hidden;
}
#tableauViz1 {
width: 204px;
height: 369px;
}
</style>
</head>
<body>
<div class="middle"><div class="bannerhide"><div id="tableauViz1"></div></div></div>
<body>


<script>
    var viz, one, workbook, activeSheet, Worksheet, worksheet;
    $(function() {
        var onePh = document.getElementById("tableauViz1");
        var oneUrl = "https://public.tableau.com/views/CALLS_0/CallstoCallCenter?:showVizHome=no&:display_spinner=no&:jsdebug=n&:embed=y&:display_overlay=no&:display_static_image=yes&:animate_transition=yes";

        var oneOptions = {
            width: "100%",
            height: "100%",
            hideTabs: false,
            hideToolbar: true,
            onFirstInteractive: function() {
clock();
}
        };
        
        viz1 = new tableauSoftware.Viz(onePh, oneUrl, oneOptions);
    });;

function clock() {
viz1.refreshDataAsync();
  setTimeout(clock, 5000);
}

clock();
</script>

</html>

 Mood Lighting - the ambient background:

Of course, this is a DataBlick widget, so it needs more glitter!!!!  My widget was for the number of calls from LA 311 (thank you Allan for finding the data),  I wanted to have the background of my widget update its background color with an ambient mood gradient depending on if the volume of calls was in one of 3 ranges (alert!, a bit on the high side, or mellow).  Initially, I thought of using a view swapper or changing the background image based on a value, but I have other devious ambient lighting plans, so I wanted to start to play with it as pixels.  

To do this, I created a very simple sheet with a pixel for every combination of X (0-100) and Y (0-100) to use to create my "moods".  Bringing this into Tableau as the primary sheet, I could create a gradient easily by putting [X] and [Y] where they usually go, and [Y] on color.  To blend in the call center data, the datetime and number of calls needed to be converted to match the axis of the mood grid.  I called Jonathan Drummey to pick his brain on the best way to do this.  To join the data he created a time field off of NOW():

[Mood].[Live DATE Second]

DATEADD('second',-60+[X],
(DATETRUNC('second',NOW())
))

This was joined to a similarly named field in the Call Center data source:

[Calls].[Live DATE Second]

DATETRUNC('second',[LIVE DATE])

The columns uses the [X] from [Mood].[Live DATE Second].  The dual axis of Rows is [Y] *1.0 for the first axis and an Interpolated value for the Number of Calls to scale it on a 0-100 scale.  We used 366 * SUM([CallCenter].[Number of Calls])/1000, but you would normally use whatever your expected highest value instead of the 366, or your Max value in your data set.  More on my 366 below.

I now needed 3 color gradients for each of my moods.  To create this, Jonathan pointed me to a blog post by Keith Helfrich.  

I wanted 3 moods with 3 colors each, plus I needed a break in the middle of each mood for 11 colors in total. with each color as 9.09...% of the range.

From Jonathan:

range of 1-100 + palette cleanser(s)

100 * [# moods] + ( 100 / [# moods] * ([# moods] - 1)

color value

[Y] + 100 * ([mood] - 1) + ( 100 / [# moods] * ([# moods] - 1) * ([mood] -1))

mood 1

1 -100

mood 2

Y + 100 + 33.333 = Y + 133.333

mood 3

Y + 266.7

+ the 100 is my 366 number from earlier!

My preference .tps file was updated with the below to make my moods:

<preferences>

<color-palette name="Ambient3" type = "ordered-sequential"> 

<color>#d883de</color> 
<color>#664ebf</color>
<color>#152aa9</color> 

 <color>#FFFFFF</color> 

<color>#d883de</color> 
<color>#fbb286</color>
<color>#ff78d0</color>  

<color>#FFFFFF</color> 

<color>#f9bc70</color> 
<color>#f97e3f</color>
 <color>#fa4d17</color>
</color-palette>

 </preferences>

I thenk created a [Mood of Calls] field to define the ranges:

IF  [Latest Number of Calls] < 100 THEN "1"
ELSEIF [Latest Number of Calls] < 120 THEN "2"
ELSE "3"
END

and then a [Y by Mood] field to drop on Color:

CASE [Mood of Calls]
WHEN "1" THEN MAX([Y])
WHEN "2" THEN MAX([Y]) + 133
WHEN "3" THEN MAX([Y] )+ 266
END

I then used my newly created Ambient palette, and fixed the start and end to 0 and 366.  here it is below in Tableau before putting it in the widget candy coating, and a link to it on Public:

Tableau Widget
IMG_6339.PNG

I even looked into making it an app on my iPhone which you can do from any "web clip" as well, although I need a better Icon:

A big bummer caveat is that if it is on Public your widget will time out eventually, so this would work much better on your own Server, at which point, security will most likely be a concern.

All said I am having fun playing with creating UX like this, and other "out of the dashboard box" explorations of data consumption, and you can bet that by TC17 Allan and I will be showing off some other crazy town fun we have been working on. 

Step lines and supported bars in Tableau

Step lines and supported bars in Tableau

Step Lines

I am a big fan of step lines (here is a good example from datasketch.es) so I was really excited to see that line type announced at last year’s Devs on Stage. While we wait for that feature to be provided directly within the product, we have two choices: (1) don’t use them, or (2) build them ourselves. Choice two is much more the DataBlick way, so I have tried to provide you with a few steps that you can follow to build this chart type yourself. You can also take a look at Tim Ngwena’s post here which details another method that you can look into for your use case.

Step lines are just lines at the end of the day. When I started looking into how to plot their points accordingly, the prep work reminded me quite a bit of the data prep needed for Jump Plot. We basically need to take our list of points and add an additional mark for each point, and potentially one at the origin (0,0) if that is desired for our viz (as it was in this case). I will be using step lines to help analyze the scoring to par across PGA tournaments this year.

Here is a small sample of the data we will be working with going forward, this is an aggregated data set, looking at the average score to par for pros on the PGA tour this year. We are going to plot “hole” on the x-axis and “Avg Score” on the y-axis to make our viz.

Read More

Weighted Medians for Weighted Data in Tableau

Weighted Medians for Weighted Data in Tableau

There are two ways weighted medians get talked about in Tableau: The first type of weighted median is the one we covered in our earlier Padawan Dojo: Weighted Averages and Weighted Medians post where we’re aggregating a data set and we want to make sure the median is computed over the underlying records. This post is about the second type of weighted median when the data itself has a weight, for example in survey data where each respondent has an assigned weight and we want to find the weighted median value of responses.

Read More

Padawan Dojo: Weighted Averages and Medians in Tableau

Padawan Dojo: Weighted Averages and Medians in Tableau

This is the first of two posts on weighted averages and medians, this one introduces a problem we've seen multiple times where reference lines aren't properly weighted. We need to use a different set of options in Tableau to get the desired results and are helped by an understanding of the different levels of detail that Tableau uses to aggregate measures.

Read More

4th and 5th Grade Girls Help #VisualizeNoMalaria

4th and 5th Grade Girls Help #VisualizeNoMalaria

Over the last couple of months, I was fortunate to have the opportunity to meet with the 4th and 5th Grade Girls Club at a San Francisco school and get them excited about all things data visualization and mapping. In a couple lunches and after school workshops we learned about cartography, map construction, and design, built our own outrageously fun custom maps of San Francisco using Mapbox, and finally contributed to the #VisualizeNoMalaria project by tracing buildings for Humanitarian OpenStreetMap.  My presentation for all the lessons, as well as the instructions for the building tracing are below.   My hope is to help data viz and map practitioners to get involved with children in their local schools to inspire the #DataKids of tomorrow.  Get Mapping!

Read More

Consumed - A study of consumptive malaise

Consumed - A study of consumptive malaise

I think of this viz as a dystopian Harold and the Purple Crayon.  Harold had the power to create a world by simply drawing it.  In this viz, my consumptive malaise draws the world around me.  By sifting through the pile, I discover meaning and conflict in the mountain of banal objects that I interact with daily, and ponder why I use so many things.

The idea was simple - to log every “thing” that I used throughout the course of the day and visualize the “pile”.  Then, categorize and group all the things and see what story they tell.

Read More

To Animate or Not To Animate

To Animate or Not To Animate

Context

Previously I wrote this post around analyzing the predictions generated by 538 during March Madness each year. At the end of the post, I briefly discuss the possibility of telling the same story using animation in place of vertically scrolling through a static set of charts. I believe that, if used correctly, the ability to animate from one chart to the next can greatly assist the reader in understanding your analysis process. 

Read More

Building SVG Paths in Alteryx + Tableau

Building SVG Paths in Alteryx + Tableau

Background

Recently my family watched Disney’s Moana for the first time. We all really enjoyed the movie, especially my two young daughters. After the movie was over, my five-year-old noticed the spiral in the title on the movie case and asked me whether I could build it on the computer. I figured this was as good an opportunity as any to show her the power and possibilities of math. 

Read More

Analyzing 538's March Madness Win Probabilities with Alteryx and Tableau

Analyzing 538's March Madness Win Probabilities with Alteryx and Tableau

Story:

The concept for the story comes from visually comparing these two games (and several others like them). As I followed the early rounds of the 2017 tournament and tracked the games via 538’s predictions site, it seemed, more often then not that Men’s tournament games were closer then the Women’s.

Read More

Building towards d3.js “plugins” for Tableau

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 projectionsTamas 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).

Read More

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