Jennifer's G-mail Data Collected over 1 Week

(Click on Legend to Filter)



Insight from the data

Static Graph - Clearly I have a return rate of less than 50% on things coming into my primary inbox, which implies there is some junk mail slipping through. Interestingly the promotions peak on wed and thursday, not Monday and Tuesday which I found surprising. Not surprsing, I don't get as many e-mails on the weekend.

Interactive Graph - The additional features increase my ability to detect specific trends and speak more intelligently to the data. For example, e-mails out make up less than 5% of my overall message volume which is lower than I would have thought, but that number was very easy to determine using my legend filtering tool. I can also easily see that on an average day only ~0.5% of my messages are content that I create. If I look just at the pink Primary messages I can quickly calculate that 7 days *3% means that ~21% of my messages are going into my primary inbox. Ideally the ratio of e-mails out to e-mails in my primary should be closer to 1, but I'm only responding to about 25% of those primary messages. Selecting just the pink and green bars shows I have the best e-mail return rate earlier in the week. Filtering down to just social e-mails reveals that this category is the most consistently spread throughout the days of the week and accounts for 7% of my weekly messaging volume. Selecting just the pink and orange bars shows a very similar data distribution across the days of the week, but the promotion message rate is close to double the primary e-mail rate on peak days. I could go on, but its easy to see how many detailed comparisons can be made with the help of the legend filtering feature and the percentage/count toggle.

Design Choices Explained

Colors - I wanted to use opposite colors for e-mails in and e-mails out so I chose purple and green because of their placement on the color wheel. I wanted Promotion, Social and Primary e-mails to be a similar hue because they were in the same category of incoming messages.

Graph Orientation - Initially I gravitated towards the code from the colors and contrast codepen example because I understood it, but that was because it didn't leverage functions. As you can see from part I, my first pass at a D3 graph had so much hard coding that I couldn't make it interactive so I overhauled the code. There were way fewer examples of column charts on the web and this reinforced my decision to change the graph orientation. I feel it is much easier to focus on the y-axis values when analyzing this dataset.

Chart Type - The data is focused on the classification of my e-mails which is a categorical variable. Tufte's legacy demonstrates the efficacy of a simple bar chart so I chose that for my graph type. The rectangle shapes are easiest for humans the understand and interpret the meaning of the data.

Legend Filtering- While a label next to the series would have reduced cognitive load for the users, I wanted to give the users the ability to filter the series shown on the graph and the clickable legend accomplishes that magnificently. This feature of D3 really excited me because I'd never seen anything as slick in excel or ggplot2. The interactive hover functionality makes it a little easier to understand what each color represents; mitigating my initial concerns.

Average Line - Facilitates quickly deriving summary statements about the messaging categories, especially when combined with the percentage of the total switching feature. I found this feature very challenging to create and integrate with the legend filtering feature, but it really pushed my understanding of how to work with D3 and more specifically how to manipulate data with javascript.



References

While I did a ton of research to get me through debugging and I also referenced many of the in class/OH materials, I want to call out the resources below as they were the building blocks that guided my newbie tinkering. As with any coding project, building off of the online repository exposed me to far better coding practices and a resulted in a more impressive visualization/analysis.

https://bl.ocks.org/mbostock/3887051 - Baseline

https://bl.ocks.org/Andrew-Reid/64a6c1892d1893009d2b99b8abee75a7 - Grouped Bar chart filtering

http://bl.ocks.org/kaz-a/58224255b41e64810652d89b8f976673 - Average line

https://bl.ocks.org/mbostock/3885705 - Formatting pct.