Colourscheme for transport modes

[Robinlovelace]

This is really a design issue but opening here as the code used to address it in the first instance, via pngs, will likely live in this repo.

Here are some colourschemes!

Which do you like best/worst? Any ideas welcome, especially if they come with updates to the code below.

```r # Aim: highlight different colourscheme options for pngs of infographics # run from route directory of actdev repo setwd("~/cyipt/actdev") source("code/mode-split-summary.R") ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) + geom_bar(position = "stack", stat = "identity") + scale_fill_manual(values = c("blue", "green", "purple", "red")) + labs(y = "", x = "Distance band (km)", fill = "") + theme_minimal() ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) + geom_bar(position = "stack", stat = "identity") + scale_fill_manual(values = c("darkblue", "blue", "purple", "red")) + labs(y = "", x = "Distance band (km)", fill = "") + theme_minimal() # alternative palette - see # https://www.colourlovers.com/palette/4790872/DianaSpringCrocus cols = c("#698203", "#9FC1DA", "#D9BEDF", "#D38521", "#698203", "#9FC1DA", "#D9BEDF", "#D38521") ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) + geom_bar(position = "stack", stat = "identity") + scale_fill_manual(values = cols) + labs(y = "", x = "Distance band (km)", fill = "") + theme_minimal() # https://www.colourlovers.com/palette/92095/Giant_Goldfish cols = names(read.csv(text = "#69D2E7,#A7DBD8,#E0E4CC,#F38630,#FA6900,#69D2E7,#A7DBD8,#E0E4CC", check.names = F)) cols = cols[-3] ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) + geom_bar(position = "stack", stat = "identity") + scale_fill_manual(values = cols) + labs(y = "", x = "Distance band (km)", fill = "") + theme_minimal() # with grey background ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) + geom_bar(position = "stack", stat = "identity") + scale_fill_manual(values = cols) + labs(y = "", x = "Distance band (km)", fill = "") + theme_minimal() + theme(plot.background = element_rect(fill = "#434343")) # with transparent background g = ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) + geom_bar(position = "stack", stat = "identity") + scale_fill_manual(values = cols) + labs(y = "", x = "Distance band (km)", fill = "") + theme_minimal() ggsave(filename = "test.png", width = 4, height = 3, dpi = 100, plot = g2, bg = "transparent") i = magick::image_read("test.png") i i2 = magick::image_background(i, color = "purple") i2 ```

[Robinlovelace]

# Aim: highlight different colourscheme options for pngs of infographics

# run from route directory of actdev repo
setwd("~/cyipt/actdev")
source("code/mode-split-summary.R")

ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) +
  geom_bar(position = "stack", stat = "identity") +
  scale_fill_manual(values = c("blue", "green", "purple", "red")) +
  labs(y = "", x = "Distance band (km)", fill = "") +
  theme_minimal()

ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) +
  geom_bar(position = "stack", stat = "identity") +
  scale_fill_manual(values = c("darkblue", "blue", "purple", "red")) +
  labs(y = "", x = "Distance band (km)", fill = "") +
  theme_minimal()

# alternative palette - see
# https://www.colourlovers.com/palette/4790872/DianaSpringCrocus
cols = c("#698203", "#9FC1DA", "#D9BEDF", "#D38521", "#698203", "#9FC1DA", "#D9BEDF", "#D38521")
ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) +
  geom_bar(position = "stack", stat = "identity") +
  scale_fill_manual(values = cols) +
  labs(y = "", x = "Distance band (km)", fill = "") +
  theme_minimal()

# https://www.colourlovers.com/palette/92095/Giant_Goldfish
cols = names(read.csv(text = "#69D2E7,#A7DBD8,#E0E4CC,#F38630,#FA6900,#69D2E7,#A7DBD8,#E0E4CC", check.names = F))
cols = cols[-3]
ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) +
  geom_bar(position = "stack", stat = "identity") +
  scale_fill_manual(values = cols) +
  labs(y = "", x = "Distance band (km)", fill = "") +
  theme_minimal()

# with grey background
ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) +
  geom_bar(position = "stack", stat = "identity") +
  scale_fill_manual(values = cols) +
  labs(y = "", x = "Distance band (km)", fill = "") +
  theme_minimal() +
  theme(plot.background = element_rect(fill = "#434343"))

# with transparent background
g = ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) +
  geom_bar(position = "stack", stat = "identity") +
  scale_fill_manual(values = cols) +
  labs(y = "", x = "Distance band (km)", fill = "") +
  theme_minimal()
ggsave(filename = "test.png", width = 4, height = 3, dpi = 100, plot = g2, bg = "transparent")
# i = magick::image_read("test.png")
# i
# i2 = magick::image_background(i, color = "purple")
# i2

^{Created on 2021-02-25 by the reprex package (v1.0.0)}

[Robinlovelace]

Of those I my updated preference is this:

https://www.colourlovers.com/palette/92095/Giant_Goldfish

Thoughts and other palettes from @Siequnu and others welcome (note the background is transparent I think).

[Robinlovelace]

Another consideration: integration with A/B Street. This is what it would look like with those colours:

...

[dabreegster]

integration with A/B Street

And inversely, abst's color scheme is customizable (we have a day and night mode already) -- we can make it look like the rest of the actdev UI.

[Robinlovelace]

Thanks Dustin, yes I guess you could also change the colours your side. Any preferences from those above? I'm going to try with these colours now to see how the barplot looks: https://github.com/a-b-street/abstreet/blob/e0fd8dd369e2285300d165a0e36a329b4d1d6f12/map_gui/src/colors.rs#L242-L245

[Robinlovelace]

Groovy!

cols = c("#A32015", "#5D9630", "#12409D", "#DF8C3D")
g = ggplot(all_dist, aes(fill = name, y = value, x = distance_band)) +
  geom_bar(position = "stack", stat = "identity") +
  scale_fill_manual(values = cols) +
  labs(y = "", x = "Distance band (km)", fill = "") +
  theme_minimal()

[mvl22]

Of those I my updated preference is this:

Other/drive are barely distinguishable in that. I suspect a lot of people won't be able to see that difference.

[dabreegster]

The first looks the most likely to contrast. In day mode, arterials are orange: But this can become a rabbit-hole -- the day & night mode color scheme for everything on the map is by no means finalized; it's just the best we've found so far. If we like a particular scheme for the 4 modes, I bet we could adjust the map accordingly.

[Siequnu]

As the colour scheme for the UI I suggest walk: #457b9d, bike #90be6d, other #ffd166 and car #fe5f55. The colours are consistent with the modes, present good contrast for a dark background, and match the other UI element colour schemes.

Chart.JS view of how it looks on the site.

[Robinlovelace]

OK other palettes suggestions welcome. Here's the A/B Street one:

[Robinlovelace]

As the colour scheme for the UI I suggest walk: #457b9d, bike #90be6d, other #ffd166 and car #fe5f55.

Finally some hex colours, thank you, will try :tada:

[Robinlovelace]

My new fave I think (will look better in png outputs):

[mvl22]

As the colour scheme for the UI I suggest walk: #457b9d, bike #90be6d, other #ffd166 and car #fe5f55. The colours are consistent with the modes, present good contrast for a dark background, and match the other UI element colour schemes.

Yes, that works well in my view.

My new fave I think (will look better in png outputs):

That set of colours looks very clear and pleasing to me. (Are these the same as Patrick's hex set?)

[michaelkirk]

I suggest walk: #457b9d, bike #90be6d, other #ffd166 and car #fe5f55

👍 Looks good to this person with deuteranopia (red/green color blind).

[dabreegster]

I suggest walk: #457b9d, bike #90be6d, other #ffd166 and car #fe5f55

They look pretty good in day mode, and maybe the only adjustment night mode would need is changing the color of residential buildings.

[Robinlovelace]

(Are these the same as Patrick's hex set?)

Yes, thought that was self evident but good to be specific.

[Robinlovelace]

So I think after a last minute sprint and after much nudging from me, I think we have a final colourscheme for the modes in the ActDev project that can also help with integration. :tada:

Suggest as with #48 that we close this issue when the colourscheme has actually been deployed. Big progress towards closing the bigger issue https://github.com/cyipt/actdev-ui/issues/23.

[Robinlovelace]

Update in for Great Kneighton:

See rich diff here: https://github.com/cyipt/actdev/commit/423a466cd42a66872ae3bb0d632bd30440ea6aed?short_path=f7a5e1c#diff-f7a5e1c8ae0d3eee3930d6a429bb35ad2a38aedf00148f9bb409d19bd0c8ea9b

[mvl22]

Glad we got there on this!

I think this backs up the point made earlier that it's hard to get a final colour scheme for a design until the rest of the design concept has been created - a good colour scheme is an integral part of a design.

Those colours also work nicely in A/B Street - great!

[dabreegster]

I adjusted night mode houses in abst to contrast better. New deployment will look like this:

[Robinlovelace]

Hi @dabreegster it looks good but I think the placement of all the panels at the top creates an unintended regression in terms of usability on small screens. See here:

Reopening this as it's quicker and related but happy for this to be treated as a separate issue.

[mvl22]

Yes, could you ideally put that somewhere else as that's a generic A/B Street issue, and I can see it generating discussion.

[Robinlovelace]

Is it best in the A/B Street issue tracker? Guess so as I think code in that repo will fix it but will wait for feedback from @dabreegster. Can also see benefits of project-specific issues. Glad you're onboard with small 'atomic' issues @mvl22 ; )

[Robinlovelace]

On that note, they still haven't been implemented in the web app. You happy for me to open an issue on the UI repo @mvl22 ?

[mvl22]

On that note, they still haven't been implemented in the web app.

Can you clarify more specifically?

Yes, feel free to open an issue over there if it's different to the above.