-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_presenter.html
499 lines (319 loc) · 15.3 KB
/
index_presenter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
<!DOCTYPE html>
<html>
<head>
<title> RMeetup</title>
<meta charset="utf-8">
<meta name="author" content="Thomas Lo Russo, Andrea Schnell 7. November 2017" />
<link rel="stylesheet" href="libs\testzh.css" type="text/css" />
</head>
<body>
<textarea id="source">
class: center, middle, inverse, title-slide
# <br> RMeetup
## Mastering Corporate Design with R
### Thomas Lo Russo, Andrea Schnell<br> 7. November 2017
---
class: inverse, center, middle
# The state of corporate design @ STAT ZH
???
This presentation is about 'mastering CD'. However by mastering CD we do not mean perfectly layout and format everything and investing a lot of resources to do so. It is about achieving visual consistence of different forms of publications by letting R do the job for you. We will present the functions & templates we have programmed in R that users will not use for the sake of complying with CD at any cost but for CONVENIENCE.
---
class: middle, left
#The state of CD @ <font color=#009ee0>STAT ZH</font>
- Generic CD Guidelines for cantonal public administration cover the basics (e.g. fonts)
- No centralized publishing, several self-publishers
- Infographics (Website & Twitter), Excel-Tables, statistik.info
- professionaly layouted publications are the exception
- How do we achieve <b>visual uniformity</b> of our products?
--
- <b>'Do it yourself' Corporate Design Toolbox</b>
???
The generic CD Guidelines provide a plenty of freedoms when it comes to design - especially to units that publish data-products. We at the statistical Office have no centralized publishing. We are a group of self-publishers that produce infographics, Excel-tables and pdf-publications. So given this situation, how do we achieve a high degree of visual unifomirty? We are building a Corporate Desing Toolbox for this purpouse.
---
class: middle, left
# Corporate-Design Toolbox
- Colors for R-graphics <font color=#009ee0>zhpal</font>
- Write data in formated Excel-Tables <font color=#009ee0>statXLSX</font>
- Theme for ggplot2 graphics <font color=#009ee0>theme_stat</font>
- Reports & pdf documents <font color=#009ee0>statRmd</font>
---
class: inverse, center, middle
# ZH Colour Palette
---
class: center, middle
Not the ideal <font color=#009ee0>color-palette</font> for graphs.
<!-- -->
???
The official cantonal CD-colors were made for other purpouses than data-visualization - mainly for the use in print publications produced with office products. Which explains why the palette is like it is.
---
### How we created our own color-scheme
- **Color palette creation** with R
- Mute the cd colors (color interpolation)
- Adapt the color space (LAB instead of RGB)
- Creation of a color-matrix (varying hue AND saturation)
- Testing for Colorblind-friendliness
<font color=#009ee0>Resources:</font>
**Interpolation** → grDevices::colorRampPalette()
**Colorblind-Testing** → Dichromat-package
???
Everyone was using his own palettes (mainly color brewer) - no consistence! So we decided to develop our own color scheme. Here you can see the steps of the color-sheme developemnt. We took the cd-colors, reorderer and muted them. Of course, we've adapted the colorspace to LAB instead of RGB. LAB is a color space that is optimized for the human eye better percevieng the different hues. Then i wrote a function on top of the colorRampPalette-Function that you can feed with a palette and it produces differently saturated (lighter and darker) versions of it, in equal steps. The result is a color matrix which you can see on the next slide.
---
class: center,middle
<!-- -->
---
class: center,middle
.pull-left[
```r
p = ggplot(diamonds, aes(clarity, fill=cut)) +
geom_bar(position = "stack", width= 0.5)
p +theme_stat() +
scale_fill_manual(values=zhpal$zhdiagonal)
```
<!-- -->
]
.pull-right[
```r
library(dichromat)
p +theme_stat() +
scale_fill_manual(values=dichromat(zhpal$zhdiagonal,type=c("tritan")))
```
<!-- -->
]
???
If you should ever create your own palette you will have it tested for colorblindness.
The dichromat package is a great resource. You can see an example here.
---
background-image: url(libs/darthvader.jpg)
background-position: 50% 50%
class: center, bottom, inverse
???
So let me draw a short conclusion. There is no strict obligation to use these colours-palettes for everything. However, i believe in the persuasion of the force of convenience will get more and more people to use our color scheme and finally make all our charts look alike.
---
class: inverse, center, middle
# Producing already formated XLSX-tables with R
???
I would never have imagined to give a presentation related to EXCEL at an R-meetup. But here i am. I will try to make it short. We're in this toghether and will survive it for sure. Just think about the Apero.
---
background-image: url(libs/turtles.gif)
background-position: 50% 10%
background-size: 80%
class: center, bottom, inverse
## Our users love Excel-tables
100+ Excel-tables on our website<br>
Data is delivered in Excel-tables to users on a daily-basis<br>
No strict guidelines on how XLSX files should look like
.footnote[[<font color=#FFFFFF>Gif: Hoguemr, reddit<font>](https://www.reddit.com/r/funny/comments/1gzksk/work_was_a_little_slow_for_me_this_morning_again/)]
???
The majority of our customers relies on Excel as a tool for data analysis. Thats why we have 100+ excel Tables on our website. We perform customer specific queries on a daily basis and deliver the data in Excel-tables. However there is a problem with this - for a long time, there haven't been any strict guidelines on how our XLSX Files should look like.
Even if you can do crazy stuff in Excel - i mean look at thisgif that i found on reddit. In our opinion, Exceltables should be seen as a mere Endproduct. We prefer not doing anykind of datamanipulation or extensive formatting in Excel. TO ensure reproducibility
personally speaking, i see Exceltables as a mere Endproduct. I prefer not doing anykind of datamanipulation or extensive formatting in Excel. In order to keep everything reproducible i prefer getting straight out of R Excel files. Thats what motivated the creation of the Excel-functions.
Be warned the next slide -> headache. How diverse our excels looked like (and to some degree still do)
---
background-image: url(libs/excel.gif)
background-size: contain
class: center, bottom
???
In sake of uniformity and reproducability we are trying to improve this situation. Getting ones hands dirty and manually formating excel-files or even doing the last steps of data-manipulation in Excel is an error-prone task. Thats why i set up r-functions that allow for generating the final output without ever leaving R. This ensures reproducibility.
---
#statXLSX
Creating formated excel-tables straight-out-of-R saves time and reduces the risk of errors. We recurred to the [***openxlsx-package***](https://cran.r-project.org/web/packages/openxlsx/openxlsx.pdf) package to define functions that write R-datasets in formated STAT ZH-Excel-tables.
***single worksheet***
statR::quickXLSX(data,"name of the table")
***multiple worksheets***
statR::statXLSX(data,"name of the table", worksheets)
***Advantages***
+End-to-end reproducibility
+quality assurance, less error prone
+visual coherence
???
The amount of time i spend with formatting excel-tables at work is directly correlated with job-dissatisfaction. i love my job. And to assure that this stays as it is i wrote these functions. There are several packages that allow to create xlsx files. I choose to build the functions on top of the openxlsx package. openxlsx does not dependend on Java, which has caused me trouble when using other excel-packages.
We are planing to automatize the Excel-production and the functions will come into play in this process.
---
background-image: url("libs/5.png")
background-size: contain
class: center, bottom
---
background-image: url("libs/6.png")
background-size: contain
class: center, bottom
---
class: inverse, center, bottom
# theme_stat()
## <br>a theme for ggplot2 graphics
<br>
.right[
<IMG SRC="http://hexb.in/hexagons/ggplot2.png" width = "150" height = auto>]
---
class:top, left
# Graphics with <font color=#009ee0>theme_stat()</font>
.pull-left[
```r
ggplot(mtcars,
aes(x = factor(cyl),
fill = factor(cyl)))+
geom_bar()
```
<br>
<img src="index_presenter_files/figure-html/unnamed-chunk-7-1.png" style="display: block; margin: auto;" />
]
--
.pull-right[
```r
ggplot(mtcars,
aes(x = factor(cyl),
fill = factor(cyl)))+
geom_bar()+
*theme_stat()
```
<img src="index_presenter_files/figure-html/unnamed-chunk-9-1.png" style="display: block; margin: auto;" />
]
???
we specify font, default colors many arguments within theme, such as axes (lines, breaks, ticks), panel,grid, legend.position, background-color
---
class: inverse, center, bottom
# statRmd
## <br>RMarkdown pdf templates
<br>
.right[
<IMG SRC="http://hexb.in/hexagons/rstudio.png" width = "150" height = auto><IMG SRC="http://hexb.in/hexagons/rmarkdown.png" width = "150" height = auto><IMG SRC="http://hexb.in/hexagons/knitr.png" width = "150" height = auto>]
---
class: left, top
# Our Analytical Publications
### PDF publications (mainly online)
.pull-left[
[<b> statistik.info</b>](https://statistik.zh.ch/internet/justiz_inneres/statistik/de/themen/statistikinfo.html)
- custom made
- stand-alone
- single-authored projects
- text-intensive
.center[<IMG SRC=libs/info.gif width = "180" height = auto>]
]
.pull-right[
<font color=#009ee0><b>Periodic reports</b></font>
- highly automated
- parameterized
- «reproducible»
- mainly charts and tables
.center[<IMG SRC=libs/report.gif width = "180" height = auto>]
]
---
class: top, left
# Workflow
### Current state
- Analysis in various .r files
- Produce graphics with R and save as .png
- Include .png in Word template
- Publish Word as PDF
--
### Goal
Establish an analysis and publication process, that is
- traceable
- «reproducible»
- allows publication of high quality charts and maps
- in accordance to our corporate design
--
.large[<font color=#009ee0>➡ RMarkdown</font>]
???
Markdown is a lightweight markup language with plain text formatting syntax. It is designed so that it can be converted to HTML and many other formats using a tool by the same name.set up a RMarkdown file in RStudio render it with some tex-compiler through kniter and get the pdf. How can you custommize your pdf output? -> YAML header
---
class: left, top
# RMarkdown pdf output
.pull-left[
### Default
```r
---
title: "Title"
author: "Name"
output:
* pdf_document
---
```
.center[<IMG SRC=libs/RMarkdown_default.PNG width = "150" height = auto>]
]
--
.pull-right[
###statRmd::stat_report
```r
---
title: "Haupttitel"
author: "Vorname Nachname"
output:
* statRmd::stat_report
---
```
.center[<IMG SRC=libs/titel_statistikinfo.PNG width = "150" height = auto>]
]
???
let's get a bit deeper in the technical details. we see here a yaml header of a random RMarkdown file. In the yaml header you define your output type, pdf, html, word, whatever. according to the output section this file is going to produce a PDF document. furthermore, we have specified a latex_engine xelatex (necessary for arial fonts) and a cairo_pdf device for the graphics output. probably, we wish to make further adjustments to the output. we have (at least) 2 ways of making further customizations. Probably you may want do make adjustments to the default .tex layout. like font, colors, title page etc. 2 ways of doing this:
- in the header-includes: you can do the tex-adjustments, loading packages, define colors etc.
- you create you own my_template.tex and overwrite rmarkdowns default .tex file
---
class: left, top
# Build <font color=#009ee0>statRmd</font> package
### Why build a package?
- Code organization
- Consistent documentation
- Code distribution
<!-- - it has become pretty easy to do, thanks to -->
<!-- .center[ -->
<!-- <IMG SRC="http://hexb.in/hexagons/devtools.png" width = "100" height = auto><IMG SRC="http://hexb.in/hexagons/roxygen2.png" width = "100" height = auto>] -->
- Templates
--
### Content
- RMarkdown Templates
- Some helper functions
???
as for every R project, there are many good reasons why to build a package.
-it helps you keep your code organized. compared to having different code snippets and functions in project-specific folders
-it helps you document your codes in a way that your co-workers and your future-you will still understand you reasoning
-sharing a package comes more handy than sharing different functions and code snippets based on different package versions
- you can create doucment templates. for this specific case this is an excellent reason to build package
along with the templates we provide some helpfer functions, to nicely align the graphics output in the document or to nicely wrap plot titles
---
class: left, top
# Load Template from <font color=#009ee0>statRmd</font>
File > New File > R Markdown > From Template
---
background-image: url("libs/sticker-01.png")
background-position: bottom right
background-size:30%
# Keep in touch
<br>
Slides
https://statistikzh.github.io/RMeetup/
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>
<!-- .right[<IMG SRC="libs/sticker-01.png" width = auto height = "150">] -->
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script>var slideshow = remark.create({
"highlightStyle": "github",
"highlightLines": true,
"countIncrementalSlides": false,
"self_contained": false
});
if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) {window.dispatchEvent(new Event('resize'));});
(function() {var d = document, s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler"); if (!r) return; s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }"; d.head.appendChild(s);})();</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
}
});
</script>
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML';
if (location.protocol !== 'file:' && /^https?:/.test(script.src))
script.src = script.src.replace(/^https?:/, '');
document.getElementsByTagName('head')[0].appendChild(script);
})();
</script>
</body>
</html>