Part 3: Creating the Steem Tag Explorer -- The Dashboard

in #steemit6 years ago (edited)

SteemTagExplorer (1).png

This is the third and final post on how to build the interactive Steem Tag Explorer in Tableau Public. I first described the explorer in this post:

The next two posts walked through the steps on how to build the main charts for the dashboard:

In this third, and final, post I will show you how to pull all of the graphs together to create the interactive dashboard:

Steem Tag Explorer tooltips

Creating the final dashboard is a bit tricky, because we have to use a workaround called sheet swapping to switch between linear and logarithmic versions of the graphs. Although it look like the axes on each graph are changing below, the dashboard is actually hiding one version of each graph and revealing the other:
Steem Tag Explorer Logarithmic Axes

Add the Axes Parameter

The Axes menu is a Tableau parameter that we will eventually use to control which set of graphs are visible. To create it, click on the Table Lens worksheet tab (though any worksheet tab will do) and then create the parameter like this:

Now select List and enter Linear and Logarithmic:

Now show the parameter control:

Finally, change the control to a single value list:

Create Filters to Hide and Show the Graphs

At this point, the parameter control just changes the value of the Axes parameter. To hide and show graphs with linear vs logarithmic axes, we need to create filters that remove all of the data from the graph we wish to hide. To do this, drag *Tag* to Filters and set up a conditional filter as follows:

Now the Axes parameter control shows and hides the graph:

To show and hide the other two linear graphs, apply the same filter to those worksheets:

Now if you go to either of the linear graphs you will find that the parameter control on the linear Table Lens graph controls the visibility of those as well. You can also show the parameter control on each of the other linear graphs to directly manipulate the parameter on their worksheets.

This technique works by filtering out all of the data on the linear graphs when Axes is set to Logarithmic. When there is no data to show on the graph, Tableau will not draw the axes, so the graph disappears. The title, however, does not disappear, but I will show you how to manage that later.

Next, follow the steps above to add a similar filter to the logarithmic graphs, only this time the conditional filter should read [Axes] = "Logarithmic"

Create a New Dashboard Page

Create the new dashboard and name it Steem Tag Explorer:

Use the main menu: Dashboard->Show Title to show the dashboard title on the page, then double click the title and format it by making it bold and blue.

Finally, set the dashboard size to 1000 x 800:

Add the Containers to Hold the Graphs

This is more complex than I would like, because sheet swapping only works if two graphs are in a vertical container. To have all three graphs swap between linear and logarithmic versions and preserve the layout you must add the right types of containers in this order and in the exact postions shown:

Add the Table Lens Graphs and Test Sheet Swapping

Now drag the Table Lens sheet to the upper container and Table Lens (Logarithmic) to the same container, but positioned below the first graph:

Hide both titles to get nearly perfect sheet swapping:

If you are used to other methods for doing sheet swapping, note that tooltips still work for both graphs when using this approach. In addition, I will show you below how you can easily title the swapped graphs without creating a dummy sheet.

Add The Scatterplots

Add the scatterplots to their respective containers, placing the linear version at the top of its container. This time, just hide the title for the logarithmic versions of each graph. This will give you the same title regardless of which version is shown:

Fix the Color Legend

Notice above that when Linear is selected there are two color legends, but when Logarithmic is selected those legends disappear leaving only titles. The two legends are from the two linear graphs. We really only need one legend for all of the graphs, so delete the second legend and hide the title on the first:

Now select Logarithmic in the Axes parameter control and then show the legend for one of the logarithmic charts:

Now hide the title on the logarithmic color legend to give the appearance that there is only one legend when switching between axes:

Enable Cross-Graph Highlighting

When you click on a tag's mark in any graph, it's marks on all other graphs are highlighted:
Steem Tag Explorer Click for More

First enable highlighting across all graphs on the dashboard on *Tag* by doing this:

Now the marks for a tag on all of the graphs are highlighted once one is selected. To show a label for each highlighted mark, you must visit each graph's sheet and edit its Label to get the effect you want. For the Table Lens graphs this is easy. Just set the label to show for highlighted marks only:

On the worksheet only the single mark clicked will show a label, but on the dashboard all of the marks on this sheet will show a label. This is due to the highlight action that we added above for *Tag* on the dashboard, but not on the worksheet.

Next, change the logarithmic table lens graph's label settings to match the linear.

The scatterplot labels show the tag name and value:

To do this, first use the technique above to show the label for highlighted marks, then drag the appropriate fields to Label and format it:

Do this for each graph. You can look at the live Steem Tag Explorer to see what I put on each label, or just decide what you think is best. One tricky issue is that if a graph is hidden (because of the Axes selection you will not be able to edit its label. Just change the Axes parameter control on the dashboard to reveal the graph you want to edit.

After all of this, clicking on any tag's mark in any graph will show mark labels on all of the graphs:

Add URL Dashboard Actions

When you click a mark, the tooltip menu changes to show URL actions that allow you to head to that tag's page on Steemit:

Each one of these is added using the menu:
Dashboard-->Actions..."
For each URL, select Add Action... Go To URL and then fill in the dialogue like this:

Note that the last part of the URL is replaced with <*Tag*> so that Tableau will substute the tag name for whichever tag you clicked on.

Add the Highlighter Control

The highlighter control makes it easier to find tags. Here is how it works:
Steem Tag Explorer tooltips

Sheet swapping makes this tricky. Normally, you could select any graph on the dashboard and bring up its menu to show highlighter controls. You can do this here, but because we want one highlighter control on the dashboard no matter which graph we choose to show the control for, that graph will be hidden at some point. Remember that hiding a graph means we have filtered all of its data. That means there are no tags on the graph, so the highlighter control will show no tags to search for or select:

To solve this we need to use a workaround: a hidden dummy sheet that contains all of the tag values, but does not use the filter for those tags that we placed on the other sheets.

Create a new worksheet called Tag Highlighter and just drag *Tag* to Detail then set the Marks type to Bar:

Next, drag this sheet onto the dashboard into the tall container on the right, hide the title, and use the Highlighters menu to select *Tag* (this is out of frame below):

Now the tag highlighter works, even when we switch axes:

Add Textual Instructions

This is easy:

Reorder and Change Menu Spacing

You will probably need to switch between Linear and Logarithmic axes to be sure you have reordered everything to your liking.

Hide Tabs

There is no need for the user on Tableau Public to see all of the individual tabs in the workbook, so right click all but Steem Tag Explorer and the SBD Per Post vs. Comments tabs and select Hide.

Save Your Dashboard to Tableau Public

Before publishing, be sure the the two tabs are in the exact visual state you want a user to see when they first visit the dashboard. Then save or publish to Tableau Public.

Test the Dashboard

Be sure to test your dashboard once published. Remember to check to make sure the data is being updated correctly as well.

Congratulations

You've just made a somewhat complex dashboard in Tableau that dynamically connects and updates web-based data and uses a number of more advanced tricks and features, such as sheet swapping, URL actions, highlighters, and cross graph highlighting.

For more on the theory of visualization check out the post below and follow me for more to come.

Todd

SB-Marvel-Family.gif

Sort:  

Congratulations! This excellent post was chosen by the new curation initiative of the @postpromoter content promotion service to receive a free upvote!

This post exemplifies the type of great content that we at @postpromoter enjoy reading and would love to see more of on the Steem platform. Keep up the good work!

This is an incredible series of posts @toddrjohnson, well done. I'm pretty sure this is the nicest post I have seen this week. And that says a lot, as a curator, I spend most of my time diving through massive piles of steemit articles. Not many of them are of this caliber, and for that you just got yourself a shiny new follower. :D

Thanks for the kinds words. I really appreciate the support. I am trying to do some add-on materials that are aligned with my visualization class by experimenting with new approaches (I usually do everything via video). I'm trying to provide one new optional item each week related to the week's topic. This series turned out to be much more work than expected. I intended to do a single post on the tag explorer with a few quick steps on how to make it. In the end, I had to break it up into the first on the Steem Tag Explorer and then these three showing how to do it. In the end, I think it took longer than doing it by video.

You got a 10.56% upvote from @postpromoter courtesy of @postcurator!

Want to promote your posts too? Check out the Steem Bot Tracker website for more info. If you would like to support the development of @postpromoter and the bot tracker please vote for @yabapmatt for witness!

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by toddrjohnson from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.

That's quite a project you've undertaken! However, very well laid out and explained.

Thanks! It was quite a bit more work than I expected, but having it all written down should help others better understand how to use some of these techniques in their own work. I essentially did the tag explorer twice--once to make it, and then again to write up the how-to posts. By the time I was writing the how-to a few days later, I had already forgotten some of the techniques I used to get the functionality I wanted.

I'm still on my first cup of coffee, but even still, I was able to understand and follow the process of creating the tag explorer. And that's sayin' something! 😂

Excellent tutorial, @toddrjohnson! 😊

Glad you liked it. More to come...

Coolness! 😊

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70597.89
ETH 3559.60
USDT 1.00
SBD 4.77