Add Data Visualization guidelines

[marteki]

This PR adds the MVP version of our data visualization guidelines to the Design Manual.

Additions

• Add subpages to the vertical about:
  • the general overview,
  • accessibility,
  • accuracy,
  • audience,
  • chart types,
  • color,
  • emphasis, and
  • text.
• Add styling for blockquotes in Design Manual text.

Changes

• Make sure that the logo has the approved amount of clear space below it, even if the nav menu gets longer.
• Minor linting fixes

Testing

• Load this PR locally on your machine, or view it at http://www.marteki.com/design-manual/data-visualization/data-visualization.html

Review

• @amycesal @designlanguage @caheberer @Scotchester @jimmynotjim @nataliafitzgerald

Screenshots

Todos

• There are some images missing that need to be hunted down and added as examples.

Checklist

• [x] Changes are limited to a single goal (no scope creep)
• [x] Code can be automatically merged (no conflicts)
• [x] Code follows the standards laid out in the front end playbook
• [x] Passes all existing automated tests
• [x] New functions include new tests
• [x] New functions are documented (with a description, list of inputs, and expected output)
• [x] Placeholder code is flagged
• [x] Visually tested in supported browsers and devices
• [x] Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

[marteki]

Also tagging @sephcoster and @wpears, since they reviewed the draft document. (Also: did you know that the maximum number of reviewers you can officially tag on a PR is 15? I learned that yesterday.)

[designlanguage]

Duplicating my comment from the google doc here. Under Text, graying out the unrelated parts is actually doing the opposite of what it's intending. It's drawing more attention to the sections we shouldn't be focusing on.

Fading the content in those areas out in some fashion would better achieve emphasis on the text.

[nataliafitzgerald]

@amycesal @marteki These pages are looking great and I'm so glad to see us pushing out an MVP and NOW. I have some detailed feedback, none of which should be considered a blocker to publishing this MVP. I've tried tried to list this in order of importance and how quick the fixes would be (from low hanging fruit to more involved stuff).

Type hierarchy

• [x] On the "Data Visualization" page change the subheading from "lead-in" to "H3" to match the other DM top level pages
• [x] On the "Chart types" page you use an H5 for "Key questions" and an H6 for "Key points" and "Examples." Is this intentional? A while ago there was discussion between the GD's about moving away from using the H6. We had been looking for H6 use cases. Is the content currently in the H6 lower in the hierarchy than the H5 content or is this just a typo?

Editorial style

• [x] Change title case to sentence case
  • "Accuracy" page: Headings should read: "Notes section" and "Sources section"
  • "Text" page change "CFPB Logo" to "CFPB logo"
• [x] Use contractions
  • "Data Visualization" introduction change "You are" to "you're"
  • "Audience" intro change "you are" to "you're"
  • In "Color" "Sequential" change "you are" to "you're"
• [x] Missing comma
  • "Emphasis" section under "Labels" add comma "Goals, trends, and important outliers should be highlighted to help the user discern what is going on with the data."

Content recommendations

Although the core audience for the DM are CFPB employees I could see this section getting traffic from outside of the Bureau (since these standards are very useful). So, I would recommend keeping this universal when doing so wouldn't weaken the content. The page introductions are a good place to stay universal, even if we get specific about the CFPB within the main content of the page.

• [x] Main page introduction: "Whether you're using Excel, Tableau, D3.js, or any other program, follow these guidelines to create effective and consistent data visualizations." Additional feedback for our next release would be to make this introduction a lot more encompassing of Data Visualization - the big idea of all of this.
• [x] Text page introduction: "Using the appropriate font not only increases consistency with the core brand, but assures legibility and good visual hierarchy. Proper labeling and titles help users quickly understand the chart and increases comprehension as well as helping with accessibility."

Miscellaneous

• [x] On the "Color page" the "Graph colors" heading is confusing the hierarchy. Could we crop that and use HTML text for the "Graph colors" heading instead? Or, if the "Graph colors" heading isn't needed we could just crop that out. In a future iteration it could be helpful to label these different color sets. OR, if the headings of "Graph colors" and "4 Groups" aren't essential we could just crop those out. Then, the section would just all be examples of the main heading: "Color schemes" Maybe that makes the most sense?
• [x] For the examples styling, the gray bar is pretty dark/heavy which makes it harder to focus on the rest of the page content. Consider going with a lighter gray or maybe Midtone Green (Green 60). Could play with border weight too. Is this a new DM style?

[marteki]

I made all the edits advised by @huetingj @nataliafitzgerald @ielerol and @designlanguage.

I made most of the edits advised by @Scotchester @jimmynotjim and @ajbush; they each also brought up good points that we can either discuss further as a team in seperate issues, or (in the case of labeling chart components) will iterate forward on for the next release of these pages.

Double-check my corrections. If it's all good, I think we're ready to merge this MVP. 🎉