For Tuesday you will recreate this webpage. You will use the following:
- The U.S. Department of Education’s Equity in Athletics dataset
- Excel – to clean and prep the data
- Refine or Excel Tableau Plugin (PC only) – to format the data
- Tableau Public – to build the graphics
- Text editor – to code the webpage
- GitHub – to host the webpage
I have provided hints for each step in the process below. Try to do it yourself, but if you really get stuck use the hints.
Step 1 Hint
Think of what you need to complete the graphic.
- Data from 2003 to 2013 on every sport (male and female) for a single school (i.e., UTK)
Now you know what you need you should be able to find it pretty easy using the “Download selected data” tool on the Equity in Athletics page.
Step 2 Hint
Again ask yourself, “What do I need?”We just need the data for each year for each sport, so we can dump a lot of data in the default dataset, like all the sports UT doesn’t have, the totals for each sport and all of Row 1.Once we get rid of all the extraneous data, we just need to do one extra thing: transpose the rows and columns. We need to do this as step one of the process of formatting the data for Tableau.Here are instructions on transposing data in Excel.Extra hints: (1) We are still missing one piece of data. We need a variable for gender, so we can color code the boxes. It can just be a simple binary variable (i.e., 1 and 0). (2) We should also shorten the names of each sport in Excel. It is much easier to do it here than in Tableau or Refine. So instead of “Baseball Men’s Team Expenses” cut it down to “Baseball.”
Step 3 and Step 4 Hint
This video will walk you through the process of designing the graphic in Tableau Public. It will also explain how to format the data using the Tableau Excel Plugin, which is PC only. If you are using a Mac, you will have to use Google Refine to reshape the data. Here is where you can download Refine, and here is how to use it to reshape the data into the format we need.
Step 5 Hint
We need to build a simple website with three elements.
- A headline
- Body text
The graphic is easy. We use the embed code from Tableau. The headline and body text are also pretty simple. Remember we can add style to any tag. So for the headline, we can just place a <div> tag before it with style, like so:
<div style="font-family:Georgia;font-size:300%">The Ever Growing UT Athletics Budget</div>
Then we can do the same thing with the body copy, but changing the style applied.
Step 6 Hint
Remember, to create a project page on GitHub, all we have to do is create a “gh-pages” branch and then add an “index.html” to that branch.Here are instructions from GitHub.