forked from B7M/Developing-Data-Products
-
Notifications
You must be signed in to change notification settings - Fork 0
/
section-first-week.html
625 lines (585 loc) · 105 KB
/
section-first-week.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
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
<!DOCTYPE html>
<html lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Chapter 1 First week | 01-week.knit</title>
<meta name="description" content="" />
<meta name="generator" content="bookdown 0.33 and GitBook 2.6.7" />
<meta property="og:title" content="Chapter 1 First week | 01-week.knit" />
<meta property="og:type" content="book" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Chapter 1 First week | 01-week.knit" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/css">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ background-color: #f8f8f8; }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ef2929; } /* Alert */
code span.an { color: #8f5902; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #204a87; } /* Attribute */
code span.bn { color: #0000cf; } /* BaseN */
code span.cf { color: #204a87; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4e9a06; } /* Char */
code span.cn { color: #8f5902; } /* Constant */
code span.co { color: #8f5902; font-style: italic; } /* Comment */
code span.cv { color: #8f5902; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #8f5902; font-weight: bold; font-style: italic; } /* Documentation */
code span.dt { color: #204a87; } /* DataType */
code span.dv { color: #0000cf; } /* DecVal */
code span.er { color: #a40000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #0000cf; } /* Float */
code span.fu { color: #204a87; font-weight: bold; } /* Function */
code span.im { } /* Import */
code span.in { color: #8f5902; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #204a87; font-weight: bold; } /* Keyword */
code span.op { color: #ce5c00; font-weight: bold; } /* Operator */
code span.ot { color: #8f5902; } /* Other */
code span.pp { color: #8f5902; font-style: italic; } /* Preprocessor */
code span.sc { color: #ce5c00; font-weight: bold; } /* SpecialChar */
code span.ss { color: #4e9a06; } /* SpecialString */
code span.st { color: #4e9a06; } /* String */
code span.va { color: #000000; } /* Variable */
code span.vs { color: #4e9a06; } /* VerbatimString */
code span.wa { color: #8f5902; font-weight: bold; font-style: italic; } /* Warning */
</style>
<link rel="stylesheet" href="/Users/bm/Desktop/Product/libs/assets/style.css" type="text/css" />
</head>
<body>
<div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">
<div class="book-summary">
<nav role="navigation">
<ul class="summary">
<a href="http://jhudatascience.org/"><img src="https://jhudatascience.org/images/dasl.png" style=" width: 80%; padding-left: 40px; padding-top: 8px; vertical-align: top "</a>
<li class="divider"></li>
<li class="chapter" data-level="1" data-path=""><a href="#section-first-week"><i class="fa fa-check"></i><b>1</b> First week</a>
<ul>
<li class="chapter" data-level="1.1" data-path=""><a href="#section-introduction"><i class="fa fa-check"></i><b>1.1</b> Introduction</a>
<ul>
<li class="chapter" data-level="1.1.1" data-path=""><a href="#section-welcome-to-developing-data-products"><i class="fa fa-check"></i><b>1.1.1</b> Welcome to Developing Data Products</a></li>
<li class="chapter" data-level="1.1.2" data-path=""><a href="#section-syllabus"><i class="fa fa-check"></i><b>1.1.2</b> Syllabus</a></li>
<li class="chapter" data-level="1.1.3" data-path=""><a href="#section-some-basics"><i class="fa fa-check"></i><b>1.1.3</b> Some Basics</a></li>
</ul></li>
<li class="chapter" data-level="1.2" data-path=""><a href="#section-shiny-part-1"><i class="fa fa-check"></i><b>1.2</b> Shiny Part 1</a>
<ul>
<li class="chapter" data-level="1.2.1" data-path=""><a href="#section-shiny"><i class="fa fa-check"></i><b>1.2.1</b> Shiny</a></li>
<li class="chapter" data-level="1.2.2" data-path=""><a href="#section-shinyapps.io-project"><i class="fa fa-check"></i><b>1.2.2</b> Shinyapps.io Project</a></li>
<li class="chapter" data-level="1.2.3" data-path=""><a href="#section-shiny-1.1"><i class="fa fa-check"></i><b>1.2.3</b> Shiny 1.1</a></li>
<li class="chapter" data-level="1.2.4" data-path=""><a href="#section-shiny-1.2"><i class="fa fa-check"></i><b>1.2.4</b> Shiny 1.2</a></li>
<li class="chapter" data-level="1.2.5" data-path=""><a href="#section-shiny-1.3"><i class="fa fa-check"></i><b>1.2.5</b> Shiny 1.3</a></li>
<li class="chapter" data-level="1.2.6" data-path=""><a href="#section-shiny-1.4"><i class="fa fa-check"></i><b>1.2.6</b> Shiny 1.4</a></li>
<li class="chapter" data-level="1.2.7" data-path=""><a href="#section-shiny-1.5"><i class="fa fa-check"></i><b>1.2.7</b> Shiny 1.5</a></li>
</ul></li>
<li class="chapter" data-level="1.3" data-path=""><a href="#section-shiny-part-2"><i class="fa fa-check"></i><b>1.3</b> Shiny Part 2</a>
<ul>
<li class="chapter" data-level="1.3.1" data-path=""><a href="#section-shiny-2.1"><i class="fa fa-check"></i><b>1.3.1</b> Shiny 2.1</a></li>
<li class="chapter" data-level="1.3.2" data-path=""><a href="#section-shiny-2.2"><i class="fa fa-check"></i><b>1.3.2</b> Shiny 2.2</a></li>
<li class="chapter" data-level="1.3.3" data-path=""><a href="#section-shiny-2.3"><i class="fa fa-check"></i><b>1.3.3</b> Shiny 2.3</a></li>
<li class="chapter" data-level="1.3.4" data-path=""><a href="#section-shiny-2.4"><i class="fa fa-check"></i><b>1.3.4</b> Shiny 2.4</a></li>
<li class="chapter" data-level="1.3.5" data-path=""><a href="#section-shiny-2.5"><i class="fa fa-check"></i><b>1.3.5</b> Shiny 2.5</a></li>
<li class="chapter" data-level="1.3.6" data-path=""><a href="#section-shiny-2.6"><i class="fa fa-check"></i><b>1.3.6</b> Shiny 2.6</a></li>
</ul></li>
<li class="chapter" data-level="1.4" data-path=""><a href="#section-shiny-part-3"><i class="fa fa-check"></i><b>1.4</b> Shiny Part 3</a>
<ul>
<li class="chapter" data-level="1.4.1" data-path=""><a href="#section-shinyuieditor"><i class="fa fa-check"></i><b>1.4.1</b> ShinyUiEditor</a></li>
<li class="chapter" data-level="1.4.2" data-path=""><a href="#section-layouts"><i class="fa fa-check"></i><b>1.4.2</b> Layouts</a></li>
</ul></li>
<li class="chapter" data-level="1.5" data-path=""><a href="#section-shiny-gadgets"><i class="fa fa-check"></i><b>1.5</b> Shiny Gadgets</a>
<ul>
<li class="chapter" data-level="1.5.1" data-path=""><a href="#section-shiny-gadgets-1.1"><i class="fa fa-check"></i><b>1.5.1</b> Shiny Gadgets 1.1</a></li>
<li class="chapter" data-level="1.5.2" data-path=""><a href="#section-shiny-gadgets-1.2"><i class="fa fa-check"></i><b>1.5.2</b> Shiny Gadgets 1.2</a></li>
<li class="chapter" data-level="1.5.3" data-path=""><a href="#section-shiny-gadgets-1.3"><i class="fa fa-check"></i><b>1.5.3</b> Shiny Gadgets 1.3</a></li>
<li class="chapter" data-level="1.5.4" data-path=""><a href="#section-shiny-gadgets-1.4"><i class="fa fa-check"></i><b>1.5.4</b> Shiny Gadgets 1.4</a></li>
</ul></li>
<li class="chapter" data-level="1.6" data-path=""><a href="#section-quiz-1"><i class="fa fa-check"></i><b>1.6</b> Quiz 1</a></li>
</ul></li>
<li class="divider"></li>
<p style="text-align:center;"> <a href="https://github.com/jhudsl/OTTR_Template" target="blank" > This content was published with</a> <a href="https://bookdown.org/" target="blank"> bookdown by:</a> </p>
<p style="text-align:center;"> <a href="http://jhudatascience.org/"> The Johns Hopkins Data Science Lab </a></p>
<p style="text-align:center; font-size: 12px;"> <a href="https://github.com/rstudio4edu/rstudio4edu-book/"> Style adapted from: rstudio4edu-book </a> <a href ="https://creativecommons.org/licenses/by/2.0/"> (CC-BY 2.0) </a></p>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i><a href="./"></a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<section class="normal" id="section-">
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0">
<!--script src="https://kit.fontawesome.com/6a26f47516.js"></script-->
<!--<script src="/Users/bm/Desktop/Product/libs/assets/hideOutput.js"></script>-->
<link href="/Users/bm/Desktop/Product/libs/assets/style.css" rel="stylesheet">
</head>
<div class="hero-image-container">
<img class= "hero-image" src= "https://github.com/jhudsl/OTTR_Template/raw/main/assets/dasl_thin_main_image.png">
</div>
<!--bookdown:title:end-->
<!--bookdown:title:start-->
<div id="section-first-week" class="section level1 hasAnchor" number="1">
<h1><span class="header-section-number">Chapter 1</span> First week<a href="#section-first-week" class="anchor-section" aria-label="Anchor link to header"></a></h1>
<p>In this overview module, we’ll go over some information and resources to help you get started and succeed in the course.</p>
<div id="section-introduction" class="section level2 hasAnchor" number="1.1">
<h2><span class="header-section-number">1.1</span> Introduction<a href="#section-introduction" class="anchor-section" aria-label="Anchor link to header"></a></h2>
<div id="section-welcome-to-developing-data-products" class="section level3 hasAnchor" number="1.1.1">
<h3><span class="header-section-number">1.1.1</span> Welcome to Developing Data Products<a href="#section-welcome-to-developing-data-products" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>Hello everyone, my name is Bryan Caffo and I am excited to welcome you to the Developing Data Products course. This course is designed to provide you with the necessary tools for improving the data analysis process and making data-driven decisions. Shaun Cross and I, both from the Department of Biostatistics at the Johns Hopkins Bloomberg School of Public Health, have co-developed this course. We will present the common practice techniques for building in-demand data tools in R. Throughout this course, we will cover a range of topics including R markdown and Quarto, which allow you to create websites, PDFs, presentations, and even e-books from a single file in R. We will also teach you the latest features of the Shiny package, which you can use to create interactive web applications in R. In addition, we will cover interactive graphics using Plotly and Leaflet, which enables you to create beautiful maps that you can share online. We’ve also added a section on how to use swirl and swirlify to design courses in R so that practice your understanding. We believe that the key word in Data Science is “science”. Our specialization is focused on providing you with three things: (1) an introduction to the key ideas behind working with data in a scientific way that will produce new and reproducible insight, (2) an introduction to the tools that will allow you to execute on a data analytic strategy, from raw data in a database to a completed report with interactive graphics, and (3) on giving you plenty of hands on practice so you can learn the techniques for yourself. This course represents the final cog in a data science application, creating an end-usable data product.</p>
<p>We are excited about the opportunity to attempt to scale Data Science education. We intend for the courses to be self-contained, fast-paced, and interactive. Thank you for joining us, and we look forward to seeing you in class!</p>
</div>
<div id="section-syllabus" class="section level3 hasAnchor" number="1.1.2">
<h3><span class="header-section-number">1.1.2</span> Syllabus<a href="#section-syllabus" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>In this section you will get to learn a bit more about your instructors, the course, the policies and the course objectives.</p>
<div id="section-course-instructors" class="section level4 hasAnchor" number="1.1.2.1">
<h4><span class="header-section-number">1.1.2.1</span> Course Instructor(s)<a href="#section-course-instructors" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>The primary instructor of this class is <a href="http://www.bcaffo.com/">Brian Caffo</a> Brian is a professor at Johns Hopkins Biostatistics and co-directs the <a href="http://www.smart-stats.org/">SMART working group</a> This class is co-taught by Roger Peng and Jeff Leek.</p>
</div>
<div id="section-course-description" class="section level4 hasAnchor" number="1.1.2.2">
<h4><span class="header-section-number">1.1.2.2</span> Course Description<a href="#section-course-description" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>A data product is the production output from a statistical analysis. Data products automate complex analysis tasks or use technology to expand the utility of a data informed model, algorithm or inference. This course covers the basics of creating data products using Shiny, R packages, and interactive graphics. The course will focus on the fundamentals of creating a data product that can be used to tell a story about data to a mass audience.</p>
<p>In this class students will learn a variety of core tools for creating data products in R and R Studio in specific. Students will be evaluated via quizzes and a culminating project.</p>
<p>Course Content</p>
<p>The lectures will be taught over four weeks with the third week dedicated to creating R packages.</p>
<p>The weeks are organized as follows</p>
<ol style="list-style-type: decimal">
<li>Shiny</li>
<li>Quarto</li>
<li>Creating and deploying projects</li>
<li>Creating R packages, classes and methods</li>
</ol>
</div>
<div id="section-github-repository" class="section level4 hasAnchor" number="1.1.2.3">
<h4><span class="header-section-number">1.1.2.3</span> Github repository<a href="#section-github-repository" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>This course is hosted on GitHub at <a href="https://github.com/B7M/Developing-Data-Products" class="uri">https://github.com/B7M/Developing-Data-Products</a></p>
<p>Please issue pull requests so that we may improve the materials.</p>
</div>
<div id="section-youtube" class="section level4 hasAnchor" number="1.1.2.4">
<h4><span class="header-section-number">1.1.2.4</span> YouTube<a href="#section-youtube" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>To keep the course materials as up to date as possible, we’ve decided to eliminate the video contents; however, if you think watching videos could help you have a grasp of the information faster we suggest you watch the videos on YouTube, most of them can be found here:</p>
<p><a href="https://www.youtube.com/playlist?list=PLpl-gQkQivXhr9PyOWSA3aOHf4ZNTrs90" class="uri">https://www.youtube.com/playlist?list=PLpl-gQkQivXhr9PyOWSA3aOHf4ZNTrs90</a></p>
</div>
<div id="section-book-developing-data-products-in-r" class="section level4 hasAnchor" number="1.1.2.5">
<h4><span class="header-section-number">1.1.2.5</span> Book: Developing Data Products in R<a href="#section-book-developing-data-products-in-r" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>This book introduces the topic of Developing Data Products in R. A data product is the ideal output of a Data Science experiment. This book is based on the Coursera Class “Developing Data Products” as part of the Data Science Specialization. Particular emphasis is paid to developing Shiny apps and interactive graphics.</p>
<p>The book is available here: <a href="https://leanpub.com/ddp" class="uri">https://leanpub.com/ddp</a></p>
<p>It’s variable pricing, including free! It also includes some content that was not covered in the class and omits some other. It’s a little rough, but as I work on it you’ll get all of the updates.</p>
</div>
<div id="section-weekly-quizzes" class="section level4 hasAnchor" number="1.1.2.6">
<h4><span class="header-section-number">1.1.2.6</span> Weekly quizzes<a href="#section-weekly-quizzes" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<ul>
<li>There are three weekly quizzes.</li>
<li>You must earn a grade of at least 80% to pass a quiz</li>
<li>You may attempt each quiz up to 3 times in 8 hours.</li>
<li>The score from your most successful attempt will count toward your final grade.</li>
</ul>
</div>
<div id="section-course-project" class="section level4 hasAnchor" number="1.1.2.7">
<h4><span class="header-section-number">1.1.2.7</span> Course Project<a href="#section-course-project" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>The Course Project is an opportunity to demonstrate the skills you have learned during the course. It is graded through peer assessment. You must earn a grade of at least 80% to pass the course project.</p>
</div>
<div id="section-grading-policy" class="section level4 hasAnchor" number="1.1.2.8">
<h4><span class="header-section-number">1.1.2.8</span> Grading policy<a href="#section-grading-policy" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>You must score at least 80% on all assignments (Quizzes & Project) to pass the course.</p>
<p>Your final grade will be calculated as follows:</p>
<ul>
<li>Quiz 1 = 20%</li>
<li>Quiz 2 = 20%</li>
<li>Quiz 3 = 20%</li>
<li>Course project = 40%</li>
</ul>
</div>
<div id="section-differences-of-opinion" class="section level4 hasAnchor" number="1.1.2.9">
<h4><span class="header-section-number">1.1.2.9</span> Differences of opinion<a href="#section-differences-of-opinion" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>Keep in mind that currently data analysis is as much art as it is science - so we may have a difference of opinion - and that is ok! Please refrain from angry, sarcastic, or abusive comments on the message boards. Our goal is to create a supportive community that helps the learning of all students, from the most advanced to those who are just seeing this material for the first time.</p>
</div>
<div id="section-plagiarism" class="section level4 hasAnchor" number="1.1.2.10">
<h4><span class="header-section-number">1.1.2.10</span> Plagiarism<a href="#section-plagiarism" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>Johns Hopkins University defines plagiarism as “…taking for one’s own use the words, ideas, concepts or data of another without proper attribution. Plagiarism includes both direct use or paraphrasing of the words, thoughts, or concepts of another without proper attribution.” We take plagiarism very seriously, as does Johns Hopkins University.</p>
<p>We recognize that many students may not have a clear understanding of what plagiarism is or why it is wrong. Please see the JHU referencing guide for more information on plagiarism.</p>
<p>It is critically important that you give people/sources credit when you use their words or ideas. If you do not give proper credit – particularly when quoting directly from a source – you violate the trust of your fellow students.</p>
</div>
</div>
<div id="section-some-basics" class="section level3 hasAnchor" number="1.1.3">
<h3><span class="header-section-number">1.1.3</span> Some Basics<a href="#section-some-basics" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>A couple of first week housekeeping items. First, make sure that you’ve completed R Programming and the Data Scientist’s Toolbox course. Reproducible Research would be helpful, but is not mandatory. At a minimum you must know: very basic git, basic R and very basic knitr.</p>
<p>You can clone the whole repo with (http)</p>
<p>git clone <a href="https://github.com/B7M/Developing-Data-Products.git" class="uri">https://github.com/B7M/Developing-Data-Products.git</a> or (ssh) git clone <a href="mailto:[email protected]" class="email">[email protected]</a>:B7M/Developing-Data-Products.git</p>
<p>Going through the R code is the best way to familiarize yourself with the lecture materials.</p>
<p>The lecture material for this class is largely front-loaded. This is because the latter time of the class is devoted to developing your data application. Thus the class should be doable in about a 1 month’s time or maybe less. Though make sure you’re keeping up with the classes at the beginning so that you have some space in your schedule later on for app development!</p>
<p>If you’d like to keep up with the instructors I’m <span class="citation">@bcaffo</span> on twitter, Roger is <span class="citation">@rdpeng</span> and Jeff is <span class="citation">@jtleek</span>. The Department of Biostat here is <span class="citation">@jhubiostat</span>.</p>
<p><a href="https://datasciencespecialization.github.io/Developing_Data_Products/welcome.html" class="uri">https://datasciencespecialization.github.io/Developing_Data_Products/welcome.html</a></p>
<div id="section-community-site---read-on-github" class="section level4 hasAnchor" number="1.1.3.1">
<h4><span class="header-section-number">1.1.3.1</span> Community Site - <a href="https://datasciencespecialization.github.io/Developing_Data_Products/community.html">Read on GitHub</a><a href="#section-community-site---read-on-github" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>Since the beginning of the Data Science Specialization, we’ve noticed the unbelievable passion students have about our courses and the generosity they show toward each other on the course forums. A couple students have created quality content around the subjects we discuss, and many of these materials are so good we feel that they should be shared with all of our students.</p>
<p>We’re excited to announce that we’ve created a site using GitHub Pages: <a href="http://datasciencespecialization.github.io/" class="uri">http://datasciencespecialization.github.io/</a> to serve as a directory for content that the community has created. If you’ve created materials relating to any of the courses in the Data Science Specialization, please send us a pull request so we can add a link to your content on our site. You can find out more about contributing here: <a href="https://github.com/DataScienceSpecialization/DataScienceSpecialization.github.io#contributing" class="uri">https://github.com/DataScienceSpecialization/DataScienceSpecialization.github.io#contributing</a></p>
<p>We can’t wait to see what you’ve created and where the community can take this site!</p>
</div>
<div id="section-r-and-rstudio-links-tutorials" class="section level4 hasAnchor" number="1.1.3.2">
<h4><span class="header-section-number">1.1.3.2</span> R and RStudio Links & Tutorials<a href="#section-r-and-rstudio-links-tutorials" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p><a href="https://www.coursera.org/learn/data-products/lab-sandbox?path=%2F">Practice with Lab Sandbox</a></p>
<p>If you haven’t yet installed R and RStudio, you’ll need to do so now. Here are some links and video tutorials.</p>
<p>Links</p>
<p><a href="https://posit.co">Rstudio</a> <a href="https://www.r-project.org">R project</a></p>
<p>Tutorials</p>
<p><a href="https://www.youtube.com/watch?v=LII6of-5Odw">Installing R for Windows</a> <a href="https://www.youtube.com/watch?v=xokJUwn0mis">Installing R for Mac</a> <a href="https://www.youtube.com/watch?v=JbTMvQ-SbvQ">Installing RStudio Mac</a></p>
</div>
</div>
</div>
<div id="section-shiny-part-1" class="section level2 hasAnchor" number="1.2">
<h2><span class="header-section-number">1.2</span> Shiny Part 1<a href="#section-shiny-part-1" class="anchor-section" aria-label="Anchor link to header"></a></h2>
<div id="section-shiny" class="section level3 hasAnchor" number="1.2.1">
<h3><span class="header-section-number">1.2.1</span> Shiny<a href="#section-shiny" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p><strong>Remember to read the book chapters on Shiny.</strong></p>
<p>Shiny is an important enough topic to devote a lot of time to it. Shiny is a product by RStudio and it is described by RStudio as “A web application framework for R”. They further add “Turn your analyses into interactive web applications with no HTML, CSS, or JavaScript knowledge required”. This is mostly true, though a little HTML at least would be useful for understanding some of the concepts. We’ll proceed as if your html knowledge is very basic and no more advanced than understanding heading levels for fonts. It is important to distinguish between a Shiny applications (app) and a Shiny server. A Shiny server is required to host a shiny app for the world. Otherwise, only those who have have shiny installed and have access to your code could run your web page, which is really defeating the purpose of making a web page in the first place.</p>
<p>In this class, we won’t cover creating a shiny server, as that requires understanding a little linux server administration. Instead, we’ll run our apps locally and use RStudio’s service for hosting shiny apps on a platform called <a href="https://www.shinyapps.io">shinyapps.io</a>. In other words, RStudio does the server work for your so that all you need to worry about is building your app. <a href="https://www.shinyapps.io">Shinyapps.io</a> is free up to a point in that you can only run 5 apps for a certain amount of time per month. This will be fine for our purposes, but if you’re really going to get into making Shiny apps, you’ll have to spring for a paid plan or run your own server.</p>
</div>
<div id="section-shinyapps.io-project" class="section level3 hasAnchor" number="1.2.2">
<h3><span class="header-section-number">1.2.2</span> Shinyapps.io Project<a href="#section-shinyapps.io-project" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p><strong>Shinyapps.io Project</strong></p>
<p>Some people in this session let us know that they are concerned about running up against the 25-hour per month limit on the free tier of shinyapps.io.</p>
<p>Should you hit the limit on the free plan, RStudio will send you a message. If you receive the message and are more than a few days from getting a fresh 25 hours on your monthly renewal, please send an email to <a href="[email protected]">shinyapps-support</a> with the email address you use on the service and the account name you are using (the first part of the URL). RStudio will then increase your limit so you can continue working on your project.</p>
<p>Since there are a lot of folks in the class we’d appreciate if you only emailed RStudio after you get the message and only if you feel you’ll need more time.</p>
</div>
<div id="section-shiny-1.1" class="section level3 hasAnchor" number="1.2.3">
<h3><span class="header-section-number">1.2.3</span> Shiny 1.1<a href="#section-shiny-1.1" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>Here we will introduce Shiny, which is the cornerstone of this course and we will be using it to develop data products. Shiny is a web development framework that is based on R, so you only need to know R to use it. With Shiny, you can use R for both the back end and front end of the development process. This means you don’t need to be familiar with standard tools like JavaScript, CSS and HTML. However, we will briefly talk about these later in the course. So, let’s talk about Shiny and its use in data science. Shiny has been a game-changer for data scientists who specialize in R and focus on developing algorithms and analysis. However, if you come from a web development background, you probably have a different set of tools at your disposal, and Shiny may not be your first choice. Shiny is a great tool for those who want to prototype potential data products, especially if you are a smaller organization. For larger organizations, Shiny can be used to create a prototype, which can then be converted by other skilled professionals into a more polished and visually appealing product using compiled languages, JavaScript, and HTML.</p>
<p>With Shiny we create the GUI in R, the algorithms and everything else that are powering it. That means your time to create a data product is completely minimized. As we mentioned Shiny is a product created by R Studio and it’s free; however, hosting Shiny on a server, could potentially cost you money because you need to actually have a web server that is not only going to serve up the web pages but is also going to call R in the back end to run your algorithms or models. Surprisingly, RStudio has a free hosting service, and that’s what we’re going to use for the class. If you choose to host the application on your own server, you could run off of Amazon AWS or something like that. If you only need portability at a local level, you can create and test Shiny apps locally and share them with others who use RStudio. However, the real benefit of Shiny is the ability to create a web server that anyone can access to display your data analysis or prediction algorithm. In this class, we will use shinyapps.io as our free server, and we will cover how to use it later on. Now, we will start from scratch and build a working web server with R as the back end.</p>
<p>Before we dive into using Shiny, there are a few prerequisites to keep in mind.</p>
<ul>
<li><p>Although everything is done in R, some basic knowledge of HTML is recommended. While it’s not necessary to know CSS or JavaScript, familiarity with some HTML commands can help you better understand what the R commands are doing. However, we won’t be teaching HTML here as there are plenty of online tutorials available to learn from.</p></li>
<li><p>Shiny incorporates the Bootstrap package, which is not related to the statistics bootstrap, but is instead a web design framework developed by Twitter. Bootstrap provides a set of buttons and other design elements that look good and resize well on various devices, from small phones to large screens. The creators of Bootstrap have put a lot of thought into making it user-friendly. If you are not familiar with web development, it’s recommended to stick with the Bootstrap themes in Shiny.</p></li>
<li><p>To learn about the three core components of the applications we’ll be developing, you can refer to some tutorials on HTML, CSS, and JavaScript. Briefly, CSS provides styling, JavaScript is responsible for interactivity, and HTML is the backbone of the front end. It’s crucial to familiarize yourself with HTML, so be sure to check out some HTML tutorials.</p></li>
</ul>
<p>To get started with Shiny, you’ll need to install it using the command <code>{r, echo=T, eval=F} install.packages('shiny')</code> and then ensure it’s loaded by typing <code>{r, echo=T, eval=F} library(shiny)</code>. Before beginning, it’s worth considering the official Shiny tutorial at RStudio, which this lecture will largely be following.</p>
<p>Alright, let’s quickly go over the basics of a Shiny project before we jump into some code demonstrations. To create a Shiny project, you need two files: ui.R and server.R. The ui.R file is responsible for creating the user interface and determining how your app will look, while the server.R file controls the app’s behavior and functionality. It’s time to transition into some code demonstrations, so please stay tuned.</p>
</div>
<div id="section-shiny-1.2" class="section level3 hasAnchor" number="1.2.4">
<h3><span class="header-section-number">1.2.4</span> Shiny 1.2<a href="#section-shiny-1.2" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>To create our first app, you’ll need a relatively recent version of RStudio. The easiest way to start is by clicking Alt+F (on Windows) or File (on Mac), then selecting New File, and then Shiny Web App. Name your app whatever you want, such as “myApp” Next, you can choose whether to have the files in a <strong>single</strong> file or in <strong>two separate files</strong>, a ui.R and a server.R file. We recommend doing it with two files. It’s preferred to work with many small files rather than one big file containing multiple functions. However, it’s important to note that the specific named functions within the ui.R and server.R files are what’s required, not just the files themselves. Now go ahead and create a directory and the two files, namely ui.R and server.R, by copying the following snippet codes into the pre-populated Shiny files.</p>
<div class="sourceCode" id="section-cb1"><pre class="sourceCode r"><code class="sourceCode r"><span id="section-cb1-1"><a href="#section-cb1-1" tabindex="-1"></a><span class="co">#ui.R</span></span>
<span id="section-cb1-2"><a href="#section-cb1-2" tabindex="-1"></a><span class="fu">library</span>(shiny)</span>
<span id="section-cb1-3"><a href="#section-cb1-3" tabindex="-1"></a><span class="fu">shinyUI</span>(<span class="fu">fluidPage</span>(</span>
<span id="section-cb1-4"><a href="#section-cb1-4" tabindex="-1"></a> <span class="fu">titlePanel</span>(<span class="st">"Data science FTW!"</span>),</span>
<span id="section-cb1-5"><a href="#section-cb1-5" tabindex="-1"></a> <span class="fu">sidebarLayout</span>(</span>
<span id="section-cb1-6"><a href="#section-cb1-6" tabindex="-1"></a> <span class="fu">sidebarPanel</span>(</span>
<span id="section-cb1-7"><a href="#section-cb1-7" tabindex="-1"></a> <span class="fu">h3</span>(<span class="st">"Sidebar Text"</span>)</span>
<span id="section-cb1-8"><a href="#section-cb1-8" tabindex="-1"></a> ),</span>
<span id="section-cb1-9"><a href="#section-cb1-9" tabindex="-1"></a> <span class="fu">mainPanel</span>(</span>
<span id="section-cb1-10"><a href="#section-cb1-10" tabindex="-1"></a> <span class="fu">h3</span>(<span class="st">"Main Panel Text"</span>)</span>
<span id="section-cb1-11"><a href="#section-cb1-11" tabindex="-1"></a> )</span>
<span id="section-cb1-12"><a href="#section-cb1-12" tabindex="-1"></a> )</span>
<span id="section-cb1-13"><a href="#section-cb1-13" tabindex="-1"></a>))</span></code></pre></div>
<div class="sourceCode" id="section-cb2"><pre class="sourceCode r"><code class="sourceCode r"><span id="section-cb2-1"><a href="#section-cb2-1" tabindex="-1"></a><span class="co"># server.R</span></span>
<span id="section-cb2-2"><a href="#section-cb2-2" tabindex="-1"></a></span>
<span id="section-cb2-3"><a href="#section-cb2-3" tabindex="-1"></a><span class="fu">library</span>(shiny)</span>
<span id="section-cb2-4"><a href="#section-cb2-4" tabindex="-1"></a><span class="fu">shinyServer</span>(<span class="cf">function</span>(input, output) {</span>
<span id="section-cb2-5"><a href="#section-cb2-5" tabindex="-1"></a></span>
<span id="section-cb2-6"><a href="#section-cb2-6" tabindex="-1"></a>})</span></code></pre></div>
<p>The ShinyUI function controls the user interface, and the shinyServer function is required in the server.R file. Although our server doesn’t do anything in this point. Let’s take a closer look at the ShinyUI function. The <strong>fluidPage</strong> function specifies the type of page used to create the user interface, which is typically the default option. The <strong>titlePanel</strong> function sets the title of the GUI element to <em>Data science FTW!</em> The fluidPage function contains a main panel and a side panel by default, so we use the <strong>sidebarLayout</strong> function to specify the sidebar’s contents. The sidebarPanel function is used to specify the sidebar’s contents, and the <strong>h3</strong> function sets the third-level heading for the <em>slidebar Text</em> and <em>Main panel text</em>. You can run the Shiny app in two ways. Firstly, if you have a recent version of RStudio, you can click <strong>Run App</strong> to run the app. Secondly, you can switch to the directory where the ui.R and server.R files are located and type <strong>runApp()</strong> in the console. You can also specify the app’s path within the <strong>runApp</strong> function. RStudio creates a local web server, which can be accessed using RStudio’s browser. While it’s possible to simply share the code with others so they can run it, that’s not our ultimate goal. Our goal is to have the app running on a webpage. We’ve taken the first step, so now let’s continue and work on adding functionality to make the app more useful.</p>
</div>
<div id="section-shiny-1.3" class="section level3 hasAnchor" number="1.2.5">
<h3><span class="header-section-number">1.2.5</span> Shiny 1.3<a href="#section-shiny-1.3" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>When we’re constructing our Shiny app using the default workflow, it’s important to remember that we’ll be utilizing R to insert our HTML elements. Fortunately, Shiny incorporates all of the typical HTML tags, such as the various heading tags (<strong>h1</strong> through <strong>h6</strong>), <strong>hyperlinks</strong>, <strong>divs</strong>, <strong>spans</strong>, and other commonly used ones. To view a comprehensive list of all the HTML tags available, simply type <strong>?builder</strong> in the R console. In the following sections, we’ll demonstrate how you can use your own HTML file to build your Shiny app, giving you the freedom to create a more intricate page. However, for now, we’ll be using the pre-built functions. The following code example will display the various heading styles and other elements.</p>
<div class="sourceCode" id="section-cb3"><pre class="sourceCode r"><code class="sourceCode r"><span id="section-cb3-1"><a href="#section-cb3-1" tabindex="-1"></a><span class="fu">library</span>(shiny)</span>
<span id="section-cb3-2"><a href="#section-cb3-2" tabindex="-1"></a><span class="fu">shinyUI</span>(<span class="fu">fluidPage</span>(</span>
<span id="section-cb3-3"><a href="#section-cb3-3" tabindex="-1"></a> <span class="fu">titlePanel</span>(<span class="st">"HTML Tags"</span>),</span>
<span id="section-cb3-4"><a href="#section-cb3-4" tabindex="-1"></a> <span class="fu">sidebarLayout</span>(</span>
<span id="section-cb3-5"><a href="#section-cb3-5" tabindex="-1"></a> <span class="fu">sidebarPanel</span>(</span>
<span id="section-cb3-6"><a href="#section-cb3-6" tabindex="-1"></a> <span class="fu">h1</span>(<span class="st">"H1 Text"</span>),</span>
<span id="section-cb3-7"><a href="#section-cb3-7" tabindex="-1"></a> <span class="fu">h3</span>(<span class="st">"H3 Text"</span>),</span>
<span id="section-cb3-8"><a href="#section-cb3-8" tabindex="-1"></a> <span class="fu">em</span>(<span class="st">"Emphasized Text"</span>)</span>
<span id="section-cb3-9"><a href="#section-cb3-9" tabindex="-1"></a> ),</span>
<span id="section-cb3-10"><a href="#section-cb3-10" tabindex="-1"></a> <span class="fu">mainPanel</span>(</span>
<span id="section-cb3-11"><a href="#section-cb3-11" tabindex="-1"></a> <span class="fu">h3</span>(<span class="st">"Main Panel Text"</span>),</span>
<span id="section-cb3-12"><a href="#section-cb3-12" tabindex="-1"></a> <span class="fu">code</span>(<span class="st">"Some Code!"</span>)</span>
<span id="section-cb3-13"><a href="#section-cb3-13" tabindex="-1"></a> )</span>
<span id="section-cb3-14"><a href="#section-cb3-14" tabindex="-1"></a> )</span>
<span id="section-cb3-15"><a href="#section-cb3-15" tabindex="-1"></a>))</span></code></pre></div>
<p>Let’s go over the various HTML tags that we can utilize in our Shiny app, or at least a subset of them. Specifically, we will be covering the formatting tags. In the UI.R function, we have added some headings including h1, h2, h3, which are all located in the sidebar layout. Additionally, we have included some emphasized text and code text, which is displayed in a mono space format. It’s always best to display code in this format, just like when editing code. Once you run the app, you can see the different heading values, main panel, and code displayed in mono space format. While the app is running if you click on <strong>Open in Browser</strong>, it will open the app in a web browser. Now in the browser, you can use <em>Ctrl+U</em> on Windows or <em>Option+Command+U</em> on Mac to view the R code that generates the webpage. This will allow you to see how the app uses JavaScript libraries to run Shiny. You may not need to worry about the head section unless you have some familiarity with JavaScript.</p>
<p>Most of the elements you see here are style sheets from Twitter Bootstrap, which provides the formatting for all the buttons and styles that Shiny uses. However, this section also contains some of the input and output components that Shiny requires. The majority of the content we display is in the body, where you can observe how the function creates the HTML commands by translating your ui.R file. This is a valuable exercise, particularly when creating named buttons and other similar components. It can also help you become more comfortable with coding in HTML if you’re familiar with Shiny but not with HTML. Eventually, if you intend to develop advanced web pages that call R in the back end, you’ll likely need to create your own pages rather than relying solely on ui.R. Therefore, playing around with HTML tags and designing a simple non-interactive webpage can help you become more familiar with them. In our next session, we’ll start adding buttons, sliders, and graphs, calling R in the back end, and exploring some of Shiny’s essential features.</p>
</div>
<div id="section-shiny-1.4" class="section level3 hasAnchor" number="1.2.6">
<h3><span class="header-section-number">1.2.6</span> Shiny 1.4<a href="#section-shiny-1.4" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>Our Shiny app needs to take input values, perform R calculations, and display the resulting output. To start, we are going to create a slider in the user interface for input values. The slider’s selected values will be passed to the server function and then returned to the user interface function for display. This is a preliminary exercise where we’re not using the input values for any calculations. Let’s proceed to create a slider in the sidebar panel of the shinyUI function. The slider’s name is “slider2” and it goes from 0 to 100, with a starting value of 0, and a prompt for the user like “Slide Me!”. The slider’s selected value is given the name “slider2” and displayed to the user. The shiny server function takes input and output as arguments within curly braces to define the function.</p>
<div class="sourceCode" id="section-cb4"><pre class="sourceCode r"><code class="sourceCode r"><span id="section-cb4-1"><a href="#section-cb4-1" tabindex="-1"></a><span class="co"># ui.R</span></span>
<span id="section-cb4-2"><a href="#section-cb4-2" tabindex="-1"></a><span class="fu">library</span>(shiny)</span>
<span id="section-cb4-3"><a href="#section-cb4-3" tabindex="-1"></a><span class="fu">shinyUI</span>(<span class="fu">fluidPage</span>(</span>
<span id="section-cb4-4"><a href="#section-cb4-4" tabindex="-1"></a> <span class="fu">titlePanel</span>(<span class="st">"Slider App"</span>), </span>
<span id="section-cb4-5"><a href="#section-cb4-5" tabindex="-1"></a> <span class="fu">sidebarLayout</span>(</span>
<span id="section-cb4-6"><a href="#section-cb4-6" tabindex="-1"></a> <span class="fu">sidebarPanel</span>(</span>
<span id="section-cb4-7"><a href="#section-cb4-7" tabindex="-1"></a> <span class="fu">h1</span>(<span class="st">"Move the Slider!"</span>),</span>
<span id="section-cb4-8"><a href="#section-cb4-8" tabindex="-1"></a> <span class="fu">sliderInput</span>(<span class="st">"slider1"</span>, <span class="st">"Slide Me!"</span>, <span class="dv">0</span>, <span class="dv">100</span>, <span class="dv">0</span>)</span>
<span id="section-cb4-9"><a href="#section-cb4-9" tabindex="-1"></a> ), </span>
<span id="section-cb4-10"><a href="#section-cb4-10" tabindex="-1"></a> <span class="fu">mainPanel</span>(</span>
<span id="section-cb4-11"><a href="#section-cb4-11" tabindex="-1"></a> <span class="fu">h3</span>(<span class="st">"Slider Value:"</span>),</span>
<span id="section-cb4-12"><a href="#section-cb4-12" tabindex="-1"></a> <span class="fu">textOutput</span>(<span class="st">"text"</span>) </span>
<span id="section-cb4-13"><a href="#section-cb4-13" tabindex="-1"></a> )</span>
<span id="section-cb4-14"><a href="#section-cb4-14" tabindex="-1"></a> ) </span>
<span id="section-cb4-15"><a href="#section-cb4-15" tabindex="-1"></a>))</span></code></pre></div>
<p>and</p>
<div class="sourceCode" id="section-cb5"><pre class="sourceCode r"><code class="sourceCode r"><span id="section-cb5-1"><a href="#section-cb5-1" tabindex="-1"></a><span class="fu">library</span>(shiny) </span>
<span id="section-cb5-2"><a href="#section-cb5-2" tabindex="-1"></a><span class="fu">shinyServer</span>(<span class="cf">function</span>(input, output) {</span>
<span id="section-cb5-3"><a href="#section-cb5-3" tabindex="-1"></a> output<span class="sc">$</span>text <span class="ot"><-</span> <span class="fu">renderText</span>(input<span class="sc">$</span>slider1) </span>
<span id="section-cb5-4"><a href="#section-cb5-4" tabindex="-1"></a>})</span></code></pre></div>
<p>In Shiny, a function needs to have curly braces and it needs to be closed with both curly braces and the shiny server parenthesis. The function takes input from the UI, which is the shiny UI function. The function takes in $slider and renders it, displaying the text. We can name the output text. In the UI.R, in the main Panel, we specify that the slider value is displayed and the text output is text. This ensures that the same text we labeled from the output in the server function will be displayed in the name panels. When we run the code, we can move the slider and see the slider value displayed.</p>
<iframe data-deferred-src="app2e167dbaae92eea3be8ee9bea7d8c3a7/?w=&__subapp__=1" width="100%" height="500" class="shiny-frame shiny-frame-deferred"></iframe>
<p>It’s important to note that there’s nothing special about having the slider in the side bar panel and the text in the main panel. The order isn’t significant either. The code for the slider and the output could be in different panels and still work fine. This is an important concept to keep in mind when working with Shiny and reactive expressions. You don’t want to think about it running linearly like a regular R program because the server is running reactively and constantly going back and forth. To be comfortable with Shiny your mindset needs to change a bit from regular R programming. It’s still a program, but it’s more interactive. One thing to note is that if we were to label the text output $text1 instead of $text, it wouldn’t display anything. This is because the UI is looking for text when it says textOutput. Similarly, if we were to label the slider $slider1 instead of $slider, it wouldn’t display anything because the render text from the server function is looking for $slider1, but the UI hasn’t put out anything labeled slider1. It’s important to remember that your labels need to match up for everything to work properly.</p>
</div>
<div id="section-shiny-1.5" class="section level3 hasAnchor" number="1.2.7">
<h3><span class="header-section-number">1.2.7</span> Shiny 1.5<a href="#section-shiny-1.5" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>We’ve reached a point where we can start utilizing Shiny. One of the key ways in which Shiny proves helpful is in creating interactive graphics. R, in its default form, doesn’t possess a lot of capacity for interactive graphics. With Shiny; however, the scope is broadened, and it provides an efficient way to distribute your results as they’re embedded in a web page that you can share broadly. Now, we’re going to develop an interactive plot that requires a bit more code in the server.R functions. Once you go through this example, you should be able to utilize Shiny in a more practical way that can assist you with your everyday data science needs. Now, let’s proceed to the main task at hand. We start with the initial code and run it to check out the app before we delve into its internal workings. Essentially, it generates two sets of random uniforms and plots them. You can input the number of uniforms in the text box that also has an increment and decrement operator in the buttons on the right-hand side.</p>
<p>The sliders enable you to alter the range of the uniforms generated on both the X and Y axes. There are also buttons available that enable you to Show/Hide the X Axis Label, Show/Hide the Y Axis Label, and Show/Hide the Title. So, we have two sliders, three checkboxes, and a numeric input, as shown. Observe how the code is executed interactively. Whenever there is a change in the values, the entire code is re-run. It’s important to get accustomed to the server calculations and reactive programming with Shiny, which, in my opinion, functions somewhat differently than standard R programming, which follows a highly linear pattern. Let’s dive into the code and see how everything was achieved. To begin with, let’s start by analyzing the UI.r function, which is the Shiny UI function. Firstly, we have the title pane, which is self-explanatory. Then we have the numeric input, which is labeled as “numeric”. It includes a title, starting value, minimum, and maximum values, so that users cannot input values beyond the specified range. Additionally, there is a step sizer that controls the increment and decrement of values when the buttons on the right-hand side are pressed. Moving on to the two sliders, they are similar to ones we have seen before. The first slider, sliderX, has two values, which are used to determine the two points of the slider. The same applies to the Y slider. Lastly, we have three check boxes: show_xlab, show_ylab, and show_title. As for the sliders, the first slider is labeled as “sliderX” and the second one as “sliderY”. The labels for the check boxes are straightforward and need no explanation. Let’s examine the code to see how we achieve our desired outcome in the UI and server functions. Starting with the UI.r function, we first have the title pane and a numeric input labeled as “numeric” with its corresponding title, starting value, minimum and maximum values, and step size. Next, we have two sliders, labeled as “sliderX” and “sliderY,” each with two values to establish their position. We also have a Y slider, which is essentially the same. Finally, there are three check boxes with labels that are pretty self-explanatory, namely, “show_xlab,” “show_ylab,” and “show_title.” Moving on to the server function, we will generate the plot output. In the function, we define “output<span class="math inline">\(plot1" so that when we display it on the user interface, it will show as plot1. Since it is a plot, we use the "renderPlot" statement, which uses reactive expressions (i.e., calculations that interact with the server). Reactive statements are enclosed in curly braces next to the renderPlot statement. After setting the random number seed, we assign the number of points to the input\)</span>numeric for convenience and to make the code more readable. The minimum and maximum values for X and Y are derived from the sliders, which are returned as a list, with the X slider’s values in a vector and the Y slider’s values in another vector. We then assign these values to variables for ease of reuse. Our data is a list of random uniform numbers generated using the”runif” function with the number of points and range between the minimum and maximum X values as arguments. Similarly, we generate the dataY vector using the number of points, minimum and maximum Y values. We use an ifelse statement to define the labels for the X axis, Y axis, and title. The check box input$show_xlab determines whether or not the X axis is labeled, and its corresponding label is either “X Axis” or nothing. The same goes for the Y axis and title. Finally, we create our plot, using the X and Y data generated earlier. The xlab, ylab, and title are all dependent on the values of their corresponding labels, and the x and y limits are set to predetermined values. We then return the plot. Running the code now that we understand its workings will allow us to view the output. Let’s review what’s happening when we change a value. The Shiny server takes the input value for the server, which includes slider X value one, slider X value two, slider Y value one, slider Y value two, and show X lab and show Y lab, which can be true or false. As we input these values, the Shiny server continuously checks for new values, and every time it receives a new set of values, it re-runs and re-displays everything, communicating back and forth between the server and the UI. If your calculations are more complex, we can add a done button to prevent immediate re-running. This example is simple and fast, but later on, we’ll show you how to add a done button for more complex simulations. You can create your own interactive graphic by following this example and using different kinds of inputs, not just sliders and numeric inputs. This is a useful tool that can be extended to many meaningful applications. Your homework is to create an interactive graphic using Shiny and experiment with different inputs.</p>
</div>
</div>
<div id="section-shiny-part-2" class="section level2 hasAnchor" number="1.3">
<h2><span class="header-section-number">1.3</span> Shiny Part 2<a href="#section-shiny-part-2" class="anchor-section" aria-label="Anchor link to header"></a></h2>
<div id="section-shiny-2.1" class="section level3 hasAnchor" number="1.3.1">
<h3><span class="header-section-number">1.3.1</span> Shiny 2.1<a href="#section-shiny-2.1" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>Welcome to the second lecture on Shiny. Today, we’ll delve into the fascinating world of reactive expressions. We’ll explore how they can be used to build more complex Shiny applications that perform sophisticated calculations, generate informative visualizations, and deliver insightful results. In the previous lecture, we learned the basics of creating interactive graphics using Shiny. However, to create more meaningful applications, we need to dive deeper and leverage the full power of Shiny. And that’s where reactivity comes in. A reactive expression is like a recipe that takes input from Shiny and returns a computed value. It is an essential concept in Shiny that enables us to build applications that respond dynamically to user input. Using reactive expressions may require some unconventional R coding techniques, but it’s worth it for the additional functionality it provides. To use reactive expressions, we need to wrap the expression in a reactive function. This function allows us to isolate expressions that respond to user input from the Shiny UI function. Let’s consider an example where we have two input boxes, one labeled “Box One” and the other “Box Two.” In our Shiny server function, suppose we want to add the values from Box One and Box Two and assign the result to a variable.</p>
<p>Our aim here is to develop a Shiny app that incorporates reactive expressions to enhance the complexity and meaningfulness of our server calculations, and consequently, generate more interesting graphs and results. So what exactly is a reactive expression? Essentially, it’s like a recipe that takes inputs from Shiny, manipulates them, and returns a value. However, due to the specific intricacies of Shiny, this requires some slightly unorthodox R coding. In particular, if you want isolated expressions that respond to input from your ui.r and Shiny.i function, they need to be wrapped as a reactive function. For instance, consider the scenario where we have two input boxes, labeled box one and box two, and we want to add the results from these boxes and assign the sum to a variable. To ensure that this calculation is redone every time the input values change, we need to include it in a reactive statement. The output of this calculation, calc_sum, is assigned as reactive, using a slightly unique notation that involves functional parentheses as well as curly braces containing the reactive statements. Once we add input<span class="math inline">\(box1 + input\)</span>box2 inside the reactive statement, the calc_sum() function will adapt as we input new values into box1 and box2.</p>
<p>Now, let’s move on to a relatively simple example that demonstrates how to create a reactive environment in Shiny. This example will provide you with a comprehensive tool set to start creating your own Shiny applications that can handle just about anything you need to do. For instance, if you have a machine learning algorithm, you can create an app that allows users to input parameters, generates predictions, and calculates prediction error on the fly.</p>
<p>Towards the end of the lecture, we’ll show you how to make the app reactive in such a way that the user has to press a button to execute the command. This conditionally reactive approach is useful for algorithms that take a lot of time to execute.</p>
<p>So, we’ll go through a code demonstration that heavily utilizes reactive expressions, and by the end of it, you’ll have a better understanding of how to incorporate these expressions into your own Shiny apps.</p>
</div>
<div id="section-shiny-2.2" class="section level3 hasAnchor" number="1.3.2">
<h3><span class="header-section-number">1.3.2</span> Shiny 2.2<a href="#section-shiny-2.2" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>You can copy the code from the R Markdown document for the next set of examples. In the following, we will first demonstrate the user interface and then the server calculations. Our objective is to showcase reactive expressions. We start with the <code>shiny</code> library statement, followed by the <code>shinyUI</code> function, which uses <code>fluidPage</code>. This page will have a title and a <code>sidebarLayout</code> containing a <code>sidebarPanel</code> and a <code>mainPanel</code>. The <code>sidebarPanel</code> will include a <code>sliderInput</code> labeled as <code>sliderMPG</code> to input the car’s miles per gallon, and a checkbox to indicate whether certain model values should be displayed in the <code>mainPanel</code>. The default value for the <code>sliderInput</code> is 20, with a range of 10 to 35 miles per gallon. Our goal is to create an output that displays the prediction for the horsepower. In the <code>mainPanel</code>, the inputs are <code>showModel1</code> and <code>showModel2</code>.</p>
<p>The main panel will display the plot labeled plot1, which is defined in our server function to be displayed in the main panel. We will also have two text outputs labeled pred1 and pred2 that will be displayed in the main panel. In the user interface, we have a slider input labeled sliderMPG, which allows users to input the MPG of their car, and a checkbox labeled showModel1 and showModel2 to determine which model values to display in the output. The slider input has a default value of 20 and a range from 10 miles per gallon to 35 miles per gallon.</p>
<p>The label of the slider input to obtain the MPG is sliderMPG. Additionally, there are two checkboxes to determine whether to display the specific model output. These inputs will be sent to the server. In return, we expect the server functions to provide us with a plot labeled plot1, text labeled pred1, and text labeled pred2. Moving on to the server, the shinyServer function includes a function with input and output parameters.</p>
<p>The first step in the process is to load the default “mtcars” dataset. This dataset is commonly used in R as an example dataset and is used to create a spline term. If the mpg of the car is greater than 20, the spline term returns the mpg value. Otherwise, it returns 0. This is useful when feeding a model that has a “broken stick” feed - a line with a breakpoint at 20, followed by another line that meets continuously at the breakpoint. The code fits two models, one with just mpg and another with mpg at the breakpoint in the middle. These two models are used to form the prediction. Next, we need to calculate predictions based on input values from the user interface, so it needs to be in a reactive statement. The reactive statement uses a parenthesis and a curly brace notation. We relabel the input as a regular R variable, mpgInput, to avoid typing “input<span class="math inline">\(" repeatedly. We use the predict statement with model1 to predict the new value from the slider. Similarly, we create model2 with an extra spline term, mpgsp, that returns the input value if it is greater than 20, otherwise returning 0. The two reactive assigned variables are model1 pred and model2 pred. The first output that we create is output\)</span>plot1, which our user interface expects to be a plot labeled plot1. We use the renderPlot notation for a plot, using the mpgInput value obtained from the slider.</p>
<p>Next, a plot will be created. You should be familiar with R plotting, so you can review how it’s working. However, pay attention to the conditional values for whether or not the lines for model1 and model2 will be included, which are controlled by showModel1 and showModel2. The plot also has a nice legend. The most crucial part to note is that we will add some points at the miles per gallon value that you input, as shown in this code. Remember, we renamed it from input$sliderMPG earlier. Additionally, we want to include the result of our reactive expression, model1pred. However, remember that you need to access that number as a function because it was from a reactive expression elsewhere in the code.</p>
<p>If the parentheses are not included, the function will be returned, which cannot be plotted by points because it is a function. Therefore, to obtain the value, the parentheses must be included. The second point is that the output of this function is a plot that will be returned to the user interface. It will include the two fitted lines if the check boxes are checked, the data used to fit the lines, and specific points at the prediction values. Additionally, the code is looking for pred1 and pred2, which will be text. These will be rendered using the function renderText({) with the reactive expressions model1pred() and model2pred(), respectively. In both cases, the parentheses must be included for the reactive expression. Finally, the code can be run to see how it works.</p>
<p>And there it is, the plot is now generated. As we adjust the slider, you will notice the two prediction points appearing. The red line represents the model without the spline term, while the blue line has the spline term at 20, creating a broken stick-like pattern. We have successfully created our two models and added their respective predictions below the plot. Additionally, we can toggle the visibility of either of the two lines using the checkboxes. Once you have gone through this example, you should feel confident in working with Shiny and utilizing it for more complex tasks. In the next step, we will cover conditional expressions that allow us to operate on the code conditionally based on certain triggers, such as clicking a “done” button. But for now, you should be able to make good use of Shiny for your needs.</p>
<p>We encourage you to give this example a try, and I’m confident that after the next lecture, you’ll have a strong understanding of working with shiny apps and be able to create useful applications for yourself and others to use on the internet.</p>
</div>
<div id="section-shiny-2.3" class="section level3 hasAnchor" number="1.3.3">
<h3><span class="header-section-number">1.3.3</span> Shiny 2.3<a href="#section-shiny-2.3" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>If the server functions in your Shiny app involve small, quick calculations, then it’s not a problem. However, if your app requires computationally intensive tasks like a large Monte Carlo simulation or Bootstrap, you might want to have the values settled before clicking a submit button. To do this, it only requires one extra line of code. Here, we have the same code as the previous example, set up in the same way. When we click Run App, the app appears, and as we move the slider, it runs the code again. Now, we want to add a submit button, so we’ll add this command from the slides: submitButton. The button’s value is Submit, and it provides a labeled input value called Submit that you can use in your server functions, for example, if the submitButton is true.</p>
<p>Forgetting to include commas after functional arguments is a common mistake in Shiny app development. It’s important to remember that these commas are necessary for the app to run properly. RStudio will usually indicate an error with a little “x” symbol. In the current example, we have added a submit button using the <code>submitButton</code> command, which takes a labeled input value called “Submit”. This button allows us to avoid rerunning the code every time we change the slider value. Instead, we can click the submit button to run the code after we have settled on a value. This can be useful for computationally intensive tasks like Monte Carlo simulations or Bootstrap. Remember that the submit button can be used as a label button in your server functions, so you can use it to control calculations or other aspects of your app. Adding a submit button is a quick and handy way to improve the functionality of your Shiny tools.</p>
</div>
<div id="section-shiny-2.4" class="section level3 hasAnchor" number="1.3.4">
<h3><span class="header-section-number">1.3.4</span> Shiny 2.4<a href="#section-shiny-2.4" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>Let’s review a few ways to customize the Shiny user interface. By default, you have a sidebar panel theme, but we’ll explore an alternative option using tabs. Once you understand these two examples, you’ll be able to adjust the interface using various settings. Additionally, we’ll briefly touch on using a custom HTML function for Shiny. Let’s start with the advanced UI example and wrap up with some final thoughts.</p>
<p>Alright, let’s go over a few ways we can modify the UI for Shiny. The code I’ll be working with was copied from an R Markdown document. You might already be familiar with the first few lines of code, as we’ll still be using a sidebar layout. However, we can also create tabs within a single panel, or have a panel with tabs but no sidebar. And if you’re feeling adventurous, we can even customize the UI with custom HTML. For our sidebar panel, we’ll have three text input boxes labeled “Box 1”, “Box 2”, and “Box 3”. The prompts for the user will be “Enter Tab 1 text”, “Enter Tab 2 text”, and “Enter Tab 3 text”, respectively, with starting values of “Tab 1”, “Tab 2”, and “Tab 3”. Moving on to the main panel, we’ll be using a tabset panel, which is a nested user interface structure in Shiny. We’ll use the <code>mainPanel</code> function with a <code>tabsetPanel</code> inside, specifying <code>type = "tabs"</code>. Within that, we’ll have three <code>tabPanel</code> functions, each with a label indicating “Tab 1”, “Tab 2”, or “Tab 3”, and a <code>textOutput</code> that will look for the corresponding output label from the <code>server.R</code> file. The <code>server.R</code> function will be a simple one, using <code>shinyServer</code> with <code>function(input, output)</code> arguments. We’ll use <code>renderText</code> to display the text entered in each of the three input boxes. Let’s run the app now!</p>
<p>Let’s take a look at our three text boxes for entering text and the three tabs. If we enter new text and go to Tab 2, it will display the new text. This is a good example of how we can customize the UI, and as you work with it more, you’ll become more familiar with the syntax. Be sure to avoid errors in your R code while making UI changes, as RStudio will show you X’s in the code if you forget to close parentheses or add commas. Proper indentation and using a nice environment like RStudio will make this task easier. Your homework is to create a tabbed user interface for Shiny. Finally, we’ll go over some last comments about Shiny.</p>
</div>
<div id="section-shiny-2.5" class="section level3 hasAnchor" number="1.3.5">
<h3><span class="header-section-number">1.3.5</span> Shiny 2.5<a href="#section-shiny-2.5" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>We have repeatedly promised to show you how to use your own HTML, and we have a quick way to do that. We took our last example, saved the HTML that it was running, and put it in a file called index.html in a subdirectory named <www>. Along with the server.R function, this is where the index.html file is located. The index.html file contains a lot of unnecessary preamble from the bootstrap style it gets from that package. So, you can remove most of that and have the style be whatever you want. If you’re not familiar with web development, you can start with a simple shiny page, output the HTML, and use that as a starting point to build from. But if you’re comfortable with web development, you can start with a blank HTML file and work from there.</p>
<p>The inputs function the same way as regular HTML inputs. In this example, we have three boxes labeled Box 1, Box 2, and Box 3. So, the input ID for Box 1 is “box1”, for Box 2 it’s “box2”, and for Box 3 it’s “box3”. The div statements are used because the Bootstrap style used by Shiny uses these blocky structures to create the default style.</p>
<p>Alright, so the input fields work just like regular HTML input. For instance, the input field with ID “box1” corresponds to the label we provided in the ui.R file. Similarly, we have input fields with IDs “box2” and “box3”. These div statements are necessary because Bootstrap, which is used by Shiny, uses this particular CSS style to create blocky structures for the default style.</p>
<p>Moving on to the output, you can see that it references “out2” and has the class “shiny-text-output”. If you’re familiar with web development, you may have recognized the output class “shiny-text-output” already. Otherwise, building a Shiny prototype app and grabbing its HTML would give you enough information to work with.</p>
<p>If you build a prototype and save the HTML, you can use it directly in your Shiny app by placing it in a file named index.html in a subdirectory named <www>. This method will be very useful for those who are experienced with web development and find using R as an intermediary to be a hassle. By using a straight HTML file, you can avoid having to insert individual HTML elements in R.</p>
</div>
<div id="section-shiny-2.6" class="section level3 hasAnchor" number="1.3.6">
<h3><span class="header-section-number">1.3.6</span> Shiny 2.6<a href="#section-shiny-2.6" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>In this example, we’ll demonstrate how to create an interactive graphic using the brush argument in the UI and brushedPoints argument in the server. The purpose is to highlight points in a scatter plot and show the fitted line just for those points. Interactive graphics are a key functionality of Shiny and one of its primary uses for analysis. Let’s take a look at the code. We’ll go through the various lines, but we encourage you to try it out yourself by copying and running the code. You’ll likely gain a better understanding by doing so. We start with the standard layout, including a sidebar. The sidebar displays the slope and intercept using textOutput (intOut) and textOutput (slopeOut), respectively. We need to make sure to include both labels in the server function, otherwise they won’t display correctly. Additionally, we create a plot in the server labeled plot1 and make sure to include plotOutput for it in the UI. The UI also includes an id of brush1 and the brushOpts for the brush options. We’ll need to use the label brush1 on the server side. Next, let’s examine the server function. The input and output lists are passed into the Shiny server. A reactive model is created that responds to changes in the data input from the user interface. The notation for reactive functions is inside curly braces and parentheses. The variable brushed_data is shorthand for retrieving the data from brush1 in the input. The brush points come from the trees dataset with Girth as the x-variable and Volume as the y-variable. If there are fewer than two points, it returns null, otherwise, it fits a linear model with Volume as the y-variable, Girth as the x-variable, and brushed_data as the data. The resulting linear model is output without parentheses because it’s inside the reactive statement. In the Shiny server, we check if the model is fit or if the label output<span class="math inline">\(slopeOut is present. We use the renderText function to let Shiny know that text will be displayed in the user interface. Inside the curly braces, we check if the slope is null, and if so, it will display "No Model Found". Otherwise, it will display the slope term. Alright, so let's dive into the code. The Shiny server takes in input and output lists. The model created in the server is reactive to the data entered by the user in the user interface. We use the notation of curly braces inside the parentheses for the reactive function. The brushed_data is shorthand for grabbing the data from brush1 input. We create a data frame with Girth and Volume variables from the trees dataset, and if there are fewer than two points, the function returns null. Otherwise, a linear model is fit where Volume is the y variable, Girth is the x variable, and the data is brushed_data. We don't need to put parentheses here because this is inside the reactive statement. If the model is fit, or output\)</span>slopeOut, which is a text label, then we use renderText to display it in the user interface. If it’s null, then it says “No Model Found”. Otherwise, it grabs the slope term. The same thing is done for the intercept term. We display plot1 using renderPlot, which has the reactive notation of having the curly braces inside the function argument. The plot shows Girth on the x-axis and Volume on the y-axis, with nice x and y labels and a title of “Tree Measurements”. If the model is not null, it adds a line that is only for the specific data points through the model that was fit just on the points described from the brush. Now, let’s run it and see how it looks.</p>
<p>We have run the application and observed that when no model is fit, the text output for slope and intercept correctly shows “No Model Found”. If a cluster of points is highlighted, the slope and intercept are calculated and displayed as a line. If no points are selected, the text output again shows “No Model Found”. A line is also displayed when all the data points are selected. This example shows the use of Shiny for creating interactive graphs. We encourage you to try to recreate this example and also create your own interactive graph using one of R’s built-in datasets. Shiny has many uses, including input and output of data frames, as well as embedding RGL and RS 3D graphics library in a Shiny webpage using WebGL. Although these advanced features may be more specialized, you now have enough knowledge to get started and incorporate Shiny into your toolkit.</p>
</div>
</div>
<div id="section-shiny-part-3" class="section level2 hasAnchor" number="1.4">
<h2><span class="header-section-number">1.4</span> Shiny Part 3<a href="#section-shiny-part-3" class="anchor-section" aria-label="Anchor link to header"></a></h2>
<div id="section-shinyuieditor" class="section level3 hasAnchor" number="1.4.1">
<h3><span class="header-section-number">1.4.1</span> ShinyUiEditor<a href="#section-shinyuieditor" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>The Shiny Ui Editor is a user-friendly, visual tool designed to simplify the process of creating the user interface (UI) for Shiny applications. Its primary objective is to enable users to build the UI of their Shiny apps without the need to write code. This editor is particularly useful for individuals who may not be familiar with Shiny’s UI functions that require HTML-style coding or who prefer a hassle-free approach for achieving proper layout without manually adjusting sizes. By utilizing the Shiny Ui Editor, users can effortlessly generate clean and easily understandable code for their Shiny app’s UI, streamlining the development process. <strong>Note:</strong> According to the developers’s <a href="https://rstudio.github.io/shinyuieditor/">website</a> ShinyUiEditor currently is in the Alpha phase of development, which means it may be unstable, or some users may experience bugs while installing the package. However, we think it is still a useful tool for creating Shiny apps, and we encourage you to try it out. These problems will be resolved as the package is further developed. For more information on the Shiny Ui Editor, please visit the following link: <a href="https://rstudio.github.io/shinyuieditor/" class="uri">https://rstudio.github.io/shinyuieditor/</a>. This link will also provide you with instructions on how to install the Shiny Ui Editor package.</p>
<div id="section-your-first-app-in-shinyuieditor" class="section level4 hasAnchor" number="1.4.1.1">
<h4><span class="header-section-number">1.4.1.1</span> Your first app in ShinyUiEditor<a href="#section-your-first-app-in-shinyuieditor" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>In this example, we’ll demonstrate how to create a simple Shiny app using the Shiny Ui Editor. We’ll start by creating a new Shiny app and then proceed to build the UI using the Shiny Ui Editor. Once we’re done, we’ll run the app to see how it looks. Let’s get started! In the Rstudio call ‘library(shinyuieditor)’ and run the launch_editor(app_loc = “newApp”). You must provide a string as your app name to variable app_loc. This will create a folder in the directory with the string name you provided and open the Shiny Ui Editor in a new window in your browser and asks for you to choose some options to create a new Shiny app, steps are shown in the image below(xxx). Any update that you make in the Ui Editor will automatically update the app code itself. To follow the updates in UiEditor you can simply check the app in App Preview tab located on the bottom right of the Ui Editor window. (xxx) If you don’t like the layout you can delete the elements and redesign the layout to your liking. You can customize the size of each grid with your mouse or providing values in pixel or the relative units by hovering mouse to the left side of the desired grid. To delete an element click on the element and select the delete button on the properties window on the right side of the windows. In the R code file you can import or generate your own data and use that to make plots instead of the default data. The beauty of the Ui Editor is that you have all the common elements that you can add to your app directly from the Ui Editor window. This will make your life easier and you can focus on the data analysis part of your app.</p>
</div>
</div>
<div id="section-layouts" class="section level3 hasAnchor" number="1.4.2">
<h3><span class="header-section-number">1.4.2</span> Layouts<a href="#section-layouts" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>A web layout refers to the arrangement and structure of visual elements on a web page. It defines how different components such as text, images, menus, forms, and other interactive elements are positioned and organized within the overall design of a website. The layout plays a crucial role in determining the visual hierarchy, flow, and user experience of a web page.</p>
<p>Web layouts can vary widely in their structure and design, depending on the purpose of the website and the desired aesthetic. Common types of web layouts include:</p>
<ol style="list-style-type: decimal">
<li><p>Fixed Layout: In this type of layout, the content is set to a specific width and remains fixed regardless of the screen size or resolution. It often uses a centered design with a static width.</p></li>
<li><p>Fluid Layout: Fluid layouts adapt to the available space and adjust their width proportionally to the screen size or browser window. This ensures that the content expands or contracts based on the user’s viewing device or browser window size.</p></li>
<li><p>Responsive Layout: Responsive layouts are designed to provide an optimal viewing experience across various devices and screen sizes. They use CSS media queries to adapt the layout, content, and design elements dynamically based on the user’s device, whether it’s a desktop, tablet, or mobile phone.</p></li>
<li><p>Grid Layout: Grid layouts utilize a system of horizontal and vertical lines to create a structured framework for organizing content. They often involve dividing the page into multiple columns and rows, providing a consistent and balanced arrangement for different elements.</p></li>
<li><p>Single-Page Layout: Single-page layouts present all the content on a single scrolling page, eliminating the need for navigating to different pages. This layout is commonly used for portfolios, landing pages, or websites with a concise amount of content.</p></li>
</ol>
<p>Web layouts are essential for achieving an aesthetically pleasing design, ensuring effective information presentation, and enhancing the overall user experience of a website.</p>
<p>The Shiny base package provides some common functions such as fluidPage(), splitLayout(), and fixedPage() to generate layouts. These build-in functions are useful for creating simple layouts, but they can be limiting when it comes to more complex designs. Fortunately, there are several packages available that provide more advanced layout options for Shiny apps. Here we introduce some of the most popular packages for creating layouts in Shiny.</p>
<div id="section-bootstrap-layouts" class="section level4 hasAnchor" number="1.4.2.1">
<h4><span class="header-section-number">1.4.2.1</span> Bootstrap layouts<a href="#section-bootstrap-layouts" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>Bootstrap has been around for more than 10 years now. It is a versatile and powerful framework for building responsive, mobile-first websites and web applications. Bootstrap is one of the most popular front-end frameworks for web development, and it is widely used by developers around the world. It provides a 12-column grid system, buttons, forms, tables, navigation bars, and more. <code>bslib</code> is an R package that provides an alternative method for customizing the appearance of Bootstrap-themed user interfaces. With <code>bslib</code>, you can define your theme’s color palette, typography, spacing, and other visual attributes using Sass (Syntactically Awesome Style Sheets), a CSS preprocessor. This allows for more advanced customization and flexibility compared to the default theming options provided by Bootstrap.</p>
<p>Bootstrap 3 relies on the grid layout system, which allows to efficiently organize the content in rows and columns. For instance the fluidRow() and column() Shiny functions leverage the Bootstrap grid to control how elements are displayed on a page.</p>
<div id="section-bslib" class="section level5 hasAnchor" number="1.4.2.1.1">
<h5><span class="header-section-number">1.4.2.1.1</span> bslib<a href="#section-bslib" class="anchor-section" aria-label="Anchor link to header"></a></h5>
<p>The bslib R package offers a contemporary UI toolkit for Shiny and R Markdown, leveraging the Bootstrap framework. This package enhances the visual design and user interface capabilities of Shiny and R Markdown by incorporating modern styling and layout options. Working with bslib is straightforward and intuitive, and it provides a wide range of customization options for creating beautiful and responsive web applications.</p>
</div>
<div id="section-gridlayout" class="section level5 hasAnchor" number="1.4.2.1.2">
<h5><span class="header-section-number">1.4.2.1.2</span> gridlayout<a href="#section-gridlayout" class="anchor-section" aria-label="Anchor link to header"></a></h5>
<p>The gridLayout function in Shiny is a versatile layout option that allows you to create grid-based arrangements for your user interface components. With gridLayout, you can define the number of rows and columns in the grid and specify the placement of UI elements within specific cells. This layout could be extremely handy while using the Shiny Ui Editor.</p>
</div>
<div id="section-dashboardpage" class="section level5 hasAnchor" number="1.4.2.1.3">
<h5><span class="header-section-number">1.4.2.1.3</span> dashboardPage<a href="#section-dashboardpage" class="anchor-section" aria-label="Anchor link to header"></a></h5>
<p>The <code>dashboardPage</code> layout in Shiny provides a structured and organized framework for creating interactive dashboards. It consists of different sections, such as the header, sidebar, and body, that can be customized to build a visually appealing and functional dashboard. Here’s an overview of the different components of the <code>dashboardPage</code> layout:</p>
<ol style="list-style-type: decimal">
<li><p><code>dashboardHeader</code>: This component represents the header section of the dashboard and typically includes the title or logo of the application. You can customize the appearance of the header by adding titles, logos, navigation menus, or other elements.</p></li>
<li><p><code>dashboardSidebar</code>: The sidebar is a vertical panel located on the left side of the dashboard. It provides space for navigation menus, input controls, or additional information. You can define the sidebar content using functions like <code>sidebarMenu</code>, <code>menuItem</code>, or <code>renderMenu</code>.</p></li>
<li><p><code>dashboardBody</code>: The body section of the dashboard occupies the remaining space after the header and sidebar. It is where you place the main content of your dashboard, such as graphs, tables, text, or other visualizations. You can structure the body using different layouts like <code>fluidRow</code>, <code>column</code>, or <code>tabItems</code>.</p></li>
<li><p><code>fluidRow</code> and <code>column</code>: These layout functions allow you to create rows and columns within the dashboard body. They provide a responsive grid system that helps in arranging and positioning the UI elements. You can define the number of columns and their relative widths using the <code>column</code> function within a <code>fluidRow</code>.</p></li>
<li><p><code>tabItems</code> and <code>tabItem</code>: If you want to organize your dashboard content into multiple tabs, you can use the <code>tabItems</code> and <code>tabItem</code> functions. Each <code>tabItem</code> represents a single tab within the dashboard, and you can place specific content within each tab, such as graphs, tables, or other UI elements.</p></li>
</ol>
<p>By combining these components and customizing their content, you can create a personalized dashboard layout in Shiny. The <code>dashboardPage</code> layout provides a convenient structure for organizing and presenting data, visualizations, and interactive elements within a single web application.</p>
</div>
<div id="section-imola" class="section level5 hasAnchor" number="1.4.2.1.4">
<h5><span class="header-section-number">1.4.2.1.4</span> imola<a href="#section-imola" class="anchor-section" aria-label="Anchor link to header"></a></h5>
<p>The imola is one of the recently developed layouts for Shiny, which is based on the CSS Grid Layout Module. It provides a simple and intuitive way to create responsive layouts for Shiny apps. The imola package offers a wide range of customization options for creating beautiful and responsive web applications. It also provides a set of predefined themes that can be used to quickly change the appearance of your app. The imola package is still in the early stages of development, but it shows a lot of promise for the future of Shiny layouts. There are multiple <a href="https://sparktuga.shinyapps.io/imolatemplates/">predefined layouts</a> with imola. You can checkout the website and use the example code to create your app.</p>
<p>There some other packages that you can use as themes for your Shiny app to reach a unique look in your apps. Here we introduce some of them for the interested readers. <a href="https://github.com/RinteRface/shinydashboardPlus" class="uri">https://github.com/RinteRface/shinydashboardPlus</a> <a href="https://github.com/RinteRface/shinyMobile/" class="uri">https://github.com/RinteRface/shinyMobile/</a> <a href="https://pkgs.rstudio.com/flexdashboard/" class="uri">https://pkgs.rstudio.com/flexdashboard/</a> <a href="https://github.com/RinteRface/argonDash" class="uri">https://github.com/RinteRface/argonDash</a> <a href="https://github.com/ericrayanderson/shinymaterial" class="uri">https://github.com/ericrayanderson/shinymaterial</a> <a href="https://github.com/Appsilon/shiny.semantic" class="uri">https://github.com/Appsilon/shiny.semantic</a> <a href="https://rstudio.github.io/shinydashboard/" class="uri">https://rstudio.github.io/shinydashboard/</a> <a href="https://github.com/nik01010/dashboardthemes" class="uri">https://github.com/nik01010/dashboardthemes</a></p>
</div>
</div>
</div>
</div>
<div id="section-shiny-gadgets" class="section level2 hasAnchor" number="1.5">
<h2><span class="header-section-number">1.5</span> Shiny Gadgets<a href="#section-shiny-gadgets" class="anchor-section" aria-label="Anchor link to header"></a></h2>
<div id="section-shiny-gadgets-1.1" class="section level3 hasAnchor" number="1.5.1">
<h3><span class="header-section-number">1.5.1</span> Shiny Gadgets 1.1<a href="#section-shiny-gadgets-1.1" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>In this lecture, we’ll be discussing Shiny Gadgets and We want to acknowledge Shaun Cross from the Data Science Lab for creating these slides. Previously, we covered a package called Manipulate, which was created by our studio for easy and simple interactive data analysis. However, it seems that development on Manipulate has stopped and we have a hunch why. Shiny provides a superior way of achieving the same goal, and with Shiny Gadgets, you can do everything that Manipulate did, but within the RStudio program. So, let’s delve into this topic.</p>
<p>The focus of this lecture is on Shiny Gadgets, which offer an easier and faster way to use Shiny’s interactivity in data analysis. Unlike Shiny, which is suitable for creating forward-facing apps for a wider audience, Shiny Gadgets are primarily designed for use by us or a small group of people working on data analysis. To display the app on a small screen within our RStudio program, we’ll use the mini UI package, which helps us create interfaces optimized for smaller screens. The core of a Shiny Gadget is a function that launches a small, single-page Shiny application in the RStudio viewer pane. Furthermore, since the Shiny Gadgets will be displayed in the RStudio viewer pane, the miniUI package is useful for creating interfaces that fit well on smaller screens. Next, we will create a basic Shiny Gadget and then simplify it as much as possible. Now, we will switch over to a code demonstration.</p>
<p>Let’s look into an example obtained from the code on the slides. To begin, we need to ensure that both Shiny and miniUI are loaded, and we can do this by installing the packages. If you have an older version of R, you may need to update it. The gadget is a function with a user interface and a server function, just like a Shiny app. The UI here uses miniPage, which is a layout from the miniUI library. We create a title bar element using the gadgetTitleBar command and call it “My First Gadget.” The server function takes input, output, and session arguments. For now, it checks the input for the “done” variable and uses the observeEvent function to stop the app when it is true. It is important to note that the syntax for Shiny Gadgets is a bit different from regular R programming, but the rules of reactivity still apply. Finally, we use the runGadget function to run the gadget with the UI and server functions. Once we run the function, we see “My First Gadget” displayed in the viewer pane, and clicking “done” takes us back to the RPrompt. This is a good first step to becoming familiar with Shiny Gadgets, and more complex concepts will come naturally as we progress. To move on to the next video, please copy and run this code from the selection notes.</p>
<p>The viewer has a few different arguments to display the gadget.</p>
<ol style="list-style-type: decimal">
<li>paneViewer: This is the default viewer, which displays the gadget in the viewer pane. runGadget(ui, server, viewer = paneViewer(minHeight = 500))</li>
<li>dialogViewer: This is the default viewer, which displays the gadget in a dialog box. runGadget(ui, server, viewer = dialogViewer(“ggbrush”))</li>
<li>browserViewer: This is the default viewer, which displays the gadget in the RStudio browser. runGadget(ui, server, viewer = browserViewer())</li>
</ol>
</div>
<div id="section-shiny-gadgets-1.2" class="section level3 hasAnchor" number="1.5.2">
<h3><span class="header-section-number">1.5.2</span> Shiny Gadgets 1.2<a href="#section-shiny-gadgets-1.2" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>The previous example we looked at was rather trivial, as it merely had a button to click and exit. It even had a built-in cancel button to stop the gadget and return to the R prompt. Now, we’ll demonstrate how to add arguments to your Shiny Gadget. We’ll keep it simple and show basic manipulations so that you can understand the coding process and apply it to your own application. Let’s examine the code in detail. The code is divided into two parts due to space limitations. The first part contains the UI, which is again a mini page. The second part contains the server. Remember, we need to load two libraries. Our gadget’s title will be “Multiply Two Numbers.” The content panel will be a mini content panel, which will be the main body of the pane. The user interface will have a selector input, which will be a dropdown box with two variables labeled “num1” and “num2.” We will use these names to reference them later. The labels and choices come from the two arguments in the function. Moving on to the server part, we will have input, output, and session. We will use the input$done variable in the observe event to let Shiny know when it’s done to quit. We must use curly braces in the correct place to avoid the most common mistake when coding Shiny applications. We will name num1 and num2 as the input values to make them easier to work with. We will then multiply them together, and the stopApp function will tell Shiny to stop and display the result of num1 multiplied by num2. Remember to include the runGadget function, which specifies the UI and server. Although you could technically name UI and server something else, it is not conventionally done. Let’s now look at the code demonstration and see how it works. Let’s review the function that we copied from the R markdown document and make sure the necessary libraries are loaded. Now let’s execute the function. Although we have already gone over the components, let’s see what happens when we run it. As expected, nothing happens because we have just defined the function. Let’s give the numbers 1 to 10 as choices for both selector inputs. Suppose we want to check our multiplication tables, so let’s choose 4 and 7 and hopefully get the result of 28. Once we click “Done”, we will return to the R pane where we should see the result of 28. This is just the first step towards creating something useful. We have been able to select from choices and perform numerical manipulations. we hope you can see where Shiny gadgets can be useful for you. In the next step, we will create an interactive graphic.</p>
</div>
<div id="section-shiny-gadgets-1.3" class="section level3 hasAnchor" number="1.5.3">
<h3><span class="header-section-number">1.5.3</span> Shiny Gadgets 1.3<a href="#section-shiny-gadgets-1.3" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>One of the most valuable features of Shiny gadgets is the ability to create interactive plots. As many of you are already familiar with Shiny syntax from our previous modules, we won’t spend too much time revisiting that in the context of Shiny gadgets. Instead, we’ll present one example, and with your understanding of Shiny and a little extra syntax for Shiny gadgets, you’ll be able to construct and customize your own gadgets to meet your needs. In this example, our goal is to create an interactive plot of the trees dataset, specifically plotting the girth by volume. We want to have a crosshair that will allow us to select a rectangle on the plot, and then have our function output a data frame of the trees within that rectangle. We will now attempt to achieve this. As always, we need to load the Shiny and mini libraries. Our Shiny gadget is a function that requires a user interface (UI). For the UI, we will use the miniPage function from the mini package. We will have a gadgetTitleBar with the message “Select points by dragging your mouse” and a miniContentPanel containing a plot with the name “plot”. We want the height to be 100% and we will name the crosshairs brush. Moving on to the server function, we will use the names “plot” and “brush” that we defined earlier. The output named “plot” will be created using the renderPlot function. We will plot the “girth” versus “volume” data from the “trees” dataset and label the plot with the title “trees” and axis labels “girth” and “volume”. Next, we use observeEvent to collect the brush points and stop the app after a rectangle is selected from the “trees” dataset. The input will be “$brush”, which refers to the named input we defined earlier. The variables “xvar” and “yvar” need to be named correctly and matched to the corresponding names in the “trees” dataset. Finally, we call the runGadget function. By running this code, we can create a useful tool for selecting data points from a plot. We need to load the Shiny and mini UI libraries, define our Shiny gadget function named “pick trees”, and use the UI and server functions that we have defined. Now we can execute the code. The function doesn’t require any arguments. It starts the server and generates the plot. The plot allows me to select a collection of points by dragging the crosshair around. After I’ve made my selection, We can move the box around if we need to. Once we am satisfied with my selection, we click the “Done” button, and it returns the data points from my selection. To save the selected data points, we can assign them to a variable like treesIPicked, and then we can retrieve them later by calling the variable. This feature can be useful if you need to select specific data points, for example, to identify outliers in a data analysis. Note that the original data frame’s row numbers are retained, enabling you to refer back to the data frame itself. To clarify about naming, suppose we named the plot “plot1” instead of “plot”. If we rerun the code, the plot will not show up because we named it “plot” and not “plot1”. Similarly, if we name the brush “brush1” instead of “brush”, it will not output anything because it is looking for “input brush”, not “input brush1”, and “input brush” has no input. We hope these tools provide you with a good foundation to build your own Shiny gadgets. Learning how to build them is definitely worth it, especially for creating interactive graphics which can be extremely helpful. R has not historically excelled in this area, so having the add-on provided by RStudio is a valuable resource to have in your workflow. For this reason alone, it’s worth taking the time to learn how to build and incorporate shiny gadgets into your work.</p>
</div>
<div id="section-shiny-gadgets-1.4" class="section level3 hasAnchor" number="1.5.4">
<h3><span class="header-section-number">1.5.4</span> Shiny Gadgets 1.4<a href="#section-shiny-gadgets-1.4" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>In this section we introduce some functions which can provide you with more options to design a sophisticated gadget.</p>
<div id="section-minitabstrippanel" class="section level4 hasAnchor" number="1.5.4.1">
<h4><span class="header-section-number">1.5.4.1</span> miniTabstripPanel<a href="#section-minitabstrippanel" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>If your gadget is generating multiple outputs such as graphs, tables, maps, etc. you can use the miniTabstripPanel function to create a tabbed panel. This function allows you to create a tabbed panel with multiple tabs, each containing a different output. The miniTabstripPanel function takes a list of tab names and a list of tab contents as arguments. The tab names are displayed as the labels for each tab, and the tab contents are the UI elements that will be displayed within each tab. The miniTabstripPanel function is useful for organizing and presenting multiple outputs within a single gadget.</p>
</div>
<div id="section-fillrowfillcol" class="section level4 hasAnchor" number="1.5.4.2">
<h4><span class="header-section-number">1.5.4.2</span> fillRow/fillCol<a href="#section-fillrowfillcol" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>These functions are beneficial for partitioning an area into rows and columns that dynamically expand and contract in proportion to fill the available space. Unlike fluidRow and col functions, which do not adjust, fillRow/fillCol offer growth and shrinkage capabilities.You can get creative with these functions and use them to create a variety of layouts for your gadget. For example</p>
<div class="sourceCode" id="section-cb6"><pre class="sourceCode r"><code class="sourceCode r"><span id="section-cb6-1"><a href="#section-cb6-1" tabindex="-1"></a><span class="fu">fillRow</span>(</span>
<span id="section-cb6-2"><a href="#section-cb6-2" tabindex="-1"></a> <span class="fu">fillCol</span>(a, b),</span>
<span id="section-cb6-3"><a href="#section-cb6-3" tabindex="-1"></a> <span class="fu">fillCol</span>(c, d, e)</span>
<span id="section-cb6-4"><a href="#section-cb6-4" tabindex="-1"></a>)</span></code></pre></div>
<p>will generate two columns the left one with two rows and the right one with three rows.</p>
</div>
</div>
</div>
<div id="section-quiz-1" class="section level2 hasAnchor" number="1.6">
<h2><span class="header-section-number">1.6</span> Quiz 1<a href="#section-quiz-1" class="anchor-section" aria-label="Anchor link to header"></a></h2>
<p>Have to add the quiz here!</p>
</div>
</div>
<hr>
<center>
<div class="footer">
All illustrations <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY. </a>
<br>
All other materials <a href= "https://creativecommons.org/licenses/by/4.0/"> CC-BY </a> unless noted otherwise.
</div>
</center>
</section>
</div>
</div>
</div>
</div>
</div>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": false,
"facebook": true,
"twitter": true,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"whatsapp": false,
"all": ["facebook", "twitter", "linkedin", "weibo", "instapaper"]
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": null,
"text": null
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": null,
"search": false,
"toc": {
"collapse": "section"
}
});
});
</script>
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
var script = document.createElement("script");
script.type = "text/javascript";
var src = "true";
if (src === "" || src === "true") src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/latest.js?config=TeX-MML-AM_CHTML";
if (location.protocol !== "file:")
if (/^https?:/.test(src))
src = src.replace(/^https?:/, '');
script.src = src;
document.getElementsByTagName("head")[0].appendChild(script);
})();
</script>
</body>
</html>