4
4
5
5
< head >
6
6
7
- < meta charset ="utf-8 " / >
7
+ < meta charset ="utf-8 ">
8
8
< meta http-equiv ="Content-Type " content ="text/html; charset=utf-8 " />
9
9
< meta name ="generator " content ="pandoc " />
10
10
11
11
12
12
13
-
14
13
< title > ggplot2 extensions: gganimate</ title >
15
14
16
- < script src ="libs/jquery-1.11.3 /jquery.min.js "> </ script >
15
+ < script src ="libs/jquery-1.11.0 /jquery.min.js "> </ script >
17
16
< meta name ="viewport " content ="width=device-width, initial-scale=1 " />
18
- < link href ="libs/bootstrap-3.3.5/css/cosmo.min.css " rel ="stylesheet " />
19
- < script src ="libs/bootstrap-3.3.5/js/bootstrap.min.js "> </ script >
20
- < script src ="libs/bootstrap-3.3.5/shim/html5shiv.min.js "> </ script >
21
- < script src ="libs/bootstrap-3.3.5/shim/respond.min.js "> </ script >
22
- < script src ="libs/navigation-1.1/tabsets.js "> </ script >
23
- < link href ="libs/highlightjs-9.12.0/textmate.css " rel ="stylesheet " />
24
- < script src ="libs/highlightjs-9.12.0/highlight.js "> </ script >
17
+ < link href ="libs/bootstrap-3.3.1/css/cosmo.min.css " rel ="stylesheet " />
18
+ < script src ="libs/bootstrap-3.3.1/js/bootstrap.min.js "> </ script >
19
+ < script src ="libs/bootstrap-3.3.1/shim/html5shiv.min.js "> </ script >
20
+ < script src ="libs/bootstrap-3.3.1/shim/respond.min.js "> </ script >
25
21
26
22
<!-- Styles for this site -->
27
23
< meta name ="viewport " content ="width=device-width, initial-scale=1 ">
32
28
< script src ="js/polyfill.js "> </ script >
33
29
34
30
< style type ="text/css "> code {white-space : pre;}</ style >
31
+ < link rel ="stylesheet "
32
+ href ="libs/highlight/textmate.css "
33
+ type ="text/css " />
34
+ < script src ="libs/highlight/highlight.js "> </ script >
35
35
< style type ="text/css ">
36
36
pre : not ([class ]) {
37
37
background-color : white;
38
38
}
39
39
</ style >
40
40
< script type ="text/javascript ">
41
- if ( window . hljs ) {
42
- hljs . configure ( { languages : [ ] } ) ;
43
- hljs . initHighlightingOnLoad ( ) ;
44
- if ( document . readyState && document . readyState === "complete" ) {
45
- window . setTimeout ( function ( ) { hljs . initHighlighting ( ) ; } , 0 ) ;
46
- }
41
+ if ( window . hljs && document . readyState && document . readyState === "complete" ) {
42
+ window . setTimeout ( function ( ) {
43
+ hljs . initHighlighting ( ) ;
44
+ } , 0 ) ;
47
45
}
48
46
</ script >
49
47
50
48
51
49
52
- < style type ="text/css ">
53
- h1 {
54
- font-size : 34px ;
55
- }
56
- h1 .title {
57
- font-size : 38px ;
58
- }
59
- h2 {
60
- font-size : 30px ;
61
- }
62
- h3 {
63
- font-size : 24px ;
64
- }
65
- h4 {
66
- font-size : 18px ;
67
- }
68
- h5 {
69
- font-size : 16px ;
70
- }
71
- h6 {
72
- font-size : 12px ;
73
- }
74
- .table th : not ([align ]) {
75
- text-align : left;
76
- }
77
- </ style >
78
-
79
-
80
50
</ head >
81
51
82
52
< body >
91
61
color : inherit;
92
62
background-color : rgba (0 , 0 , 0 , 0.04 );
93
63
}
94
- img {
95
- max-width : 100% ;
96
- height : auto;
97
- }
98
- .tabbed-pane {
99
- padding-top : 12px ;
100
- }
101
- .html-widget {
102
- margin-bottom : 20px ;
103
- }
104
- button .code-folding-btn : focus {
105
- outline : none;
106
- }
107
- summary {
108
- display : list-item;
64
+ img {
65
+ max-width : 100% ;
66
+ height : auto;
109
67
}
110
68
</ style >
111
-
112
-
113
-
114
69
< div class ="container-fluid main-container ">
115
70
116
- <!-- tabsets -->
117
-
118
- < style type ="text/css ">
119
- .tabset-dropdown > .nav-tabs {
120
- display : inline-table;
121
- max-height : 500px ;
122
- min-height : 44px ;
123
- overflow-y : auto;
124
- background : white;
125
- border : 1px solid # ddd ;
126
- border-radius : 4px ;
127
- }
128
-
129
- .tabset-dropdown > .nav-tabs > li .active : before {
130
- content : "" ;
131
- font-family : 'Glyphicons Halflings' ;
132
- display : inline-block;
133
- padding : 10px ;
134
- border-right : 1px solid # ddd ;
135
- }
136
-
137
- .tabset-dropdown > .nav-tabs .nav-tabs-open > li .active : before {
138
- content : "" ;
139
- border : none;
140
- }
141
-
142
- .tabset-dropdown > .nav-tabs .nav-tabs-open : before {
143
- content : "" ;
144
- font-family : 'Glyphicons Halflings' ;
145
- display : inline-block;
146
- padding : 10px ;
147
- border-right : 1px solid # ddd ;
148
- }
149
-
150
- .tabset-dropdown > .nav-tabs > li .active {
151
- display : block;
152
- }
153
-
154
- .tabset-dropdown > .nav-tabs > li > a ,
155
- .tabset-dropdown > .nav-tabs > li > a : focus ,
156
- .tabset-dropdown > .nav-tabs > li > a : hover {
157
- border : none;
158
- display : inline-block;
159
- border-radius : 4px ;
160
- }
161
-
162
- .tabset-dropdown > .nav-tabs .nav-tabs-open > li {
163
- display : block;
164
- float : none;
165
- }
166
-
167
- .tabset-dropdown > .nav-tabs > li {
168
- display : none;
169
- }
170
- </ style >
171
-
172
- < script >
173
- $ ( document ) . ready ( function ( ) {
174
- window . buildTabsets ( "TOC" ) ;
175
- } ) ;
176
-
177
- $ ( document ) . ready ( function ( ) {
178
- $ ( '.tabset-dropdown > .nav-tabs > li' ) . click ( function ( ) {
179
- $ ( this ) . parent ( ) . toggleClass ( 'nav-tabs-open' )
180
- } ) ;
181
- } ) ;
182
- </ script >
183
-
184
- <!-- code folding -->
185
-
186
-
187
-
188
-
189
71
<!--html_preserve-->
190
72
191
73
< div class ="header ">
@@ -299,7 +181,30 @@ <h5 class="list-group-item-heading">ggseas</h5>
299
181
300
182
</ div > <!-- col-sm-4 -->
301
183
302
- < div class ="col-sm-8 " id ="page-body "> </ div > <!-- col-sm-8 -->
184
+
185
+ < div id ="gganimate " class ="col-sm-8 ">
186
+ < h3 > gganimate</ h3 >
187
+ < p > < a href ="https://github.com/dgrtwo/gganimate " class ="uri "> https://github.com/dgrtwo/gganimate</ a > </ p >
188
+ < p > gganimate wraps the animation package to create animated ggplot2 plots.</ p >
189
+ < pre class ="r "> < code > knitr::opts_chunk$set(message = FALSE, warning = FALSE, fig.show = "animate")
190
+ # Example from https://github.com/dgrtwo/gganimate
191
+ library(ggplot2)
192
+ library(gganimate)
193
+
194
+ # For example, suppose we wanted to create an animation similar to the Gapminder
195
+ # world animation, using Jenny Bryan's gapminder package for the data.
196
+ library(gapminder)
197
+
198
+ theme_set(theme_bw())
199
+ p <- ggplot(gapminder, aes(gdpPercap, lifeExp, size = pop, color = continent, frame = year)) +
200
+ geom_point() +
201
+ scale_x_log10()
202
+
203
+ # Notice we added frame = year and saved the plot as p.
204
+ # We then display it as an animation with the gg_animate function:
205
+ gg_animate(p)</ code > </ pre >
206
+ < p > < img src ="images/output.gif " alt ="unnamed-chunk-3 " /> </ p >
207
+ </ div > <!-- col-sm-8 -->
303
208
304
209
</ div > <!-- row -->
305
210
</ div >
@@ -310,35 +215,9 @@ <h5 class="list-group-item-heading">ggseas</h5>
310
215
311
216
<!--/html_preserve-->
312
217
313
- < div class ="fluid-row " id ="header ">
314
218
315
219
316
220
317
- < h1 class ="title toc-ignore "> ggplot2 extensions: gganimate</ h1 >
318
-
319
- </ div >
320
-
321
-
322
- < div id ="gganimate " class ="section level3 ">
323
- < h3 > gganimate</ h3 >
324
- < p > < a href ="https://github.com/thomasp85/gganimate " class ="uri "> https://github.com/thomasp85/gganimate</ a > </ p >
325
- < p > A Grammar of Animated Graphics.</ p >
326
- < pre class ="r "> < code > library(gganimate)</ code > </ pre >
327
- < pre > < code > ## Loading required package: ggplot2</ code > </ pre >
328
- < pre class ="r "> < code > library(gapminder)
329
-
330
- ggplot(gapminder, aes(gdpPercap, lifeExp, size = pop, colour = country)) +
331
- geom_point(alpha = 0.7, show.legend = FALSE) +
332
- scale_colour_manual(values = country_colors) +
333
- scale_size(range = c(2, 12)) +
334
- scale_x_log10() +
335
- facet_wrap(~continent) +
336
- # Here comes the gganimate specific bits
337
- labs(title = 'Year: {frame_time}', x = 'GDP per capita', y = 'life expectancy') +
338
- transition_time(year) +
339
- ease_aes('linear')</ code > </ pre >
340
- < p > < img src ="gganimate_files/figure-html/unnamed-chunk-1-1.gif " /> <!-- --> </ p >
341
- </ div >
342
221
343
222
344
223
</ div > <!-- page-body -->
@@ -387,21 +266,15 @@ <h3>gganimate</h3>
387
266
388
267
</ script >
389
268
390
-
391
-
392
269
</ div >
393
270
394
271
< script >
395
272
396
273
// add bootstrap table styles to pandoc tables
397
- function bootstrapStylePandocTables ( ) {
398
- $ ( 'tr.header' ) . parent ( 'thead' ) . parent ( 'table' ) . addClass ( 'table table-condensed' ) ;
399
- }
400
274
$ ( document ) . ready ( function ( ) {
401
- bootstrapStylePandocTables ( ) ;
275
+ $ ( 'tr.header' ) . parent ( 'thead' ) . parent ( 'table' ) . addClass ( 'table table-condensed' ) ;
402
276
} ) ;
403
277
404
-
405
278
</ script >
406
279
407
280
0 commit comments