-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
258 lines (219 loc) · 9.62 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Estimating correlation</title>
<meta charset="utf-8">
<meta name="description" content="Estimating correlation">
<meta name="author" content="">
<meta name="generator" content="slidify" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" href="libraries/frameworks/io2012/css/default.css" media="all" >
<link rel="stylesheet" href="libraries/frameworks/io2012/css/phone.css"
media="only screen and (max-device-width: 480px)" >
<link rel="stylesheet" href="libraries/frameworks/io2012/css/slidify.css" >
<link rel="stylesheet" href="libraries/highlighters/highlight.js/css/tomorrow.css" />
<base target="_blank"> <!-- This amazingness opens all links in a new tab. -->
<!-- Grab CDN jQuery, fall back to local if offline -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
<script>window.jQuery || document.write('<script src="libraries/widgets/quiz/js/jquery.js"><\/script>')</script>
<script data-main="libraries/frameworks/io2012/js/slides"
src="libraries/frameworks/io2012/js/require-1.0.8.min.js">
</script>
</head>
<body style="opacity: 0">
<slides class="layout-widescreen">
<!-- LOGO SLIDE -->
<slide class="title-slide segue nobackground">
<hgroup class="auto-fadein">
<h1>Estimating correlation</h1>
<h2>Documentation of the Shiny application</h2>
<p><br/></p>
</hgroup>
<a href="https://github.com/hohenstein/correlation/zipball/gh-pages" class="example">
Download
</a>
<article></article>
</slide>
<!-- SLIDES -->
<slide class="" id="slide-1" style="background:;">
<hgroup>
<h2>Correlation</h2>
</hgroup>
<article data-timings="">
<p>This is the documentation for a Shiny application that demonstrates the
concept of correlation. The application is online
<a href="https://hohenstein.shinyapps.io/correlation/">here</a>.</p>
<hr>
<p><br></p>
<p>The <a href="http://en.wikipedia.org/wiki/Pearson_product-moment_correlation_coefficient">Pearson correlation coefficient</a>
refers to the linear dependence
between two variables. The correlation coefficient ranges from \(-1\) to \(1\)
where \(0\) indicates no correlation. The values of \(-1\) and \(1\) indicate a
perfect negative and positive relationship, respectively.</p>
<!---
For two random variables, $x$ and $y$, the correlation coefficient $\rho$ of
a population is defined as
$$\rho = \frac{\mathrm{cov}(x,y)}{\sigma_x \sigma_y},$$
where $\mathrm{cov}(x,y)$ is the [covariance]
(http://en.wikipedia.org/wiki/Covariance) of the two variables.
Furthermore, $\sigma_x$ and $\sigma_y$ represent the [standard deviations]
(http://en.wikipedia.org/wiki/Standard_deviation) of $x$ and $y$,
respectively. Standard deviation indicates the amount of variation in
a data set.
-->
<p>Note that the correlations can represent linear relationship only. Even if
there is no correlation between two random variables \(y\) and \(y\), there
might be another type of dependency, for example, a polynomial relationship.</p>
<p>In the <strong>Shiny</strong> application, the slider can be used to choose a correlation
value. The relationship between the data points displayed in the scatter plot
(first tab) will change accordingly. Try some values and have a look at the
results.</p>
</article>
<!-- Presenter Notes -->
</slide>
<slide class="" id="slide-2" style="background:;">
<hgroup>
<h2>Illustration</h2>
</hgroup>
<article data-timings="">
<p>The correlation in a population is indicated by the Greek letter \(\rho\).
This can be interpreted as the "true" correlation.</p>
<p>The following figure illustrates different correlation coefficients.
The five panels display scatter plots of \(y\) values against \(x\) values.
The corresponding correlation coefficients are \(-1\), \(-0.7\), \(0\), \(0.7\), and
\(1\).</p>
<p><img src="assets/fig/unnamed-chunk-1.png" title="plot of chunk unnamed-chunk-1" alt="plot of chunk unnamed-chunk-1" style="display: block; margin: auto;" /></p>
<p>The points in the panels with correlations of \(-1\) and \(1\) lie on a line.
This is due to the perfect linear relationship between \(x\) and \(y\).
In contrast, there is no linear relationship when the correlation is \(0\).</p>
</article>
<!-- Presenter Notes -->
</slide>
<slide class="" id="slide-3" style="background:;">
<hgroup>
<h2>Distribution of the variables \(x\) and \(y\)</h2>
</hgroup>
<article data-timings="">
<p>In the <strong>Shiny</strong> application, \(x\) and \(y\) are represented as a <a href="http://en.wikipedia.org/wiki/Multivariate_normal_distribution">bivariate
normal distribution</a>. This is a
combination of two normal (or Gaussian) distributions. In <code>R</code>, the density
of the simple normal distribution is implemented in <code>dnorm</code>. You can use the
<code>curve</code> function to visualize the distribution.</p>
<pre><code class="r">curve(dnorm(x), -5, 5)
</code></pre>
<p><img src="assets/fig/unnamed-chunk-2.png" alt="plot of chunk unnamed-chunk-2"> </p>
<p>In the bivariate normal distribution, both random variables, \(x\) and \(y\)
follow a normal distribution. Additionally, there is a correlation between
both variables of the population (see the slider in the <strong>Shiny</strong> application). </p>
</article>
<!-- Presenter Notes -->
</slide>
<slide class="" id="slide-4" style="background:;">
<hgroup>
<h2>Random sampling</h2>
</hgroup>
<article data-timings="">
<p>We can sample random values of \(x\) and \(y\) from a population. Due to
the population correlation \(\rho\), the realisations of \(x\) are not
independent from the realisations of \(y\), although sampling is random.</p>
<p>In the <strong>Shiny</strong> application, you can use the numeric input field to specify
the number of random samples. Each random sample is represented by a point
in the scatter plot. Furthermore, the dashed line represents the population
correlation \(\rho\) while the solid red line represents the estimated
correlation, indicated by \(r\), in the sample data set.</p>
<p>It turns out that the correlation of the sample data set \(r\)
may differ from \(\rho\) due to the randomness. Usually, the absolute
difference between both values decreases with the number of samples.</p>
<p>This phenomenon is visualized in the plot in the second tab. The red line
represents how the sample correlation changes with additional samples.</p>
</article>
<!-- Presenter Notes -->
</slide>
<slide class="" id="slide-5" style="background:;">
<hgroup>
<h2>Final remarks</h2>
</hgroup>
<article data-timings="">
<p>If you want to have a look at the values of the sample data set, you can
find a table view of \(x\) and \(y\) in the third tab. Each sample consists
of a pair of two values.</p>
<p>Note that the generation of the second plot may take a while if you
choose a very large number of samples.</p>
<p>A final note on the implementation: In <code>R</code>, you can generate random samples
from the bivariate normal distribution with the function <code>mvrnorm</code> in the
<code>MASS</code> package. The correlation between two variables \(x\) and \(y\) can be
calculated with the <code>cor</code> function.</p>
<pre><code class="r">x <- c(0, 2, 4, 6, 2, 5)
y <- c(1, 3, 2, 4, 6, 1)
cor(x, y)
</code></pre>
<pre><code>## [1] 0.05395
</code></pre>
<p>In the example above, the correlation between vectors <code>x</code> and <code>y</code> is
0.05.</p>
</article>
<!-- Presenter Notes -->
</slide>
<slide class="backdrop"></slide>
</slides>
<div class="pagination pagination-small" id='io2012-ptoc' style="display:none;">
<ul>
<li>
<a href="#" target="_self" rel='tooltip'
data-slide=1 title='Correlation'>
1
</a>
</li>
<li>
<a href="#" target="_self" rel='tooltip'
data-slide=2 title='Illustration'>
2
</a>
</li>
<li>
<a href="#" target="_self" rel='tooltip'
data-slide=3 title='Distribution of the variables \(x\) and \(y\)'>
3
</a>
</li>
<li>
<a href="#" target="_self" rel='tooltip'
data-slide=4 title='Random sampling'>
4
</a>
</li>
<li>
<a href="#" target="_self" rel='tooltip'
data-slide=5 title='Final remarks'>
5
</a>
</li>
</ul>
</div> <!--[if IE]>
<script
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
</script>
<script>CFInstall.check({mode: 'overlay'});</script>
<![endif]-->
</body>
<!-- Load Javascripts for Widgets -->
<!-- MathJax: Fall back to local if CDN offline but local image fonts are not supported (saves >100MB) -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
}
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/2.0-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<!-- <script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/2.0-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script> -->
<script>window.MathJax || document.write('<script type="text/x-mathjax-config">MathJax.Hub.Config({"HTML-CSS":{imageFont:null}});<\/script><script src="libraries/widgets/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"><\/script>')
</script>
<!-- LOAD HIGHLIGHTER JS FILES -->
<script src="libraries/highlighters/highlight.js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- DONE LOADING HIGHLIGHTER JS FILES -->
</html>