Skip to content

Commit

Permalink
Merge pull request #39 from royal-statistical-society/nicola-edits
Browse files Browse the repository at this point in the history
Nicola's minor edits
  • Loading branch information
brtarran committed Aug 31, 2023
2 parents e44bcdb + 4529992 commit a1d5d9d
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 12 deletions.
3 changes: 1 addition & 2 deletions _quarto.yml
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,7 @@ website:
format:
html:
theme: cosmo
css: styles.css
theme: [cosmo, styles.scss]
toc: true
grid:
sidebar-width: 200px
Expand Down
15 changes: 8 additions & 7 deletions docs/styling.qmd
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ ggplot(

Colour choices can strongly impact the accessibility of your data visualisation. The correct use of colour can also help to emphasise the story you are trying to tell.

Before you get into choosing colours, ask yourself the question: do I really need to use colour here? @Beecham2021 showed that the use of colour is one of the least effective methods for visually communicating differences between variables. Charts become both more accessible and more intuitive when using fewer colours.
Before you get into choosing colours, ask yourself the question: do I really need to use colour here? @Beecham2021 showed that the use of colour is one of the least effective methods for visually communicating differences between variables.

```{r}
library(dplyr)
Expand Down Expand Up @@ -298,7 +298,7 @@ ggplot(

When choosing a particular colour palette, there are several important factors to consider.

Colours should be distinct from each other, for all readers. There are several different forms of colour blindness which can cause some colours to appear indistinguishable. The use of a [colour blind checker](https://www.color-blindness.com/coblis-color-blindness-simulator/) [@Colblindor] can show you what your plots may look like under different types of colour blindness. This is particularly important for diverging and qualitative palettes where the distinction between hues is used to tell apart different values. In contrast, sequential palettes often use luminosity to show how values change. [Paul Tol](https://personal.sron.nl/~pault/) [@Tol2021] has some very useful resources on choices of colours, and several suggested palettes.
Colours should be distinct from each other, for all readers. There are several different forms of colour blindness which can cause some colours to appear indistinguishable. The use of a [colour blind checker](https://www.color-blindness.com/coblis-color-blindness-simulator/) [@Colblindor] can show you what your plots may look like under different types of colour blindness. This is particularly important for diverging and qualitative palettes where the distinction between hues is used to tell apart different values. In contrast, sequential palettes often use luminosity to show how values change. @Hoellt2023 note that single hue palettes are a safer choice as they are typically more likely to be colourblind friendly. @Hoellt2023 also note that the larger the variability across luminosity and chroma (purity of colour), the likelier it is that the colours are more distinguishable by those with colour blindness. [Paul Tol](https://personal.sron.nl/~pault/) [-@Tol2021] has some very useful resources on choices of colours, and several suggested palettes.

```{r}
library(ggplot2)
Expand Down Expand Up @@ -469,7 +469,6 @@ The placement of annotations is also key:
- When adding more extensive text to explain an outlier or point of interest, place the text in a relevant position. For example, if you're annotating a line chart to explain a decrease in value in 2008, position the text near to 2008.
- Don't fill every white space with text. @ONSstyle recommends [a maximum of 3 or 4 annotations per chart](https://style.ons.gov.uk/data-visualisation/titles-and-text/annotation-and-footnotes/) to avoid overwhelming readers. This also means keeping annotations brief and to the point. This is especially true for data visualisations that accompany journal publications or magazine articles where further textual explanation is likely included already.


### Checklist

- Check if there are outliers that need further explanation, or values that could be directly labelled.
Expand All @@ -478,7 +477,7 @@ The placement of annotations is also key:

## Fonts

Font choice is a key component of making your data visualisations easy to understand. Some fonts are easier to read than others, and this is particularly true for those with visual impairments, or a learning disability such as dyslexia. A poor choice of font may make your visualisation inaccessible to a significant number of people in your audience.
Font choice is a key component of making your data visualisations easy to understand. Some fonts are easier to read than others, and this is particularly true for those with visual impairments, or a learning disability such as dyslexia. A poor choice of font may make your visualisation inaccessible to a significant number of people in your audience.

Try to minimise the number of different types of font you use: use a fixed set of sizes, a maximum of two different font families, and minimise the use of mixing font faces. This all helps to reduce unnecessary work from a reader when they look at your visualisation. Previous advice relating to choice of colour is also relevant here - it's particularly important to check there is sufficient contrast between the background colour and the text colour.

Expand All @@ -494,13 +493,15 @@ So what makes a good choice of font family? There are three main types of font:
- **Sans serif**: Fonts without serifs are called sans serif fonts.
- **Monospace**: monospace fonts are those whose characters each take up an equal width.

There is no consensus as to which type of font (serif, sans serif, or monospace) is more accessible. The simpler characters of sans serif fonts may increase readability for visually impaired readers, while those with dyslexia may find the characters more difficult to tell apart. Serif fonts (such as Times New Roman) can be more difficult to read as the decorative lines distract from the shape of the letter. This is especially true in digital publications where on-screen pixelation can further distort the letters. We'd recommend avoiding serif fonts for any text in images that will appear online.
There is no consensus as to which type of font (serif, sans serif, or monospace) is more accessible. The simpler characters of sans serif fonts may increase readability for visually impaired readers, while those with dyslexia may find the characters more difficult to tell apart. Serif fonts (such as Times New Roman) can be more difficult to read as the decorative lines distract from the shape of the letter. This is especially true in digital publications where on-screen pixelation can further distort the letters. We'd recommend avoiding serif fonts for any text in images that will appear online. Common sans serif fonts such as Arial, Calibri, and Verdana are often considered to be accessible.

[Dyslexie](https://www.dyslexiefont.com/) and [OpenDyslexic](https://opendyslexic.org/) are fonts specifically designed to aid readability for those with dyslexia, as they increase font weight at the bottom of the letters which reduces how much the letters appear to move around. Atkinson Hyperlegible is a font developed by the Braille Institute of America, which is designed to maximise distinction between different characters for low vision readers. It's freely available, and can be downloaded from the [Braille Institute](https://brailleinstitute.org/freefont) or used through [Google Fonts](https://fonts.google.com/specimen/Atkinson+Hyperlegible). There is conflicting evidence about whether or not specially designed fonts are actually more accessible [@Rello2016, @Wery2017]. Therefore, sticking with a sans serif font is likely a safer choice.

Common sans serif fonts such as Arial, Calibri, and Verdana are often considered to be accessible. [Dyslexie](https://www.dyslexiefont.com/) and [OpenDyslexic](https://opendyslexic.org/) are fonts specifically designed to aid readability for those with dyslexia, as they increase font weight at the bottom of the letters which reduces how much the letters appear to move around. Atkinson Hyperlegible is a font developed by the Braille Institute of America, which is designed to maximise distinction between different characters for low vision readers . It's freely available, and can be downloaded from the [Braille Institute](https://brailleinstitute.org/freefont) or used through [Google Fonts](https://fonts.google.com/specimen/Atkinson+Hyperlegible). Some fonts, particularly sans serif fonts, have characters which appear very similar to other characters. For example, a capital I, lowercase l, and number 1, can sometimes be indistinguishable. Choose a font face with a distinguishable feature for each letter and number. Source Sans Pro and Verdana both meet this condition.
Some fonts, particularly sans serif fonts, have characters which appear very similar to other characters. For example, a capital I, lowercase l, and number 1, can sometimes be indistinguishable. Choose a font face with a distinguishable feature for each letter and number. Source Sans Pro and Verdana both meet this condition.

### Font face

Font faces, e.g., bold or italic effects, can be used to emphasise particular parts of text. For example, a plot annotation may highlight a specific value placed in amongst some explanatory text. Italicised text is generally considered more difficult to read, as is capitalised text when used for the purpose of emphasis. Instead, use bold text to highlight (sparingly!).
Font faces, e.g., bold or italic effects, can be used to emphasise particular parts of text. For example, a plot annotation may highlight a specific value placed in amongst some explanatory text. Italicised text is generally considered more difficult to read [@Rello2016], as is capitalised text when used for the purpose of emphasis. Instead, use bold text to highlight (sparingly!).

### Checklist

Expand Down
10 changes: 9 additions & 1 deletion docs/tools.qmd
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,13 @@ R [@RTeam2021] is a programming language which is popular for statistical comput

To help authors with styling their charts to fit in with the guidance in this document, we have developed an R package, [{RSSthemes}](https://github.com/nrennie/RSSthemes). We include some examples of using the package here, but encourage readers to check the GitHub repository for any updates.

We aim to add this package to CRAN in the near future, but in the meantime you can install the development version from GitHub:
You can install the {RSSthemes} package from CRAN using:

```{r}
install.packages("RSSthemes")
```

You can install the development version from GitHub (although we can't promise it will be as stable as the CRAN version):

```{r}
remotes::install_github("nrennie/RSSthemes")
Expand Down Expand Up @@ -215,6 +221,8 @@ dev.off()

[Python](https://www.python.org/) is a general-purpose programming language, with libraries available that provide capabilities for data analysis and visualisation.

A work-in-progress Python package for implementing RSS colour palettes can be found at [github.com/nrennie/RSSpythemes](https://github.com/nrennie/RSSpythemes). If you'd like to contribute to this Python package development, please [raise an issue](https://github.com/nrennie/RSSpythemes/issues) or create a pull request on GitHub.

#### Matplotlib

[Matplotlib](https://matplotlib.org/) is a Python library for creating static, animated, and interactive data visualisations.
Expand Down
42 changes: 41 additions & 1 deletion references.bib
Original file line number Diff line number Diff line change
Expand Up @@ -419,4 +419,44 @@ @article{VanWeert2021
url = {https://www.sciencedirect.com/science/article/pii/S0738399120303499},
author = {Julia C.M. {van Weert} and Monique C. Alblas and Liset {van Dijk} and Jesse Jansen},
keywords = {Risk communication, Graph formats, Aging, Health literacy, Numeracy, Graph literacy, Decision aids},
}
}

@article{Rello2016,
author = {Rello, Luz and Baeza-Yates, Ricardo},
title = {The Effect of Font Type on Screen Readability by People with Dyslexia},
year = {2016},
issue_date = {May 2016},
publisher = {Association for Computing Machinery},
address = {New York, NY, USA},
volume = {8},
number = {4},
issn = {1936-7228},
url = {https://doi.org/10.1145/2897736},
doi = {10.1145/2897736},
journal = {ACM Trans. Access. Comput.},
month = {May},
articleno = {15},
numpages = {33},
}

@article{Wery2017,
author = {Wery, J.J. and Diliberto, J.A.},
title = {The effect of a specialized dyslexia font, OpenDyslexic, on reading rate and accuracy},
year = {2017},
volume = {67},
url = {https://doi.org/10.1007/s11881-016-0127-1},
doi = {10.1007/s11881-016-0127-1},
journal = {Ann. of Dyslexia.},
pages = {114–127}
}

@inproceedings{Hoellt2023,
booktitle = {EuroVis 2023 - Short Papers},
editor = {Hoellt, Thomas and Aigner, Wolfgang and Wang, Bei},
title = {{cols4all: a Color Palette Analysis Tool}},
author = {Tennekes, Martijn and Puts, Marco J. H.},
year = {2023},
publisher = {The Eurographics Association},
ISBN = {978-3-03868-219-6},
DOI = {10.2312/evs.20231040}
}
1 change: 0 additions & 1 deletion styles.css

This file was deleted.

3 changes: 3 additions & 0 deletions styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/*-- scss:defaults --*/

/*-- scss:rules --*/

0 comments on commit a1d5d9d

Please sign in to comment.