#Data15: Pimp My Viz 2: Electric Boogaloo Follow-Up

October 26, 2015
10-26-2015 12-40-14 PM

I had a blast bringing back my weird point-of-view on making dashboards a little more fun to #Data15. Last year, I focused more on custom design and making things look as little like Tableau as possible. This year, I went a little more in the direction of doing some calculations and interactions that are a little more advanced. Let’s take a look at what I did!

But first, here’s the video I couldn’t get to play in my session:

Viz #1- Buzzfeed’s Most Viral Numbers

Ok, ok. Before you get too mad at me, yes. I admit it. I pimped my own viz. But it was out of desparation! All the vizzes submitted to me for Pimp My Viz were already too pimped out! Stop getting so good at Tableau, people! (Actually, don’t stop. It’s awesome.)

So here’s some stuff I did to make this dashboard a little more pimpin’

Design

Calculations

Viz #2- Price of Gold Over Time

This is a pimped out version of a viz originally by former Tableau intern and wunderkind Quinn Schiller. You may remember him as the badass who figured out how to use pages to make animated gifs in Tableau. In honor of that, GIFs were one of the key features when I made over his Price of Gold dashboard (which has some excellent annotations and storytelling in it!). Here’s what I did:

OMG! A useful application for gifs?!?!?!


You’ve gotta be kitten me!

It’s true! I thought of a useful application for gifs! I know I’m not alone in lamenting that using animation on the Pages shelf in Tableau doesn’t not work once published to Tableau Public or Server. But, we can use gifs to work around this! Check it out:

How is this done? It’s actually pretty simple:

  1. Create the gif. I used Camtasia, which I have for recording training videos, but that’s a pretty hefty piece of software. There’s plenty of free tools to create screen capture GIFs, so pick whichever one works best for you.
  2. Host the gif online (again, Imgure FTW!) and embed it on your dashboard as a web object.
  3. Float the sheet that you are animating on top of the web object. What we are basically doing is a variation on this trick I wrote about last year, to leave your viewers with a message when filters make your vizzes disappear.
  4. Last, we need to create a button to make the viz disappear and show the animated gif behind it. To do this, I created a calculation that equals “Null” for everything. I made a button out of it by creating a sheet, putting the calc on text, and setting a square shape in the background. I edited the text label to say “See/Stop Animation”. I added to my dashboard with a dashboard action that effects the scatter plot on click and where clearing the filter excludes everything. This is what makes the chart disappear and the gif behind it reveal itself.

5 Easy Ways to Pimp Your Viz

To end the session, I gave a rapid fire list of 5 easy ways to Pimp Your Viz. This was based on a blog post I did earlier in the year, but here are those steps again, just if you need a refresher:

  1. Colors. Don’t be satisfied with the default Tableau blue! I like using sites like Colourlovers to choose color palettes that aren’t built into Tableau. I also like that they limit their palettes to 5 colors, which makes you really think about how you are using your color. Ryan Sleeper wrote a pretty fantastic blog post about color a couple years ago that is still a great resource.
  2. Marks Card Magic. Along with changing the color, there’s plenty you can do with the Marks card to pimp out your viz a bit. Make your bars fatter! Add labels! The stuff I did to the bars in the BuzzFeed viz above is a good example of how simple changes on the marks card can make a pretty strong impact when it comes to making a viz look custom.
  3. Add a banner. A good title for your viz is a MUST. And you might as well take that opportunity to make a banner. Banners are great because you can communicate what the theme of your dashboard is and set the tone for what people are about to see. My typical banner strategy is to find an image related to what the dashboard is about, crop it, blur it, and add the title in a custom font. I often use Adobe Illustrator for this, but a few people in the viz design community have confessed to me they just use Powerpoint for this and it gets the job done. For a web based solution where you can create some REALLY gorgeous graphics for your vizzes, I highly recommend Canva. It’s a web based drag-and-drop design tool that’s super intuitive and has stock images built right in for you to use. I actually use it all the time for designing gig posters for my band and am just now starting to use it for viz work. But I have a feeling it’s going to be my go-to from now on.
  4. Clean up the tooltips. SWEET MOTHER OF GOD JUST CLEAN UP YOUR TOOLTIPS, OK?!?! You should NEVER EVER EVER publish a viz with default tooltips. I assure you, they look like unreadable crap 100% of the time. In my session, I said that if you don’t clean up your tooltips, little fairies will fly into your bedroom at night and punch you in the face. I’m not joking. Although, the little fairy might be me in a tutu and fair wings, but I assure you, you’ll get punched. In the face. You don’t want that do you? So just clean up your tooltips, ok?
  5. Thoughtful Interaction. A dashboard without interaction is like pizza without cheese…. an ABOMINATION. Think through how people might want to interact with the data you are presenting them and try to make the order of operations make sense. Make the order that you click things go from left-to-right and top-to-bottom since people in the Western world read that way. Have a friend look at your dashboard and just watch what they try to click on and make those the areas where you put your interaction. The more people play with your viz, the more they’ll remember it!
  6. Finally, let’s wrap this up with some of my favorite tweets about my session.

    Need more pimping? You can also watch the original Pimp My Viz session from TC14 in Seattle and read the followup!

Tags
#Pop Viz #Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *


*