Have you ever interacted with Google/Android’s gorgeous visual identity and wondered, “What is this, and how can I make Tableau look like that?” If your answer was a resounding yes, let me walk you through how we go about answering both the “What?” and the “How?” of Material Design, Google’s new visual language.
What Is Material Design?
The material is an environment in a 3D space, which means all objects have an x, y and z dimension. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the user. Every sheet of material occupies a single position along the z-axis and has a standard 1dp (density pixels) of thickness, which is equivalent to one pixel of thickness on screens with a density of 160 pixels.
In other words, think of Material Design as sheets of paper in motion! In practice, it uses these sheets of paper as a visual cue to provide a clear definition of what action needs to be performed. For example, a button is on a higher sheet to reflect that there is an action that needs to be performed on it.
The theory behind the workbook was to guide a user through design decisions made to make a Tableau dashboard fit into the language that is Material Design. The approach started with a personal desire to explore a Public BigQuery data set on the works of William Shakespeare by breaking down unique word usage over year and corpus. This initial data story was then told through the lens of Material Design best practices.
Let’s first walk through how we access our data set and workbook.
How to Use the Workbook
In order to access the Shakespeare Data Set, you will first have to have a Google account and also be signed up for BigQuery.
When you first open the workbook, you will have to sign into your Google account. The following screen shots will guide you through the process:
How to Make It Work in Tableau
Now let’s take a look at our “Material Design Best Practices” dashboard and break it out into its component parts:
Simple Bar Chart:
To correctly follow the principles of material design for our Bar Chart, we must remove axis labels and tick marks and all borders from our bar graph. Also, make sure to limit the major tick marks down to the absolute minimum:
Bar Chart with Labels: