Introduzione

Chi sono 👩‍💻

  1. Laurea in Fisica, Italia

  2. Dottorato di Ricerca fisica applicata, cristallografia, Francia

  3. Postdocs in Svizzera e Inghilterra

  4. Data scientist, Germania, Francia e Inghilterra

Data scientist freelance specializzata nella visualizzazione dei dati

Visualizzazione efficace dei dati

Visualizzazioni di dati medici

Visualizzazioni di dati medici

Posizione del dolore per un paziente affetto da artrite

Percezione dei colori

Vista normale

Protanopia (rosso)

Percezione dei colori

Vista normale

Deuteranopia (verde)

Colori per autismo

Colori calmi e rassicuranti: rosa e lilla

Blu e verde

Colori neutri: beige, grigio e color crema

Fonts ad alta leggibilità

Esempi di Google Fonts facili da leggere:

  • Roboto

  • Opens Sans

  • Lato

  • Montserrat

  • Atkinson Hyperlegible

  • Lexend

Coding

Packages

{cols4all}

install.packages("cols4all", dependencies = TRUE)

{coloratio}

remotes::install_github("matt-dray/coloratio")

{colorblindr}

remotes::install_github("wilkelab/cowplot")
install.packages("colorspace", repos = "http://R-Forge.R-project.org")
remotes::install_github("clauswilke/colorblindr")

Other packages:

  • {RColorBrewer}

  • {recolorize}

  • {sysfonts}

  • {showtext}

  • {savonliquide}

Come importare i font di Google

library(sysfonts)
library(showtext)
font_add_google("Lexend", family = "lexend")  
showtext_auto()
font_families()
[1] "sans"         "serif"        "mono"         "wqy-microhei" "lexend"      

Accessibilità e colori

Packages per accessibilità

  • {RColorBrewer}

  • {viridis}

  • {cols4all}

  • {colorblindr}

{RColorBrewer} package

library(RColorBrewer)
display.brewer.all(colorblindFriendly = TRUE)

Cambiare i colori con {RColorBrewer} e il font

datasets::penguins %>%
  filter(island == "Dream") %>%
  ggplot(aes(x = flipper_len, y = body_mass, colour = species)) +
  geom_point() +
  scale_colour_brewer(palette = "Set2") +
  theme_minimal(base_family = "lexend", base_size = 14) +
  ggtitle("Penguins on Dream Island")

{cols4all} package

library(cols4all)
c4a_gui()

Brand palette

{colorblindr} package

cvd_grid(palette_plot(brand, xmargin = 0.2, ymargin = 0.8, 
label_size = 4, label_family = "roboto"))

Modificare le tonalità dei colori: saturazione e luminosità

library(recolorize)
brand_rgb <- t(col2rgb(brand)/ 255 )
brand_sat <- adjust_color(brand_rgb, which_colors = c(2, 3),
                          saturation = 0.3, brightness = 0.9,
                          plotting = TRUE)

Modificare i colori tramite la saturazione e la luminosità

brand_hex <- rgb(brand_sat)
cvd_grid(palette_plot(brand_hex,label_size = 4,
                      xmargin = 0.2, ymargin = 0.8))

Contrasto cromatico

Differenza tra i colori, misurata come rapporto tra la luminanza relativa del colore più chiaro e quella del colore più scuro.

  • rapporto accettabile \(> 4.5\)
  • www.colourcontrast.cc

Contrasto cromatico: {coloratio}

library(coloratio)
cr_get_ratio("lightgreen", "black",
              view = TRUE)
[1] 14.8

Contrasto cromatico: {coloratio}

cr_get_ratio("darkblue", "black", view = TRUE)
Warning in cr_get_ratio("darkblue", "black", view = TRUE): Aim for a value of 4.5 or higher.
[1] 1.37

Esempio

library(coloratio)
library(tidyverse)

data <- read_csv("data.csv")

p <- data %>%
  ggplot(aes(
    x = value,
    y = reorder(name, value),
    fill = body)) +
  geom_col() +
  theme_void() +
  facet_wrap(~body,
    scales = "free_y") +
  labs( x = "", y = "",
    title = "Number of pain's records per body part") +
  scale_fill_manual(values = c("#FEB24C", "#1A2E45")) +  
  theme(
    axis.text.y = element_text(size = 16),
    axis.title.x = element_text(size = 18),
    strip.text = element_text(size = 16),
    legend.position = "none",
    plot.title = element_text(size = 24,
                              face = "bold",
                              hjust = 0,
                              family = "lexend"),
    plot.margin = margin(1, 10, 1, 10))

p +
  geom_text(
    aes(label = value),
    position = position_dodge(0.9),
    hjust = 1.2,
    size = 6,
    colour = map_chr(  
      ggplot_build(p)[[1]][[1]]$fill, 
      coloratio::cr_choose_bw 
      )
  )

Contrasto cromatico: {savonliquide}

library(savonliquide)
check_contrast("#BFA6DE", "#f5ebe0")

* The Contrast Ratio is 1.83

* The result for the AA check is : FAIL

* The result for the AALarge check is : FAIL

* The result for the AAA check is : FAIL

* The result for the AAALarge check is : FAIL

Risorse

  • https://analysisfunction.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/

  • https://cols4all.github.io/cols4all-R/index.html

  • https://cran.r-project.org/web/packages/recolorize/vignettes/Introduction.html

Grazie

Q&A Domande?

ritagiordano.co.uk

clarumvis.com