Add themes

[wurli]

I think a selection of 3-5 really nice themes is better than many okay themes. I expect these will need some iteration.

Things to think about:

• Fonts - it can be a pain to change these
• Light/dark themes
• How will theming affect accessibility? E.g. light background with light colours. Might be worth recommending certain themes for certain colour scales.
• Facetting
• There's really nice guidance for creating new themes in the ggplot2 book

[wurli]

I'd suggest having, at a minimum, something like:

• A 'cool' theme
• A 'warm' theme
• A 'minimal' theme (maybe?)
• Light/dark versions of all the above (maybe?)

As far as possible, let's try and unify the style of these. E.g. legend position, text size etc should be the same between themes.

[cooke-sm]

Quick update: @emmadap and I just met to discuss and we're going to first start pulling together examples of charts/graphs we like and think would be good themes to replicate (hopefully already written in R with a relevant github link a la #tidytuesday). We'll put the examples we find in here (plus any style guides ect).

We'll aim to reconvene next Friday to agree on two to design up into themes - aiming for a more minimal one which is more data-communication focused and one which is more report focused.

In the mean time if you've seen nice examples of charts (written in R or not!) then please post them here so we've got a bit of a pin board of things to consider.

Sam

[cooke-sm]

[emmadap]

Initial look into accessibility

Colour Blindness

Colour is an important way of holding people's interest and helping them to understand data. It is therefore best practice to use colour when communicating data and its results.

Adobe colour looks like the best tool for testing accessibility for the most common types of colour blindness. These are:

• Deuteranopia. Green-blindness, where reds tend to appear brownish-yellow, and greens as beige
• Protanopia. Red-blindness, where certain shades of orange, yellow, and green all appear as yellow.
• Tritanopia. Blue-blindness

The DfE secondary colour palette, from the brand guidelines, is colour-blind accessible for these three most common types of colour-blindness.

However, other forms of colour blindness exists, which can be simulated on this webpage. Because, they act in different ways, there are conflicts between which colours of accessible for different types of colour blindness.

This means that it is best practice that "Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." - Web Content Accessibility Guidelines (WCAG).

For example, for line charts, different line styles can be used. Or lines, can be used rather than a legend to label data (sorry the pics are big and blurry!):

This info will also help with issue #13

Visual Impairment

Increasing the colour contrast and font size will make a plot significantly more accessible for those with visual impairments.

The DfE brand guidelines have specific advice on font sizes and which combinations of primary, secondary, an dark brand colours to combine. Adobe colour also has a contrast checker, for these combinations to be checked.

Alt text, which screen reading software will read out for people using it, is also becoming more common - is there a way of encouraging this through the theme or package, or maybe this is more something to leave until you come to use the plot in a document?

Further Work

There are a lot of resources on accessibility that I've come across. But these two points feel like a good place to start and should significantly help with the main barriers that people face. And, I think these notes cover the main points/things to consider for both.

Things to look into more:

• Have a look over the Web Content Accessibility Guidelines (WCAG)
• This thorough blog with lots of examples for colour use/ palettes in particular

[emmadap]

Theme Inspiration

I went on an Effective Data Visualisation Course yesterday, most of these examples are from there. The main takeaway was to use colour effectively and to really think about what needs to be included in the chart, so that you're only included what needs to be included for the story the chart is telling, rather than just going with the default (usually more 'academic') ways that charts tend to be laid out.

I'm aware not all of these things will come under what the theme can do, but these are my favourite examples and what I like about them, and I think a lot of it will come under the themes.

Lining up along the margins of the chart

One of the main things that I think looks really good in plots that I've looked at is when everything is lined up neatly to the margins, like this:

I think horizontal lines like this also look good:

Not having sideways text

Now that I've noticed it, it seems so obvious that you can just put bar charts sideways when they have long category names, the the y axis title can be put at the top rather than sideways down the side, and the units can be put by the side of the top number if that works! 🤦‍♀️

I also like how the bar chart category names are at the top of the bars here, because that's where you're looking. But on the other hand this isn't where you'd expect them to be

Choosing what to emphasises carefully

A lot of really good looking plots have de-emphasised visual elements that you would usually make prominent, e.g. the axes and it's values. However, I think it's a good point that if the exact values aren't as important as e.g. a trend on a line chart, you actually want people to be initially just focused on the line, like this one:

Here, although there's quite a lot going on, they reduced the visual elements by not having lines around each bar

[cooke-sm]

Howdy folks

Had a bit of a play around with this last night and made a start on a light theme:

If you look at the add-themes branch I've started it in there - @emmadap if you want to do some work on this I would suggest doing so on that branch?

[cooke-sm]

Add in arrow