[DATA VIZ] Bar Chart Bonanza!

[amycesal]

@designlanguage and I are taking a set of data and pushing the boundaries of bar chats to see what we can do and where we want to go with style.

Raw data:

comparison of new york state and metro area complaints compared to the us

Product	NY metro area	NY state	US
Mortgage	27%	25%	27%
Debt collection	20%	21%	26%
Credit reporting	17%	17%	16%
Credit card	14%	15%	11%
Bank acct/services	13%	13%	10%
Other	10%	10%	11%

breakdown of complaints in other financial services category

other financial service complaint sub Issue	% Total
Fraud or Scam	46%
Customer service or customer relations	21%
Excessive Fees	7%
Unexpected or other Fees	7%
Advertising and marketing	6%
Other	5%
Disclosures	5%
Lost or stolen check	2%
Lost or stolen money order	1%
Incorrect exchange rate	1%

[amycesal]

Data set 1 in 7 different ways. Not all of them are good, or in a direction that we would want to go in, but this is a starting point for discussion.

[amycesal]

the second data set.

[piccocesar]

Great examples Amy! All of the bars do a mostly great job telling the story. The one I keep coming back to is figure 2b. I cannot tell if I love or hate figure 2b and I think this confusion is a good thing. At first I was not crazy about the neural trick your mind plays where the bar gets lost behind the text on the shorter bars. It is as if you can only see either the text or the bar. At the same time I see it as amazingly efficient. Adding the value to the label is genius. I wonder if it would work best with an audience that is used to a more text based delivery of data. Where they can almost turn off the visual by just focusing on the label. I cannot wait to try this with some of my clients like those in the legal field.

I try to stay away from charts like 2d as much as possible if I cannot add labels to within each slice of the stacked bar. It always seems like too much work for the reader when a legend is involved.

[JenniferHoran]

I kind of love 2B, I've never seen that done before.

[amycesal]

@JenniferHoran is 2B going to be accessibility terrible though?

[JenniferHoran]

I think that actually if the contrast colours are chosen correctly, since the percentage is right there in text and the items are arranged in sequence, it would not be terrible for 508. You wouldn't even need alt text if done in HTML and not as an image.

[amycesal]

@piccocesar I agree about 2D. Do you have alternative chart types that you use that we're missing?

I also realized I'm missing any sort of axis labels and time period/date. I think date is an important point to advocate for since graphs often get re-used, and things live on the internet seemingly forever.

[amycesal]

Trying the other data set in the style-ish of 2B. And adding a date line at the bottom.

[JenniferHoran]

I like it.

[piccocesar]

@amycesal I am a big fan of your updated chart (8A)!

You had asked about other charts that may not be listed. These are variants of the bar chart with some added complexity. I immediately thought of the bullet chart and the likert. These may need some work but as a quick sample: The bullet chart

The likert chart (Google image search)

[designlanguage]

Here are some explorations of the first data set with a few other variables to discuss.

A1

This takes that same complaint data, but shows each as part of the whole (these percentages add up to 101%, but this is more about aesthetics, so we won't worry about numbers too much). Putting the amount inside the bar works here because there are no small percentages. Color options would be limited due to contrast requirements.

A2

Here's the same chart without values for each complaint type, but adding axis labels.

A3

Here's the data grouped by region rather than complaint type. The regions are listed above each grouping, which doesn't allow grid lines to pass through the bars. Instead, the exact amounts are listed to the right.

A4

Grouping these by complaint category, as @amycesal did. Using color here for emphasis of difference. New York state and the Metro area have similar values and overlap to some extent, so picking similar colors for each reflects that. The US as a whole is further separated by color to highlight the difference.

A5

These complaints are grouped by state, all labeled instead of using a key. There are no values listed, but white axis lines pass through the bars to help indicate their value. Because the lines are only visible on the bars, we can include region labels above each group of bars.

A6

Vertical bars also work for this set. If the complaint type labels were more descriptive, it might preclude using an option like this.

A7

Lastly, This shows each complaint percentage separately as part of 100% (the full width of the graphic). It takes up a lot of room.

[ekellett]

[ekellett]

These are three different bar chart options created quickly in Tableau with the data. Depends on what you are trying to compare/emphasize. Feedback is welcome. Looking forward to discussing this!

[bfongdata]

These are some Tableau bar graphs. They look nice but I want to emphasize that they take more time than Erin's quick examples. Some of the steps I had to take to create these are not widely known to users at the Bureau.

[amycesal]

After our discussion here's what we came up with as some overall conclusions. I tried to do some sorting to work them into categories.

emphasis

• Group for emphasis
• Use color for emphasis
• Use color for grouping
• Limit number of not directly labeled colors
• Avoid random sorting. Sort high to low unless there is a good reason for alphabetical or low to high.

axis

• Use axis interval markers or directly label the values. Not both.
• Axis and axis interval markers use solid lines
• Trend or reference lines are dashed
• Use important and regular axis interval markers. Limit to 7 max. Use predictive lines to highlight emphasize key points.

labeling

• Top or right label stacked bars for maximum horizontal space
• Labels should be the same colors as axis.
• Limit the use of keys. Directly label categories when possible.
• Value labels outside the bar reduces cognitive burden
• Directly labeled values should be outside the bar (unless there's room)
• Directly labeled values should be inside or outside the bar. Don't mix.
• Limited vertical stacked bars are good. Use a combination of color and direct labeling.

[JenniferHoran]

Consistency is great for 508!

Avoid random sorting. Sort high to low unless there is a good reason for alphabetical or low to high. Grouping for emphasis - this is all great because we have to sort using some other indicator then colour. We can still use colour to group if we do these other things. Just watch for contrast :)

Directly labeled values should be inside or outside the bar. Don't mix. - also great for 508.

I really enjoyed watching this exercise unfold.

[designlanguage]

@amycesal - I think that unclear comment was related to the vertical stacked bar. We recommended a combination of color coding and direct labeling in that instance as opposed to just one or the other. It'll be interesting to test out some of these recommendations now.

[amycesal]

I'm thinking these were our top 5 recommendations/favorites. There are still things to work out with spacing, color, and type, but I think these are generally good, and I updated a few things from our conversation. Next up: talking about type and line charts. Sound like a plan?

[Scotchester]

It seems like this issue has completed its intended purpose. Closing for now!

– The Eye 55 Grooming Crew