Skip to main content

Votre navigateur est trop petit

Redimensionnez votre navigateur pour pouvoir poursuivre votre apprentissage interactif. Nous vous recommandons une largeur d'au moins 900 px.

+100 points
Environ 15 min

Learning Objectives

At the end of this unit, you’ll be able to:

  • Minimize clutter in a viz.
  • Customize tooltips.
  • Adjust the fit of a viz.

Connect Your Tableau Public Account

To get started, connect to your Tableau Public account in the Playground window to the right. If you don’t already have a Tableau Public account, sign up for one now, and be sure to activate your account before starting this interactive unit. You can find more detailed instructions in The Tableau Data Model.

Note

The playground resets if your Tableau Public login session expires or if you refresh the page before completing the unit. We recommend completing this unit in one sitting.

As mentioned in the first unit, you’re working in vizzes that help you understand the best practices of creating dashboards that tell a story. If you want to see how a viz was made, open the Worksheet menu | Show Caption.

Remove Clutter

You have some analysis in front of you, but does that mean you’re done? Nope, not until you’ve communicated what’s there. You want the viewer to focus on the right thing—the analysis—not clutter or distracting elements. And you also want to guide them to understand what’s happening in the viz. After all: The most important aspect of building a dashboard is to remember that it’s for the person viewing it.

Time to get these vizzes whipped into shape!

  1. Make sure you’re on the Tracking Star Bakers tab. The axis isn’t particularly helpful and just adds visual clutter. Let’s hide it.
  2. Right-click the vertical axis and uncheck Show Header.

Remember from the first unit, the Numerical status field assigns a number value to each status: Star Baker (2), Did well (1), Safe (0), At risk (-1), and then Eliminated (-2) at the bottom. This is purely to make the line chart; the person looking at the viz doesn’t need to know this information. It’s good that you hid it as part of informed design best practice.

  1. Grid lines are present by default. But for the viz, they’re unnecessary. Open the Format menu above the toolbar and select Worksheet….
    • You can collapse the Data pane to get more room. In the Data pane, click the caret next to Analytics (immediately under the toolbar). To re-expand the pane later, click the caret again.
      A screenshot of the top of the Data pane with the collapse/expand caret outlined
  2. In the Format pane, the Fonts section is open. Change the Header font size to 12.
  3. Collapse the Fonts section, and expand the Lines section.
  4. Open the dropdown under Grid Lines | All and set it to Off.
  5. Open the dropdown under Zero Lines | All and set it to Off.
  6. Make the borders less obvious, too. Expand the Borders section.
  7. Under Row Dividers open the Pane dropdown, and set the line color to the lightest gray, #F5F5F5.
  8. Toggle Column Dividers to turn them off entirely.
  9. Click the X in the upper-right corner of the Format pane to close it.

Clean Up Fields and Fitting

Field labels are also on by default. You can turn them off, too.

  1. In the upper-left corner of the viz, right-click the word Baker.
  2. Then, select Hide Field Label for Rows.
  3. Moving to the right, right-click Episode | Hide Field Label for Columns. Depending on the size of your screen, the viz may have white space on the right side or a vertical scroll bar.
  4. You can adjust the fit of the viz so it fills the entire space. In the toolbar, use the Fit control icon Fit control icon | Entire View to set the viz to automatically fill the space available.

Add Meaningful Differentiation

So far, you’ve been removing elements or making them less obvious. Let’s now add something. The lines in the viz track baker status episode by episode. Adding some shading to the viz can help distinguish between good performance and poor performance—which is what the person consuming this viz cares about, not the numbers themselves.

  1. At the top of the data pane, click to the Analytics tab. Note: If you collapsed the pane previously, the Analytics tab is below the Data tab.
  2. Under Custom, drag out Reference Band and drop it in the Pane target area.
  3. Set this band to shade from 0 down. Anytime the line dips into the shaded area, that means the baker was underperforming:
    • Change the Computation for Value (From) from Minimum to Constant. The Value (From) should update from SUM(Numerical status) to -2.
    • Change the Value (From) to -3. This ensures the band doesn’t end at the same value as a mark in the viz, but rather extends past the last mark.
    • Set the Label to None.
    • Set the Tooltip to None.
    • Change the Computation for Value (To) from Maximum to Constant. The Value (To) should update from SUM(Numerical status) to 2.
    • Change the Value (To) to 0.
    • Set the Label to None.
    • Set the Tooltip to None.
  4. Close the dialog.
  5. In the viz, click a band, then hover over the line at the top to bring up the menu. (This can be a little finicky. Try moving your mouse around and clicking around a couple times if you’re having trouble.)
    a screenshot of the correct mouse pointer location at the top of a reference band and the floating menu it brings up, with Edit, Format, Remove.
  6. Click Format.
  7. In the Format pane to the right, change the Fill to the lightest gray, #F5F5F5.
  8. Close the pane. The shading doesn't go to the bottom of each baker’s row. This is because the axis automatically adjusts so it doesn't cut off values in the viz. If the shaded band goes to -3, the axis gets pushed to start at -4.
  9. Right-click the SUM(Numerical status) field on the Rows shelf.
  10. Select Show Header to bring back the axis.
  11. Right-click an axis and select Edit Axis.
  12. Under Range, change the selection from Automatic to Custom.
  13. Change the Fixed start from -4 to -3.
  14. Close the dialog.
  15. Right-click an axis again and uncheck Show Header.

Add Explaining Text

For the final touch, let’s add some text to explain exactly what’s going on. Add a subtitle to the viz and configure the tooltip.

  1. At the top of the viz, double-click the words Tracking Star Bakers to open the Title editor.
    • Leave <Sheet Name> alone and add a new line after it.
    • Change the font size to 9.
    • Enter: The line tracks the overall performance of every baker who was Star Baker at least once. Hover over marks in the viz for more detailed information.
    • Italicize the last sentence.
    • Click OK to close the editor.
  1. Drag Status to the Tooltip card.
    • If you’re still seeing the Analytics pane to the far left, switch back to the pane’s Data tab to see the tables and fields. And don’t forget about the search bar in the Data pane if you can’t find a field.
  2. Click the Tooltip card and clear the default information.
  3. Update the tooltip.
    • Enter At the end of episode and add a space.
    • Click Insert | Episode
    • Add a comma, , and add a space.
    • Then insert Baker
    • Add 's status was and a space.
    • Finally insert ATTR(Status) and add a period .
    • Remember to use the Insert menu to insert the values in angle brackets, don't type them in.
    • Optional: Format the tooltip as desired, such as setting dynamic, field-based values to bold.
  4. Uncheck the box for Include command buttons. This keeps the toolbar from appearing in the tooltip after a few seconds. If you don't need those buttons, it’s a good idea to keep the tooltip tidy by hiding them.
  5. Click OK and test your tooltip by hovering over marks in the view.

The reference band may flicker as you hover around the view. This is only in the authoring environment and won’t be visible to anyone looking at the published viz.

Resources