class: center, middle, inverse, title-slide # Ansprechende Grafiken ## mit minimalem Aufwand ### Thomas Lo Russo ### 27.02.2018 --- class: middle ##<font color=#009ee0>Wofür visualisieren wir unsere Daten?</font> Herausforderung: Die Vielzahl an Erhebungen. Datenvisualisierungen helfen uns dabei die Datenflut zu bewältigen. - Plausibilisierung und Qualitätsprüfung - Explorative Datenanalyse - Kommunikation relevanter Entwicklungen (in Print- & Webpublikationen) - Als Teaser um die Sichtbarkeit zu erhöhen (Twitter) --- class: center, middle Altersquotient auf Bezirksebene, 1998 - 2017 <table class="table table-striped" style="font-size: 7px; width: auto !important; margin-left: auto; margin-right: auto;"> <thead><tr> <th style="text-align:left;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> Bezirk </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 1998 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 1999 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2000 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2001 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2002 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2003 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2004 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2005 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2006 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2007 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2008 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2009 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2010 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2011 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2012 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2013 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2014 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2015 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2016 </th> <th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"> 2017 </th> </tr></thead> <tbody> <tr> <td style="text-align:left;"> Bezirk Affoltern </td> <td style="text-align:right;"> 16.5 </td> <td style="text-align:right;"> 16.7 </td> <td style="text-align:right;"> 17.0 </td> <td style="text-align:right;"> 17.3 </td> <td style="text-align:right;"> 17.4 </td> <td style="text-align:right;"> 17.9 </td> <td style="text-align:right;"> 18.5 </td> <td style="text-align:right;"> 19.1 </td> <td style="text-align:right;"> 19.7 </td> <td style="text-align:right;"> 20.7 </td> <td style="text-align:right;"> 21.5 </td> <td style="text-align:right;"> 22.2 </td> <td style="text-align:right;"> 22.9 </td> <td style="text-align:right;"> 23.8 </td> <td style="text-align:right;"> 24.7 </td> <td style="text-align:right;"> 25.6 </td> <td style="text-align:right;"> 26.4 </td> <td style="text-align:right;"> 27.2 </td> <td style="text-align:right;"> 27.8 </td> <td style="text-align:right;"> 28.6 </td> </tr> <tr> <td style="text-align:left;"> Bezirk Andelfingen </td> <td style="text-align:right;"> 23.0 </td> <td style="text-align:right;"> 22.8 </td> <td style="text-align:right;"> 22.6 </td> <td style="text-align:right;"> 22.7 </td> <td style="text-align:right;"> 22.8 </td> <td style="text-align:right;"> 22.6 </td> <td style="text-align:right;"> 22.8 </td> <td style="text-align:right;"> 23.0 </td> <td style="text-align:right;"> 23.8 </td> <td style="text-align:right;"> 23.9 </td> <td style="text-align:right;"> 24.5 </td> <td style="text-align:right;"> 25.0 </td> <td style="text-align:right;"> 25.6 </td> <td style="text-align:right;"> 26.0 </td> <td style="text-align:right;"> 27.2 </td> <td style="text-align:right;"> 27.5 </td> <td style="text-align:right;"> 28.1 </td> <td style="text-align:right;"> 28.7 </td> <td style="text-align:right;"> 29.6 </td> <td style="text-align:right;"> 30.0 </td> </tr> <tr> <td style="text-align:left;"> Bezirk Bülach </td> <td style="text-align:right;"> 17.9 </td> <td style="text-align:right;"> 18.3 </td> <td style="text-align:right;"> 18.7 </td> <td style="text-align:right;"> 19.0 </td> <td style="text-align:right;"> 19.1 </td> <td style="text-align:right;"> 19.5 </td> <td style="text-align:right;"> 20.0 </td> <td style="text-align:right;"> 20.5 </td> <td style="text-align:right;"> 21.1 </td> <td style="text-align:right;"> 21.5 </td> <td style="text-align:right;"> 21.5 </td> <td style="text-align:right;"> 22.0 </td> <td style="text-align:right;"> 22.4 </td> <td style="text-align:right;"> 23.0 </td> <td style="text-align:right;"> 23.5 </td> <td style="text-align:right;"> 24.1 </td> <td style="text-align:right;"> 24.4 </td> <td style="text-align:right;"> 24.7 </td> <td style="text-align:right;"> 24.9 </td> <td style="text-align:right;"> 25.3 </td> </tr> <tr> <td style="text-align:left;"> Bezirk Dielsdorf </td> <td style="text-align:right;"> 14.2 </td> <td style="text-align:right;"> 14.4 </td> <td style="text-align:right;"> 14.8 </td> <td style="text-align:right;"> 15.2 </td> <td style="text-align:right;"> 15.6 </td> <td style="text-align:right;"> 16.1 </td> <td style="text-align:right;"> 16.8 </td> <td style="text-align:right;"> 17.3 </td> <td style="text-align:right;"> 18.0 </td> <td style="text-align:right;"> 18.5 </td> <td style="text-align:right;"> 19.0 </td> <td style="text-align:right;"> 19.6 </td> <td style="text-align:right;"> 20.0 </td> <td style="text-align:right;"> 20.8 </td> <td style="text-align:right;"> 21.3 </td> <td style="text-align:right;"> 21.9 </td> <td style="text-align:right;"> 22.6 </td> <td style="text-align:right;"> 23.0 </td> <td style="text-align:right;"> 23.5 </td> <td style="text-align:right;"> 24.1 </td> </tr> <tr> <td style="text-align:left;"> Bezirk Dietikon </td> <td style="text-align:right;"> 21.1 </td> <td style="text-align:right;"> 21.8 </td> <td style="text-align:right;"> 22.2 </td> <td style="text-align:right;"> 22.6 </td> <td style="text-align:right;"> 23.1 </td> <td style="text-align:right;"> 24.0 </td> <td style="text-align:right;"> 24.7 </td> <td style="text-align:right;"> 25.5 </td> <td style="text-align:right;"> 26.2 </td> <td style="text-align:right;"> 26.7 </td> <td style="text-align:right;"> 26.9 </td> <td style="text-align:right;"> 27.1 </td> <td style="text-align:right;"> 27.2 </td> <td style="text-align:right;"> 27.4 </td> <td style="text-align:right;"> 27.6 </td> <td style="text-align:right;"> 27.6 </td> <td style="text-align:right;"> 27.4 </td> <td style="text-align:right;"> 27.3 </td> <td style="text-align:right;"> 27.4 </td> <td style="text-align:right;"> 27.5 </td> </tr> <tr> <td style="text-align:left;"> Bezirk Hinwil </td> <td style="text-align:right;"> 21.1 </td> <td style="text-align:right;"> 21.6 </td> <td style="text-align:right;"> 22.0 </td> <td style="text-align:right;"> 22.0 </td> <td style="text-align:right;"> 22.0 </td> <td style="text-align:right;"> 22.3 </td> <td style="text-align:right;"> 22.6 </td> <td style="text-align:right;"> 22.9 </td> <td style="text-align:right;"> 23.1 </td> <td style="text-align:right;"> 23.5 </td> <td style="text-align:right;"> 23.9 </td> <td style="text-align:right;"> 24.5 </td> <td style="text-align:right;"> 25.0 </td> <td style="text-align:right;"> 25.3 </td> <td style="text-align:right;"> 25.9 </td> <td style="text-align:right;"> 26.6 </td> <td style="text-align:right;"> 27.3 </td> <td style="text-align:right;"> 27.9 </td> <td style="text-align:right;"> 28.5 </td> <td style="text-align:right;"> 29.3 </td> </tr> <tr> <td style="text-align:left;"> Bezirk Horgen </td> <td style="text-align:right;"> 23.3 </td> <td style="text-align:right;"> 23.7 </td> <td style="text-align:right;"> 24.2 </td> <td style="text-align:right;"> 24.4 </td> <td style="text-align:right;"> 24.8 </td> <td style="text-align:right;"> 25.4 </td> <td style="text-align:right;"> 26.0 </td> <td style="text-align:right;"> 26.4 </td> <td style="text-align:right;"> 27.3 </td> <td style="text-align:right;"> 27.8 </td> <td style="text-align:right;"> 28.6 </td> <td style="text-align:right;"> 29.4 </td> <td style="text-align:right;"> 29.9 </td> <td style="text-align:right;"> 30.1 </td> <td style="text-align:right;"> 30.6 </td> <td style="text-align:right;"> 30.9 </td> <td style="text-align:right;"> 31.4 </td> <td style="text-align:right;"> 31.7 </td> <td style="text-align:right;"> 31.9 </td> <td style="text-align:right;"> 32.3 </td> </tr> <tr> <td style="text-align:left;"> Bezirk Meilen </td> <td style="text-align:right;"> 28.4 </td> <td style="text-align:right;"> 28.6 </td> <td style="text-align:right;"> 28.8 </td> <td style="text-align:right;"> 29.2 </td> <td style="text-align:right;"> 29.1 </td> <td style="text-align:right;"> 29.3 </td> <td style="text-align:right;"> 30.2 </td> <td style="text-align:right;"> 30.7 </td> <td style="text-align:right;"> 31.3 </td> <td style="text-align:right;"> 31.9 </td> <td style="text-align:right;"> 32.8 </td> <td style="text-align:right;"> 33.8 </td> <td style="text-align:right;"> 34.6 </td> <td style="text-align:right;"> 35.4 </td> <td style="text-align:right;"> 36.3 </td> <td style="text-align:right;"> 36.9 </td> <td style="text-align:right;"> 37.0 </td> <td style="text-align:right;"> 37.3 </td> <td style="text-align:right;"> 37.3 </td> <td style="text-align:right;"> 37.3 </td> </tr> <tr> <td style="text-align:left;"> Bezirk Pfäffikon </td> <td style="text-align:right;"> 18.1 </td> <td style="text-align:right;"> 18.3 </td> <td style="text-align:right;"> 18.7 </td> <td style="text-align:right;"> 19.1 </td> <td style="text-align:right;"> 19.3 </td> <td style="text-align:right;"> 19.7 </td> <td style="text-align:right;"> 20.2 </td> <td style="text-align:right;"> 20.8 </td> <td style="text-align:right;"> 21.7 </td> <td style="text-align:right;"> 22.4 </td> <td style="text-align:right;"> 22.8 </td> <td style="text-align:right;"> 23.6 </td> <td style="text-align:right;"> 24.3 </td> <td style="text-align:right;"> 25.2 </td> <td style="text-align:right;"> 25.9 </td> <td style="text-align:right;"> 26.9 </td> <td style="text-align:right;"> 27.7 </td> <td style="text-align:right;"> 28.7 </td> <td style="text-align:right;"> 29.2 </td> <td style="text-align:right;"> 30.1 </td> </tr> <tr> <td style="text-align:left;"> Bezirk Uster </td> <td style="text-align:right;"> 16.2 </td> <td style="text-align:right;"> 16.5 </td> <td style="text-align:right;"> 17.1 </td> <td style="text-align:right;"> 17.7 </td> <td style="text-align:right;"> 18.3 </td> <td style="text-align:right;"> 19.0 </td> <td style="text-align:right;"> 19.8 </td> <td style="text-align:right;"> 20.5 </td> <td style="text-align:right;"> 21.3 </td> <td style="text-align:right;"> 22.2 </td> <td style="text-align:right;"> 22.8 </td> <td style="text-align:right;"> 23.7 </td> <td style="text-align:right;"> 24.4 </td> <td style="text-align:right;"> 25.3 </td> <td style="text-align:right;"> 25.9 </td> <td style="text-align:right;"> 26.7 </td> <td style="text-align:right;"> 27.2 </td> <td style="text-align:right;"> 27.5 </td> <td style="text-align:right;"> 27.8 </td> <td style="text-align:right;"> 28.2 </td> </tr> <tr> <td style="text-align:left;"> Bezirk Winterthur </td> <td style="text-align:right;"> 24.9 </td> <td style="text-align:right;"> 25.0 </td> <td style="text-align:right;"> 25.1 </td> <td style="text-align:right;"> 25.0 </td> <td style="text-align:right;"> 24.9 </td> <td style="text-align:right;"> 24.9 </td> <td style="text-align:right;"> 24.8 </td> <td style="text-align:right;"> 24.9 </td> <td style="text-align:right;"> 25.2 </td> <td style="text-align:right;"> 25.2 </td> <td style="text-align:right;"> 25.2 </td> <td style="text-align:right;"> 25.6 </td> <td style="text-align:right;"> 25.6 </td> <td style="text-align:right;"> 25.8 </td> <td style="text-align:right;"> 26.0 </td> <td style="text-align:right;"> 26.3 </td> <td style="text-align:right;"> 26.5 </td> <td style="text-align:right;"> 26.6 </td> <td style="text-align:right;"> 26.7 </td> <td style="text-align:right;"> 26.9 </td> </tr> <tr> <td style="text-align:left;"> Bezirk Zürich </td> <td style="text-align:right;"> 32.4 </td> <td style="text-align:right;"> 31.9 </td> <td style="text-align:right;"> 31.3 </td> <td style="text-align:right;"> 30.4 </td> <td style="text-align:right;"> 29.7 </td> <td style="text-align:right;"> 29.1 </td> <td style="text-align:right;"> 28.7 </td> <td style="text-align:right;"> 28.2 </td> <td style="text-align:right;"> 27.9 </td> <td style="text-align:right;"> 26.8 </td> <td style="text-align:right;"> 26.0 </td> <td style="text-align:right;"> 25.6 </td> <td style="text-align:right;"> 25.1 </td> <td style="text-align:right;"> 24.7 </td> <td style="text-align:right;"> 24.5 </td> <td style="text-align:right;"> 24.1 </td> <td style="text-align:right;"> 23.6 </td> <td style="text-align:right;"> 23.3 </td> <td style="text-align:right;"> 22.9 </td> <td style="text-align:right;"> 22.6 </td> </tr> </tbody> </table> --- class: center,middle <img src="index_files/figure-html/unnamed-chunk-2-1.png" height="460" /> --- class: left, top ## <font color=#009ee0>Datenvisualisierung als Teil</font> ## <font color=#009ee0>des Datenprozesses</font> Automatisierung für Wiederkehrendes & flexible Vorlagen für Einmaliges → per default **publikationsreif** (kein nachgelagerter layout-prozess) -- **Automation** is your friend. I think figures should be autogenerated as part of the data analysis pipeline (which should also be automated), and they should come out of the pipeline ready for publication, no manual post-processing needed. http://serialmentor.com/dataviz/index.html **Claus O. Wilke, Fundamentals of Data Visualization** ??? Was ist unser Ansatz wenn es um Dataviz geht? Automatisierung wo möglich, flexible Vorlagen für Spezialpublikationen (einmalig). Diese müssen per default publikationsreif sein, da wir keinen nachgelagerten layout-proszess haben. Wieso : Wir müssen agil sein. Sobald neue Daten verfügbar müssen diese so schnell wie möglich plausibiliert werden und Grafiken für die Publikation bereitstehen. Damit wir schnell sind in der erstellung von Grafiken. Möglichst effizient. Die Idee Grafikproduktion möglichst im Datenprozess einzubinden und zu automatisieren ist nicht neu, erfreut sich aber wachsender Beliebtheit. Wir sind also nicht dabei das Rad neu zu erfinden. Hier ein zitat dazu, aus einem Buch welches den grossen Fragen nachgeht : für welche Daten sind welche Visualisierungstypen sinnvoll, mit sehr schönen Beispielen. Buch von Claus Wilke, gratis, kann ich empfehlen. Wer Automatisieren will braucht eine Produktionsstrasse. Und hoffentlich eine an der es etwas weniger hektisch zugeht als hier. --- background-image: url(https://media.giphy.com/media/f7R0RwNurODbq/giphy.gif) background-size: 100% class: center --- background-image: url(Rlogo.svg) background-size: 30% background-position: 50% 44% class: center #Unsere Produktionsstrasse R ist eine integrierte open-source Software-Umgebung für Datenmanipulation, statistische Modellierung sowie grafische Darstellung der Ergebnisse (und viel mehr). -- <br> <br> <br> <br> <br> <br> <center> <img src="diagramm.png"/> </center> --- class: left, top #<font color=#009ee0>R</font> wie <font color=#009ee0>Repetier-</font> #<font color=#009ee0>& Reproduzierbarkeit</font> Mit etwas Initialaufwand können mit R reproduzierbare statische wie auch interaktive Grafiken erstellt werden. -- → mit minimalem Folgeaufand wiederkehrend aktualisierbar! -- Dasselbe gilt für die Berichte (pdf, word), Präsentationen oder html-Seiten, welche die Grafiken enthalten. Sie können als Ganzes direkt aus R generiert werden. ??? Was bezwecken wir? uns geht es nicht einfach darum durch automatisierung Zeit zu sparen, sondern auch Reproduzierbarkeit zu gewährleisten. So ist jede einzelne Grafik bis zum Endresultat reproduzierbar, keine manuellen Eingriffe, Fehleranfälligkeit minimiert und voll navollziehbar. --- class: inverse, center, middle # Beispiel: Branchenstruktur --- class: center, middle Sobald die aktuellen Daten zur Branchenstruktur verfügbar sind werden auf Knopfdruck Standardgrafiken für die jährliche Mitteilung erstellt. [***Mitteilung***](https://statistik.zh.ch/internet/justiz_inneres/statistik/de/aktuell/mitteilungen/2017/statent_2015.html) <img src="index_files/figure-html/unnamed-chunk-4-1.png" height="380" /> --- # Datenvisualisierung mit R Ausgewählte libraries für Datenvisualisierung mit R: - statische Grafiken (ggplot2) : http://ggplot2.tidyverse.org - Interaktivität gibts umsonst dazu : https://plot.ly/ggplot2 - interaktive Visualisierungen: http://www.htmlwidgets.org **Räumliche Darstellungen** z.B. mit: [tmap](https://cran.r-project.org/web/packages/tmap/vignettes/tmap-nutshell.html), [leaflet](https://rstudio.github.io/leaflet/), [sf](https://github.com/r-spatial/sf/) --- class: center,middle <img src="index_files/figure-html/unnamed-chunk-6-1.png" height="560" /> --- background-image: url(gwr.gif) background-size: 70% class: center Animiertes GIF der **Bauentwicklung** nach Quartal --- #Shiny Shiny erlaubt es mit Hilfe von R komplexe Web-Applikationen zu bauen. (keine Web-Entwickler Kenntnisse nötig!) https://shiny.rstudio.com/ Demo-Beispiel: **Sozialhilfequote-App** https://statistikzh.shinyapps.io/shiny-ddp/ --- #Fazit Unter welchen Bedingungen bietet es sich besonders an, Grafiken und Berichte mit R zu generieren? -- - Wiederkehrende Publikationen mit Grafiken & Tabellen -- - Unterschiedliche Publikationskanäle : pdf, word, excel und Webseite (interaktive Outputs). -- → Von Vorteil: **Dateninput mit möglichst konstanter Struktur** -- **Aber...** Script-Sprache, keine Grafikerstellung via GUI bzw. Dropdown-Menü! -- **Paradigmenwandel in der R-Welt** : Code muss auch für Menschen gut lesbar sein! → Hürden für Einstieg dank wachsendem Angebot an kostenlosen Tutorials & Ressourcen tiefer denn je. --- **Unsere Templates für Berichte & Grafiken sind auf Github zu finden** Theme & Farben des statistischen Amtes https://github.com/statistikZH/statR Templates für gelayoutete & CD-konforme Berichte https://github.com/statistikZH/statRmd --- background-image: url("libs/sticker-01.png") background-position: bottom right background-size:30% # Fragen? <br> Slides https://github.com/statistikZH/datenvisualisierung Website https://statistik.zh.ch Twitter <a href="https://twitter.com/statistik_zh?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">@statistik_zh</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>