Appendix

5-1 References

The site uses solutions based on the ideas and philosophy of several sources. Use these links and references to get a deeper understanding of how the different components of the site were built and how they are maintained.

5-1.1 Design

• "Atomic Design by Brad Frost"
  Principles of web design and Pattern Lab.
• Pattern Lab
  Guide for creating atomic designs.
• "Naming SASS Color Variables" by Geoff Graham
• "Better SASS variables through abstraction" by Craig Dennis
• "Typographic Design Patterns And Current Practices (2013 Edition)"
  On the importance of typographic details in good web design.
• "Myth #3: People Don't Scroll"
  Research-based article from UX Myths.

5-1.2 Tools

• WebAIM Color Contrast Checker
  Test and evaluate color contrast ratios of website elements to determine content accessibility using WCAG guidelines.
• "Making Data Tables Responsive"
  Code and instructions from NPR on creating responsive tables.
• Kalamuna / Kalastatic
  Static site framework for prototyping and building out CMS-less web sites on GitHub.
• KSS-Bootstrap
  KSS template and style guide for Bootstrap.
• Sass Colour Function Calculator
  Calculate the Sass color function required to get from one color to another.

5-1.3 Data visualization

• “Doing the Line Charts Right.”
  Vis4.net. Aisch, Gregor. Graphics, June 2012. Web. 30 March 2016.
• “Charts and Accessibility”.
  Accessibility and Usability at Penn State. n.d. Web 30 March 2016.
• Web Content Accessibility Guidelines (WCAG) 2.0.
  W3C Recommendation 11 December 2008. Web. 30 March 2016.
• ColorBrewer 2.0: Color Advice for Cartography.
  Brewer, Cynthia. Web 10 August 2016.

5-2 Data Visualization Guidelines

Apply these principles to data charts and graphs. When developing and creating data visualization objects:

• Use FRBSF.org data visualization colors, which are designed to complement the Brand palette.
• Use approved color combinations optimized for users with Protanopia and Deuteranopia color blindness, and black-and-white printing.
• Use other approaches besides color (texture, varying shapes) to communicate information in charts.
• Focus on readability of chart by considering “data-ink ratio.”
• Keep the non-erasable core of a graphic and remove or de-emphasize unnecessary elements (for example, border around charts).
• Include copy that explains the visualization (for accessibility purposes).
• Place the labels close to data lines when possible instead of in a separate legend.
• Format figure and chart titles and source attributions as text outside of images for accessibility and search optimization.

See examples.