[DATA VIZ] standards

[stephanieosan]

Here are screenshots from the excel file. Also emailing the team the document. @mebates Did you have concerns about any of the principles outlined, or just the recommended color palette?

[mebates]

Thanks Stephanie. My issue is only with the palette, and mainly with the pie chart. (The thoughts below also apply to the bar chart with Green and Teal at 100%) I came upon them when I was working on the CR Snapshot graphs this last time around.

• To me, the palette is too heavy overall. I think the Teal and Neutral at 100% dominate the CFPB Green shade, giving those wedges more importance than the primary wedge.
• In addition, I find that having the Neutral as an early part of the palette creates a 'Thin Mint' palette, which doesn't seem on brand to me. The scheme is jarring.
• I'm worried that sequencing the same value tones next to each other makes it hard to read, and would be harder when photocopied. Instead of 100%, 100%, 100%, 80, 80, 80, etc., I think it should be 100, 80, 50, 100, 80, 50 or something of that sort.
• Unfortunately, we have to plan for a lot of wedges. As much as we want to limit it, our clients don't.
• We also need to look at how the palette looks in CMYK and RGB in Adobe Creative Suite. Excel lightens the colors quite a bit.
• (I can't find the palette with Pacific in your Excel file, my comments are about 6 wedge+ palette. We should think through how the palette works with 2-10 wedges)

Excel palette:

CMYK palette, matching Excel (appears so much darker):

Alternative palette (just a starting point):

[stephanieosan]

During the crit today, we talked about high-level goals for the revised color palette:

• avoid 100% teal, it's too dark in CMYK
• avoid the neutrals for large slices, feels less on-brand
• avoid using tints of the same color adjacent to each other, makes it seem like there is a correlation
• try to use varied levels of tints next to each other 100,80,50,etc (better for contrast + accessibility)

To follow up on:

• Test that the palette works when photocopied
• Test that colors work for color blind users
• Test that palette works in grayscale

[mebates]

Working on the complaint graphs again. How about this scheme? It pulls in some lighter shades of Pacific before going to the brown.

[elizbond]

How would this work for line graphs so there is enough contrast between lines if printed in black and white?

[Dnpizarro]

@stephanieosan and @mebates, has there been any testing on the following, as stated above:

• Test that the palette works when photocopied
• Test that colors work for color blind users
• Test that palette works in grayscale

Also, to follow up on @elizbond question, any idea on how this would work with line graphs?

[elizbond]

When the Teal 50 is next to the CFPB green, there's not enough contrast in grayscale.

[elizbond]

Recent questions about histograms from the data team.

"We were recently asked about whether there was any guidance on how many bins should be shown in a histogram. Does anyone on your team know of any research about this? We found something about optimizing bin size but not # of bins. If we need to, we can just try out different bin sizes during our larger regroup."

After asking Twitter, this is what they found.

"The bin sizes really depend on the data. With that being said you would have to experiment and play with different bin sizes to determine what the best size is. If bins are too big you could miss trends vice versa."

Do we have any recommendations or preferences?

[amycesal]

Pulling up this issue again.

I'd like to see if we can take a holistic look at the data visualizations CFPB creates and hopefully include some standards and guidelines in the design manual. It would be super awesome if we could do some user testing too.

I lead the creation of a data visualization style guide for the Sunlight Foundation, which might be a good start. It's probably more informal in tone than we would want, but I think having suggestions on what type of graph is appropriate is useful. http://sunlightfoundation.com/blog/2014/03/12/datavizguide/

[elizbond]

+1 @amycesal when things settle down post-immersion I'll work with you to gather examples I've seen go out the door. We can loop in Erin Simpler from the data team too!

[amycesal]

Basically, I just want to start by compiling a list of stuff we've done. That way, we can look at trends, what's working, what isn't and start to make some decisions about standards going forward. This is my "crazy call for examples".

Maps

HMDA http://www.consumerfinance.gov/hmda/

Bar Graphs

HMDA http://www.consumerfinance.gov/hmda/

Owning a Home http://www.consumerfinance.gov/owning-a-home/check-rates/

Excel Templates/reports

Consumer Response 1 pager http://files.consumerfinance.gov/f/201503_cfpb_complaints-by-the-numbers.pdf

What else have we done @exafox @tanderegg @stephanieosan @ohsk @designlanguage @mebates ?

[stephanieosan]

What about Tableau visualizations? @elizbond

[exafox]

Yes @stephanieosan, at least the complaint topline reports should be under consideration. (There a number of other Tableau dashboards as well.)

Also the Mortgage Chartbook would be something worth studying, as a lot of work that goes into it and it is pretty sharp.

Send me an old fashioned email and we can see about getting you folks copies?

[elizbond]

I decided to go through some of the data-heavy reports and pull out any custom charts we did (i.e., outside of the excel template). Examples with the source material are below.

Consumer credit reports: A study of medical and non-medical collections

Report

One color line graphs

Arbitration

Report

Strategic plan

Report

Card Act

Report

Waterfall

Manufactured Housing White Paper

Report

[amycesal]

This is a good set of examples to start with! If there's more, that would be great too. I'm planning a brainstorm in DC for Feb 18th to look at examples of what we've done, and to plan where we want to go with this.

Recently there was a post (http://policyviz.com/style-guides) about other data visualization style guidelines that exist. Most relevant to us are probably:

• Gov.uk (https://www.gov.uk/service-manual/user-centred-design/data-visualisation.html)
• Urban Institute (http://urbaninstitute.github.io/graphics-styleguide)
• Dallas Morning News (https://knightcenter.utexas.edu/mooc/file/tdmn_graphics.pdf)
• Data visualization checklist (http://annkemery.com/wp-content/uploads/2014/05/DataVizChecklist_May2014.pdf)

I'd like to go through those and talk about what they do well, and what sorts of guidelines could be applicable to what we are trying to create.

There's also the question of scope, and when people should use the guide. I think it's unrealistic for every graph to fit standards because there's a lot of exploratory process that needs to happen when digging through data. My thoughts right now as a flowchart:

Anyways, this is moving! And hopefully scope and steps will be more defined soon.

[amycesal]

Note: a lot of our data comes in ALL CAPS. We should address this and decide what use and how much ALL CAPS is appropriate (hint: less than all).

good source to look at for text alignment and why: http://www.storytellingwithdata.com/blog/2012/09/quick-tip-left-uppermost-align-title

[mebates]

@amycesal love your flow chart, makes perfect sense.

I think it's less important for us to have really aggressive and specific type and style standards for data viz than it is for an editorial publication. I'm most attracted to the checklist and gov.uk's standards. I wonder if we should start by forking gov.uk and just modifying slightly from there. Might speed things up and get us to an MVP very quickly.

[amycesal]

Yesterday @designlanguage @marteki @Ekellett Cesar Brittany and I met to brainstorm.

We reviewed other data guidelines and ways to help creators figure out what chart type would be best. There was some dot voting as to what worked well, and could apply to us, and what didn't.

We looked at a wall of charts made all over the bureau that was overwhelmingly green to get a sample of what is being created now, what was working well, and what could be improved.

Then we brainstormed where we want to be and how we get there

with the creation of a guide being the first step.

Based on our review of other guides and what we want to include, I created a draft outline of a guide.

Draft outline

Help/Contact info

• housed internally.

Intro and usage guidelines.

• flowchart.
• why storytelling, audience and purpose are useful.
• guiding questions.
• where to find templates.

Anatomy of a chart.

• define the terms.

flowchart of chart suggestions.

• examples of chart types.
• why each is useful

Color.

• define.
• why it’s important.
• show samples with hex, rgb, cmyk.
• categorical vs. sequential.
• show bad contrast with color blindness and grayscale.

Text.

• how titles should be used.
• Font samples.
• label samples.
• show sample chart with title

Arrangement.

• Define visual hierarchy.
• describe why important.
• show example.

Emphasis.

• define how used.
• show label examples.
• show color examples.

accessibility.

• how we account for it.
• what to check.

data integrity

• things should add up to 100%
• how to add sources.

further resources

[amycesal]

Natalia brought up a good point about data integrity and things adding up to 100% that should probably also be addressed in these guidelines. I added it to the draft outline above.

Once guidelines are established, we can create templates. Useful templates would probably include

Templates to create

• word/excel/ppt
• Creative Suite (illustrator/indesign)
• Tableau
• d3.js
• R/ggplot2/R shiny

social sharing ideas

• greatest hits/ awesome examples collection
• office hours
• consult/education meetings
• speakers
• community of practice/ Friday brags
• reaching out to other groups in the organization

Next steps include:

• talking to @elizbond to set up a roadmap/plan to hit goals
• setting up a regular meeting with core members to checkin about progress
• figuring out where this sits in the design manual

[amycesal]

First up: bar charts! https://github.com/cfpb/design-manual/issues/401

[amycesal]

Next up: Line charts! https://github.com/cfpb/design-manual/issues/403

[amycesal]

passing the ball to @designlanguage to sort out typographic hierarchy for print, web, and social.

starting to figure out the parts of a chart and how to call out what's important.

[designlanguage]

Here are some do-nots and ideas for recommendations. More to come.

@amycesal

[amycesal]

Issue about color: #405

[stephanieosan]

Amy took data viz standards on as a whole different project. I'm closing this issue!

[benguhin]

@amycesal @stephanieosan I'd love to see where y'alls have landed on this! Could be helpful to fork for our teams in Austin

[amycesal]

@benguhin this is where we landed: https://cfpb.github.io/design-manual/data-visualization/data-visualization.html