Visualisierungen

Source: vignettes/Visualisierungen.Rmd

Theme für Grafiken im Corporate Design

Das theme_stat für ggplot2 - Grafiken

Das statR-ggplot2-theme ist darauf ausgelegt, sich gut ins kantonale Corporate Design einzufügen. Es basiert auf dem ggplot2-theme ‘minimal’ und bestimmt diejenigen Grafikeigenschaften, die nichts mit den Daten an sich zu tun haben (z.B. die Schriftart).

Innerhalb des themes kann die Schriftgrösse, die Position der Achsenbeschriftungen sowie das Vorhandensein von Achsenlinien, Achsen-Ticks und Gitterlinien bestimmt werden (siehe ?theme_stat()).

ggplot(mpg, aes(class, fill = drv)) +
  geom_bar() +
  
  # Default-Spezifikationen innerhalb theme_stat()
  theme_stat(base_size = 11,
             axis.label.pos = "top",
             axis.lines = "x",
             ticks = "x",
             minor.grid.lines = "y",
             major.grid.lines = "y") +
  labs(title = "Title", subtitle = "Subtitle", caption = "Caption")+
  scale_fill_manual(values=zhpal$zhwebdataviz[11:13])

Mit der Funktion flush_left() können Titel, Untertitel und Fussnote nach links verschoben werden, sodass sie bündig sind mit der y-Achse der Grafik:

p <- ggplot(mpg, aes(class,fill = drv)) +
  geom_bar() +
  
  # Default-Spezifikationen innerhalb theme_stat()
  theme_stat(base_size = 11,
             axis.label.pos = "top",
             axis.lines = "x",
             ticks = "x",
             minor.grid.lines = FALSE) +
  labs(title = "Title", subtitle = "Subtitle", caption = "Caption")+
  scale_fill_manual(values=zhpal$zhwebdataviz[11:13])

flush_left(p)

Das theme_stat() für Karten

Für Karten kann die Option map auf TRUE gesetzt werden.

# Bezug der Geodaten mit den Gemeindegrenzen (Stand 2020)
if (!dir.exists("data/GEN_A4_GEMEINDEN_2020_shp")) {
  downloader::download(
    "https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00000151_00001653.zip",
    "data/geodata.zip")
  zip::unzip("data/geodata.zip", exdir = "data/")
}

shape <- sf::st_read("data/GEN_A4_GEMEINDEN_2020_shp")
#> Multiple layers are present in data source /home/b105ptk@ji.ktzh.ch/git/statR/vignettes/data/GEN_A4_GEMEINDEN_2020_shp, reading layer `GEN_A4_GEMEINDEN_2020'.
#> Use `st_layers' to list all layer names and their type in a data source.
#> Set the `layer' argument in `st_read' to read a particular layer.
#> Warning in CPL_read_ogr(dsn, layer, query, as.character(options), quiet, :
#> automatically selected the first layer in a data source containing more than
#> one.
#> Reading layer `GEN_A4_GEMEINDEN_2020' from data source 
#>   `/home/b105ptk@ji.ktzh.ch/git/statR/vignettes/data/GEN_A4_GEMEINDEN_2020_shp' 
#>   using driver `ESRI Shapefile'
#> Simple feature collection with 162 features and 5 fields
#> Geometry type: POLYGON
#> Dimension:     XY
#> Bounding box:  xmin: 2669348 ymin: 1223935 xmax: 2716770 ymax: 1283389
#> Projected CRS: CH1903+ / LV95

map <- ggplot(shape, aes(fill = BFS)) +
  geom_sf() +
  theme_stat(map = TRUE) +
  labs(title = "Title", subtitle = "Subtitle", caption = "Caption")

map

Farbpaletten & Barrierefreiheit

Das Farbpalettenobjekt zhpal enthält alle im Package vorhandenen Farbpaletten und ist mit dem geladenen statR-Package global verfügbar.

Mit der Funktion display.statcol.all() können alle vorhandenen Farbpaletten angezeigt werden:

Mit der Funktion display() kann man sich die Farben einer Palette anschauen:

display(zhpal$zhwebdataviz)

Mit der Funktion grDevices::colorRampPalette() kann eine beliebige Anzahl Farbtöne basierend auf einer statR-Farbpalette erstellt werden:

#Mische 20 Farbtöne auf Basis der zhdiagonal-Palette
display(grDevices::colorRampPalette((zhpal$zhwebdataviz),space="Lab")(20))

Anwendungsbeispiel mit kategorialen Daten:

#verwende die Paletten für kategoriale Daten mittels 'scale_fill_manual'
ggplot(mpg, aes(class,fill = drv))+
  geom_bar()+
  theme_stat()+
  scale_fill_manual(values=zhpal$zhwebdataviz)

Grafiken fürs ZHWeb

Bei Grafiken, welche auf zh.ch publiziert werden sollen, gilt es folgendes zu berücksichtigen:

  • Maximale Bildgrösse 4000x4000
  • Grafik-Titel, Untertitel, Legende, Quelle und Alt-Text müssen direkt im CMS (Bild-Komponente) hinterlegt und nicht in die Grafik selber integriert werden
  • es muss eine auf Farbsehschwächen optimierte Farbpalette verwendet werden

Im Designsystem ist die offizielle Farbpalette für Grafiken im Web publiziert.

Die offiziellen Farbpaletten sind im statR-Package integriert. * die Palette zhwebdataviz enthält die Farben, die im Web genutzt werden sollen * die Palette zhwebaccent enthält die Akzentfarben des Designsystems. Diese sollten aber vor allem für Hintergründe verwendet werden und nicht für Visualisierungen. Diese Palette ist nicht auf Barrierefreiheit ausgelegt.

ggplot(mpg, aes(class,fill = drv))+
  geom_bar() +
  theme_stat() +
  scale_fill_manual(values=zhpal$zhwebdataviz[11:13])


# ggsave(file = "zhweb_plot.png", width=18, height=8, unit="cm")

Barrierefreie Grafiken

Bei der Erstellung von Grafiken ist es besonders wichtig darauf zu achten, dass die Grafiken auch für Personen mit (Farb-)Sehschwächen und Sehbehinderungen interpretierbar sind. Um solche barrierefreie Grafiken zu erstellen, bieten sich im Allgemeinen verschiedene Strategien an:

  • Daten, die der Grafik zugrunde liegen, zusätzlich als csv oder -html-Tabelle einbinden
  • Einen Alternativtext (alt-Text) hinterlegen, der beschreibt, was auf der Grafik abgebildet ist und wo die Daten zu finden sind
  • Farbpaletten wählen, die für Farbsehschwächen optimiert sind
  • Die Grafik soll nicht ausschliesslich aufgrund einer Farbpalette interpretierbar sein
  • Die Komplexität der Grafiken sollte auf ein Minimum beschränkt werden

Einige dieser Punkte können direkt bei der Erstellung der Grafiken in R berücksichtigt werden.

1. Farbsehschwächen

Damit Grafiken auch für Personen mit Farbsehschwächen möglichst gut interpretierbar sind, sollten Farben in Grafiken sowohl bezüglich der Farbanteile als auch der Farbsättigung variiert werden. Wenn möglich, sollten unterschiedliche Datenkategorien zudem nicht nur über die Farben sondern auch über unterschiedliche Darstellungsformen unterscheidbar sein (z.B. Schraffuren, Punkt- oder Linientypen; siehe 1.3). Auch die direkte Beschriftung von Kategorien bietet sich hier als Mittel an (siehe 1.4).

1.2 Auswahl Farbpaletten

In R können mit dem dichromat-Package diverse Ausprägungen von Farbsehschwäche simuliert werden. Dies erlaubt es Farbpaletten auszuwählen, die möglichst farbsehschwächenfreundlich sind. Je heller die Paletten sind, desto weniger geeignet sind sie. Das trifft vor allem auf Farbpaletten wie zhextralight oder zhultralight zu.

library(dichromat)
# Anzeige der Farbpalette zhdiagonal
display(zhpal$zhdiagonal)


# Simulation Grünsehschwäche (Deuteranomalie)
display(dichromat(zhpal$zhdiagonal))


# Simulation Blaublindheit (Tritanopie)
display(dichromat(zhpal$zhdiagonal,type = "tritan"))

Die Simulation kann auch anhand von Grafiken vorgenommen werden.

p <- ggplot(diamonds, aes(clarity, fill = cut)) + 
  geom_bar(position = "stack", width = 0.5)

p + theme_stat() +
  scale_fill_manual(values = dichromat(zhpal$zhdiagonal, type = c("tritan")))

1.3 Form- oder Linientypen

Wenn immer möglich sollten unterschiedliche Kategorien nicht nur mit unterschiedlichen Farben gekennzeichnet werden, sondern auch mit unterschiedlichen Schraffuren, Symbol- oder Linientypen (siehe: https://bbc.github.io/gel/components/infographics/#recommended-layout). Ja nach Grafiktyp eignen sich andere Ansätze:

Ab einer gewissen Anzahl an Kategorien, wird die Grafik unübersichtlich.

Beispiel : Liniengrafik

# Datenzugriff von: https://www.zh.ch/de/politik-staat/opendata.zhweb-noredirect.zhweb-cache.html?keywords=ogd#/datasets/544@oberjugendanwaltschaft-kanton-zuerich/distributions/1031

data <- read.csv("data/KTZH_00000544_00001031.csv") %>% 
  pivot_longer(cols=2:3)

gg_ojuga <- ggplot(data, aes(Jahr, value, color = name, linetype = name)) + 
     geom_line()+
     theme_stat()
gg_ojuga

Beispiel : Säulendiagramm

ggplot(mpg, aes(class, fill = drv, linetype = drv))+
  geom_bar(col = "black") +
  theme_stat() +
  scale_fill_manual(values = zhpal$zhblue) +
  theme(legend.position = "right", 
        axis.text.x = element_text(angle = 90, vjust = 0.5, hjust = 0))

1.4 Direkte Beschriftung

Bei gewissen Grafiktypen kann die Unterscheidbarkeit von Kategorien auch durch direkte Beschriftung verbessert werden. Das ´ggrepel´-package verfügt über die notwendigen Funktionen. Beispielsweise sorgt es dafür, dass die Beschriftungen nicht überlappen.

library(ggrepel)

data <- read.csv("data/KTZH_00000544_00001031.csv") %>% 
  pivot_longer(cols=2:3)


ggplot(data, aes(Jahr, value, color = name)) + 
  geom_text_repel(data = data %>% 
                    filter(Jahr == max(Jahr)), 
                  aes(label = name), direction = "y") +
     geom_line() +
     theme_stat() +
     guides(color = "none")