forked from fxjollois/fxjollois.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbd-prog-avancees-prog-tp1.html
437 lines (385 loc) · 15.9 KB
/
bd-prog-avancees-prog-tp1.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Programmation avancées - TP 1 - Introduction à Shiny</title>
<script src="libs/jquery-1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="libs/bootstrap-3.3.5/css/journal.min.css" rel="stylesheet" />
<script src="libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<style>
.contenu {
margin-bottom: 50px;
}
.contact-liens {
text-align: center;
}
.contact-icones {
height: 30px;
}
/* Espacement pour barre du haut et pied de page */
#header, .section.level1 {
margin-top: 60px;
margin-bottom: 60px;
}
/* Espacement pour table des matières */
#TOC {
margin-top: 100px;
}
.footer {
position: fixed;
width: 100%;
text-align: center;
bottom: 0;
left: 0;
background-color: #E6E6E6;
}
</style>
<style type="text/css">code{white-space: pre;}</style>
<link rel="stylesheet"
href="libs/highlight/default.css"
type="text/css" />
<script src="libs/highlight/highlight.js"></script>
<style type="text/css">
pre:not([class]) {
background-color: white;
}
</style>
<script type="text/javascript">
if (window.hljs && document.readyState && document.readyState === "complete") {
window.setTimeout(function() {
hljs.initHighlighting();
}, 0);
}
</script>
<link rel="stylesheet" href="libs/bootstrap-journal.min.css" type="text/css" />
</head>
<body>
<style type = "text/css">
.main-container {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
code {
color: inherit;
background-color: rgba(0, 0, 0, 0.04);
}
img {
max-width:100%;
height: auto;
}
h1 {
font-size: 34px;
}
h1.title {
font-size: 38px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 12px;
}
.tabbed-pane {
padding-top: 12px;
}
button.code-folding-btn:focus {
outline: none;
}
</style>
<div class="container-fluid main-container">
<!-- tabsets -->
<script src="libs/navigation-1.0/tabsets.js"></script>
<script>
$(document).ready(function () {
window.buildTabsets("TOC");
});
</script>
<!-- code folding -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">FX Jollois</a>
</div>
<div id="navbar-main" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Données <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="accesdonnees.html">A télécharger</a></li>
<li><a href="donnees-integrees-r.html">Sous R</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Enseignement <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="enseignement.html">Informations</a></li>
<li><a href="supports.html">Supports</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">DUT 1ère année</li>
<li><a href="interrogation-donnees.html">Interrogation de données</a></li>
<li><a href="reporting.html">Reporting</a></li>
<li class="dropdown-header">DUT 2ème année</li>
<li><a href="sid.html">SID</a></li>
<li><a href="bd-prog-avancees.html">BD et Programmation avancées</a></li>
<li class="dropdown-header">DU Analyste Big Data</li>
<li><a href="initiation-r-et-rmongodb.html">Intiation à R</a></li>
<li class="dropdown-header">DU Dataviz</li>
<li><a href="visualisation-donnees.html">Visualisation de données</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Master MIAGE</li>
<li><a href="webreporting.html">Web-Reporting</a></li>
<li class="dropdown-header">Master</li>
<li><a href="logiciels-stats.html">Logiciels statistiques</a></li>
<li><a href="slides/cnam-classif-modeles.html">Classification et Modèles de mélange</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Recherche <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="recherche.html">Sujets</a></li>
<li><a href="publications.html">Publications</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
<div class="contenu">
<div class="fluid-row" id="header">
<h1 class="title">Programmation avancées - TP 1 - Introduction à Shiny</h1>
</div>
<p>Le package <code>shiny</code> permet de développer très facilement des applications web à partir de <code>R</code>. Grâce à cette librairie, et d’autres librairies <code>R</code> dédiés à la réalisation de graphique, il est ainsi possible de générer des tableaux de bord, introduisant même des méthodes statistiques approfondies.</p>
<p>Pour cela, nous allons utiliser le jeu de données <code>mtcars</code> présent sous R.</p>
<div id="premiere-application" class="section level2">
<h2>Première application</h2>
<p>Une application <code>shiny</code> nécessite deux fichiers nommés spécifiquement au minimum :</p>
<ul>
<li><code>server.R</code> : définissant les opérations à réaliser lors de la création de la page et lors des différentes interactions de l’utilisateur ;</li>
<li><code>ui.R</code> : définissant l’interface utilisateur (<strong>UI</strong> signifiant <em>User Interface</em>), avec les différentes parties telles que le titre, les différentes boutons ou sélecteurs et les graphiques et/ou textes.</li>
</ul>
<div id="page-simple-avec-un-titre" class="section level3">
<h3>Page simple avec un titre</h3>
<p>Dans un nouveau répertoire, créer les deux fichiers <code>R</code> avec le contenu suivant :</p>
<div id="server.r" class="section level4">
<h4><code>server.R</code> :</h4>
<pre class="r"><code>library(shiny)
shinyServer(function(input, output) {})</code></pre>
</div>
<div id="ui.r" class="section level4">
<h4><code>ui.R</code> :</h4>
<pre class="r"><code>library(shiny)
shinyUI(fluidPage(
titlePanel("Première application")
))</code></pre>
<p>Une fois ces fichiers enregistrés, pour voir le résultat, vous pouvez soit cliquer sur <code>Run App</code> en haut à droite de l’éditeur de texte, soit exécuter la commande <code>runApp()</code> dans la console. Vous devriez voir une fenêtre avec juste le titre qui s’affiche.</p>
</div>
</div>
<div id="ajout-dun-graphique" class="section level3">
<h3>Ajout d’un graphique</h3>
<p>On va ajouter un nuage de points entre la variable <code>mpg</code> (consommation en Miles/US Gallon) et <code>wt</code> (poids) du jeu de données <code>mtcars</code>. Il faut donc modifier les deux fichiers :</p>
<div id="server.r-1" class="section level4">
<h4><code>server.R</code> :</h4>
<pre class="r"><code>library(shiny)
shinyServer(function(input, output) {
output$nuage <- renderPlot({
plot(mpg ~ wt, data = mtcars, main = "Consommation en fonction du poids")
})
})</code></pre>
</div>
<div id="ui.r-1" class="section level4">
<h4><code>ui.R</code> :</h4>
<pre class="r"><code>library(shiny)
shinyUI(fluidPage(
titlePanel("Première application"),
plotOutput("nuage")
))</code></pre>
<p>Que faut-il noter ?</p>
<ul>
<li>On ajoute dans l’interface une zone, nommée <code>nuage</code> qui sera une sortie graphique (<code>plotOutput</code>) ;</li>
<li>On définit le contenu de cette zone (<code>output$nuage</code>) comme étant un rendu graphique (<code>renderPlot</code>), dans lequel on met du code <code>R</code> permettant de faire un graphique. Le code ici présent est tou ) fait classique.</li>
</ul>
</div>
</div>
<div id="ajout-dun-bouton-daction" class="section level3">
<h3>Ajout d’un bouton d’action</h3>
<p>On ajoute ici un bouton permettant de sélectionner la variable de l’axe <span class="math inline">\(x\)</span> (<code>wt</code> dans notre exemple). Nous allons laisser à l’utilisateur le choix entre <code>wt</code>, <code>hp</code> (puissance) et <code>disp</code> (cylindrée). Il faut donc modifier les deux fichiers :</p>
<div id="server.r-2" class="section level4">
<h4><code>server.R</code> :</h4>
<pre class="r"><code>library(shiny)
shinyServer(function(input, output) {
output$nuage <- renderPlot({
plot(mtcars$mpg ~ mtcars[,input$choix], main = "Consommation")
})
})</code></pre>
</div>
<div id="ui.r-2" class="section level4">
<h4><code>ui.R</code> :</h4>
<pre class="r"><code>library(shiny)
shinyUI(fluidPage(
titlePanel("Première application"),
selectInput("choix", "Abscisse", c("wt", "hp", "disp")),
plotOutput("nuage")
))</code></pre>
<p>Que faut-il noter ?</p>
<ul>
<li>Dans l’interface, on ajoute une zone de sélection (<code>selectInput</code>) nommée <code>choix</code>, avec un titre (<code>Abscisse</code>) et donc une liste de choix (<code>c("wt", "hp", "disp")</code>) ;</li>
<li>Côté serveur, on redéfinit le graphique pour qu’il s’adapte automatiquement à la sélection de l’utilisateur. Pour cela, on se base sur le fait que la sélection (<code>input$choix</code>) sera une chaîne de caractère parmi les trois proposées. La commande <code>mtcars[,input$choix]</code> renverra donc bien le vecteur de la colonne choisie par l’utilisateur.</li>
</ul>
</div>
</div>
<div id="ajout-dune-zone-de-texte" class="section level3">
<h3>Ajout d’une zone de texte</h3>
<p>On souhaite ajouter maintenant le calcul automatique de la moyenne des deux variables sélectionnées. Pour cela, nous allons modifier les fichiers comme suit :</p>
<div id="server.r-3" class="section level4">
<h4><code>server.R</code> :</h4>
<pre class="r"><code>library(shiny)
shinyServer(function(input, output) {
output$nuage <- renderPlot({
plot(mtcars$mpg ~ mtcars[,input$choix], main = "Consommation")
})
output$resumeMpg <- renderText({
paste("Moyenne mpg :", mean(mtcars$mpg, na.rm = T))
})
output$resumeVar <- renderText({
paste("Moyenne", input$choix, ":", mean(mtcars[,input$choix], na.rm = T))
})
})</code></pre>
</div>
<div id="ui.r-3" class="section level4">
<h4><code>ui.R</code> :</h4>
<pre class="r"><code>library(shiny)
shinyUI(fluidPage(
titlePanel("Première application"),
selectInput("choix", "Abscisse", c("wt", "hp", "disp")),
plotOutput("nuage"),
textOutput("resumeMpg"),
textOutput("resumeVar")
))</code></pre>
<p>Que faut-il noter ?</p>
<ul>
<li>Côté utilisateur, on a ajouter deux zones de texte (<code>textOutput</code>), nommées <code>resumeMpg</code> pour la moyenne de la consommation, et <code>resumeVar</code> pour la moyenne de l’autre variable ;</li>
<li>Dans le serveur, on définit le texte qu’on affiche comme une concaténation de chaîne avec le calcul de la moyenne de la variable.</li>
</ul>
</div>
</div>
<div id="un-peu-de-mise-en-page" class="section level3">
<h3>Un peu de mise en page</h3>
<p>Il est prévu une mise en page en deux zones :</p>
<ul>
<li>une zone servant à faire des sélections ou des actions ;</li>
<li>une zone principale, où le rendu sera dépendant des choix faits.</li>
</ul>
<p>On ne modifie ici que le fichier d’interface.</p>
<div id="ui.r-4" class="section level4">
<h4><code>ui.R</code></h4>
<pre class="r"><code>library(shiny)
shinyUI(fluidPage(
titlePanel("Première application"),
sidebarLayout(
sidebarPanel(
selectInput("choix", "Abscisse", c("wt", "hp", "disp")),
textOutput("resumeMpg"),
textOutput("resumeVar")
),
mainPanel(
plotOutput("nuage")
)
)
))</code></pre>
<p>Que faut-il noter ?</p>
<ul>
<li>La commande <code>sidebarLayout</code> permet donc de définir cette séparation en deux parties (environ 1/3-2/3). Elle doit contenir deux choses :</li>
<li>la commande <code>sidebarPanel</code> qui contient les éléments qui seront donc à gauche par défaut</li>
<li>la commande <code>mainPanel</code> qui sera celle à droite et prenant le plus de place</li>
<li>On peut mettre la partie <code>sidebarPanel</code> à droite avec <code>sidebarLayout(position = "right", ..., ...)</code></li>
</ul>
</div>
</div>
</div>
<div id="a-faire" class="section level2">
<h2>A FAIRE</h2>
<p>Dans la partie interface, il est possible de créer un système d’onglet avec :</p>
<pre class="r"><code>shinyUI(fluidPage(
tabsetPanel(
tabPanel("Panel1",
titlePanel("titre Panel 1")
# autres commandes UI (par exemple sidebarLayout)
),
tabPanel("Panel2",
titlePanel("titre Panel 2")
# idem
)
# autres onglets possibles
)
))</code></pre>
<div id="premier-onglet" class="section level3">
<h3>Premier onglet</h3>
<p>Le travail fait précédemment (ce qu’il y a dans le <code>sidebarLayout()</code>).</p>
</div>
<div id="deuxieme-onglet" class="section level3">
<h3>Deuxième onglet</h3>
<p>On veut compléter notre application avec une partie pour l’analyse de variables qualitatives. Vous devez donc faire en sorte que :</p>
<ul>
<li>l’utilisateur puisse choisir une variable parmi <code>cyl</code>, <code>vs</code>, <code>am</code>, <code>gear</code> et <code>carb</code></li>
<li>le système affiche le diagramme en barres et le diagramme circulaire, ainsi qu’un tableau des occurences et des fréquences des modalités</li>
</ul>
</div>
<div id="troisieme-onglet" class="section level3">
<h3>Troisième onglet</h3>
<p>On veut croiser les variables qualitatives :</p>
<ul>
<li>l’utilisateur doit donc choisir deux variables parmi celles citées (on ne gère pas la possibilité que l’utilisateur choisisse la même deux fois pour le moment)</li>
<li>le système affiche un diagramme en barres empilées ainsi que le tableau de contingence, avec les sommes en lignes et en colonnes</li>
</ul>
</div>
</div>
</div>
<div class="footer">
Site créé avec <a href="http://www.r-project.org" target="_blank"><code>R</code></a> et la
librairie <a href="http://rmarkdown.rstudio.com/" target="_blank"><code>rmarkdown</code></a>.
</div>
<script>
$("#TOC").css("margin-top", "100px");
</script>
</div>
<script>
// add bootstrap table styles to pandoc tables
$(document).ready(function () {
$('tr.header').parent('thead').parent('table').addClass('table table-condensed');
});
</script>
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
document.getElementsByTagName("head")[0].appendChild(script);
})();
</script>
</body>
</html>