#DearDuo 8 – Outfits of the Month

#DearDuo 8 – Outfits of the Month

Welcome to the 8th month of our Dear Duo project.  Time flies when you’re having fun and I say this because The Data Duo completed 1 full year since its launch last April 2016. We celebrated our 1 year of blogging and vizzing with team Comcast this past weekend. Read more about the celebrations and our yearly recap here.

#DearDuo has been a fun way to get to know each other for Adam and I. In 2017, we will be publishing a single post each month written together rather than 2 separate ones.  The biggest reason is we want this project to be more collaborative.

The Data

This month we tracked Outfits of the Month (OOTM) data. We knew this would be a very interesting month, because like The Data Duo dashboards, our clothes colors are mostly black/dark as well.

Adam – Pooja gave me a pretty clean dataset tracking the color or her clothes and shoes and whether she wore a scarf, necklace, bracelet or watch.  I’m told Pooja and a scarf is kind of a thing.  Some Comcast folks mentioned it’s her signature style so this is a big deal!  I knew I better use all this data this month.

However, Pooja always leaves me a few minor things to clean up.  For example, she was planning her outfits 1,000 years from now.  I know Pooja likes to look nice, but that’s a bit excessive!  😂

Pooja – Adam provided me with a clean dataset that included fields like date, time of day, top/bottom, type, description and note. Here is how his t-shirt data looked like if I filtered time of day to ‘morning’ and top/bottom to just ‘top’. He also provided me with the primary and secondary colors of his clothing items.

No matter how simple our datasets are, manual tracking often leads to data quality issues and this time was no different. There is a color called ‘bue’ apparently. I hope Adam learnt some data quality assurance techniques from Shawn Levin with whom he spent quite a bit of time this past weekend.

The Design 

Adam – I struggled with this designing this dashboard.  I wanted a simple way to show all the colors of the clothes and shoes Pooja wore, but I didn’t love all the colors on the dashboard.  I always prefer just a few colors.  I built several charts including gantt charts, barcodes, a line chart for black in Pooja’s outfits, but none of them made it into my final design.

Since I learned about this signature scarf and black style, I had to put a big picture of Pooja in the center showing this style.  She was kind enough to share a photo she snapped from her car on a sunny day.  I softened the edges in Powerpoint.

My main design was to show the main colors of Pooja’s outfits by day (I didn’t know what was a top or bottom) in a small chart at the top.  I used multiple sheets floating behind the image of Pooja and some table calc filters to change the background colors behind her.  On the left, I would show the color of her shoes.  On the right, I wrote a long calc to create dynamic text for every combination of Pooja wearing scarfs, necklaces, watches, and bracelets.  Man, it must be hard being a woman!

I did have some challenges with coloring the bottom of the chart since she wears so much black so I used some semi-transparent annotation boxes to help display the text.

Also, I always try and do something new in these vizzes.  I’m always inspired by Pooja’s design elements.  One of the things she introduced awhile back that is making the rounds in the Tableau world often are these dotted connecting lines.  I have never used them, but I busted them out in this one.  The idea is that the lines connect the parts of the visualization that coincide with the titles.  I am happy with the clean look of this one.

Pooja – As soon as I saw the data, I knew I had to somehow use a technique that changes Adam’s shirt colors based on a parameter or an action filter. I quickly realized having read Ken Flerlage’s amazing post of ‘Recreating the Scream in Tableau’ here. Ken explains well in his post how this ‘image colorization tool’ which breaks the colors in RGB, HSV and LCH components. The results of this color extraction tool are output in a text file. Ken does a great job explaining the steps on his blog I mentioned above. Following his method and Adam’s instructions I was able to get the excel file ready with the hex codes of Adam’s image that he willingly posed for.

Here are Ken’s instructions that I followed:

Once I had the data and the hex codes on a separate tab in Excel, I brought it all in Tableau and realized I will need one file/tab of excel each for each date in Adam’s data to be able to change colors of his shirts. I copied and pasted the same raw data 31 times (1 for each day of March) and unioned the files in Tableau and left joined it with ‘hex’ table on cluster keys. I initially tried using one tab in Excel to paste all the data and replace the dates 31 times but Excel threw an error of having reached a maximum capacity of rows. Each of the 31 tabs I unioned have 588,400 rows. So much for Adam to look cool on a Tableau dashboard, phew!

Adam’s original image had some shadows around his arms and hair color was being pulled as his shirt color. So I created a calc for color such as:

IF [Hex] = ‘#11151A’ or [Hex] = ‘#242930’ THEN str([Date]) ELSE [Hex] END

to be able to use those dates as outputs to change the colors based his data driven shirt colors. If the output of the calc above was date, I looked at his data and assigned a color to each of those dates as his shirt color for the day. Rest of the Hex codes were randomly assigned by Tableau that I manually changed as well, to match the hex codes resulted from the color summarizer tool.

The problem with this approach was that the image tool captured a bit of shadow on Adam’s hair and beard to be the same color as his shirt color, so that hex code always changed his hair color as well, when I used the parameter to change dates. I had to crop the part of his head and beard and floated it over the original image so its data driven. Same applied for his pants color which were faded/washed sorta of jeans that the image tool picked as black. I didn’t want those colors to apply to his pants, so I had to crop the bottom of his original image and float that as well. Here is a GIF of what the top section of the dashbaord looks like when you change the parameter.

Once the difficult part was achieved it was a matter of making it look cool. Since the theme was OOTM, I wanted to make the viz look very magaziny. I used the top section of the dashboard to show total of colors worn the entire month. A circle chart showing what the elements on his clothes were and what was he doing while sporting those outfits. A parameter on the top can be used to change the dates and hence change the color of Adam’s shirts.

I used a font in Powerpoint ‘Zapfino’ to give it that infographic magazine cover page look. The bottom section of the dashboard simply uses colors of the day for both top and bottom and uses a calendar layout to easily see clothes pairings for the day.

What did we learn?

AdamI learned that Pooja really likes black!  Well, I already knew this, after all she is part of the data duo.  She wore black in her outfit (clothes) 20/31 days or 65% of time.  Poo mostly wears high heels or flipflops at home.  I believe she would say they are “a pair of cracking heels”.  I understand she has over 60 pairs of shoes for just two feet.

Pooja always looks nice so no outfit is complete without accessories!  In March, she wore a scarf 17 times, a watch 15 times, a necklace 11 times, and a bracelet 4 times.  Only once (Thursday, March 23rd) did Pooja go without any of these accessories while at work.  She also had no accessories five additional times on the weekend, but judging from the associated flipflop footwear, she did not head out those days.  She must have been vizzing!

Also, thanks Poo for making Tableau Adam skinny!

Pooja I learnt that at this point of using Tableau we can pretty much track any and everything. With loads of #MakeverMonday and #Ironviz practice we can shell out work quickly and have become creative over time. I learnt that or I knew that Adam’s choice of shirt colors are in line with his choice of dashboard colors. He has good taste!

The entire month, Adam only wore black, blue, navy blue and gray colored t-shirts. I also learned that his style of clothing is mostly casual (T-shirt and Jeans) and less formal. Talk about advantages of working from home. Lucky man!

He wore Indigo jeans 74% of the days tracked in March and wore black top (mostly t-shirts) about 45% of the tracked days.

Thank you for following along our journey, next month should be an interesting month as well where we track our Twitter activities so be sure to follow #DearDuo on twitter and if there is anything you would like us to visualize about each other, please do not hesitate to let us know. We would love some creative ideas on topics. Thank you for reading, until next month!

Here are our vizzes:

Leave a Reply