New UI in gifs included in the vignette

README.md

@@ -1,7 +1,7 @@
 Add more interactivity to interactive charts
 ================
 
-[![CRAN Status Badge](http://www.r-pkg.org/badges/version/manipulateWidget)](http://cran.r-project.org/package=manipulateWidget) [![CRAN Downloads Badge](https://cranlogs.r-pkg.org/badges/manipulateWidget)](http://cran.r-project.org/package=manipulateWidget)[![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/github/rte-antares-rpackage/manipulateWidget?branch=master&svg=true)](https://ci.appveyor.com/project/rte-antares-rpackage/manipulateWidget)[![Travis-CI Build Status](https://travis-ci.org/rte-antares-rpackage/manipulateWidget.svg?branch=master)](https://travis-ci.org/rte-antares-rpackage/manipulateWidget)[![Coverage Status](https://img.shields.io/codecov/c/github/rte-antares-rpackage/manipulateWidget/master.svg)](https://codecov.io/github/rte-antares-rpackage/manipulateWidget?branch=master)
+[![CRAN Status Badge](http://www.r-pkg.org/badges/version/manipulateWidget)](http://cran.r-project.org/package=manipulateWidget) [![CRAN Downloads Badge](https://cranlogs.r-pkg.org/badges/manipulateWidget)](http://cran.r-project.org/package=manipulateWidget)
 
 This R package is largely inspired by the `manipulate` package from Rstudio. It provides the function `manipulateWidget` that can be used to create in a very easy way a graphical interface that let the user modify the data or the parameters of an interactive chart. Technically, the function generates a Shiny gadget, but the user does not even have to know what is Shiny.
 

vignettes/manipulateWidgets.Rmd

@@ -100,6 +100,31 @@ combineWidgets(
 
 ## Advanced usage
 
+### Comparison mode
+
+Sometimes one wants to compare two similar charts to visualize the impact of some parameter or to compare different data sets. `manipulateWidget` has an argument to perform such comparison without writing much code: `.compare`. One just has to write the code to generate one chart and use this argument to specify which parameters should vary between the two charts. Here is a toy example that uses `dygraphs`.
+
+```{r eval=FALSE}
+mydata <- data.frame(
+  timeId = 1:100,
+  series1 = rnorm(100),
+  series2 = rnorm(100),
+  series3 = rnorm(100)
+)
+manipulateWidget(
+  dygraph(mydata[range[1]:range[2], c("timeId", series)], main = title),
+  range = mwSlider(1, 100, c(1, 100)),
+  series = mwSelect(c("series1", "series2", "series3")),
+  title = mwText(),
+  .compare = list(
+    title = list("First chart", "Second chart"),
+    series = NULL
+  )
+)
+```
+
+![Comparison mode](comparison.gif)
+
 ### Grouping controls
 
 If you have a large number of inputs, you can easily group them. To do so, simply use function `mwGroup()`. Here is a toy example. Groups are by default collapsed and user can click on their title to display/collapse then. 
@@ -218,31 +243,6 @@ manipulateWidget(myMapFun(radius, color, .initial, .session, .output),
 
 ![Conditional inputs](update-widget.gif)
 
-### Comparison mode
-
-Sometimes one wants to compare two similar charts to visualize the impact of some parameter or to compare different data sets. `manipulateWidget` has an argument to perform such comparison without writing much code: `.compare`. One just has to write the code to generate one chart and use this argument to specify which parameters should vary between the two charts. Here is a toy example that uses `dygraphs`.
-
-```{r eval=FALSE}
-mydata <- data.frame(
-  timeId = 1:100,
-  series1 = rnorm(100),
-  series2 = rnorm(100),
-  series3 = rnorm(100)
-)
-manipulateWidget(
-  dygraph(mydata[range[1]:range[2], c("timeId", series)], main = title),
-  range = mwSlider(1, 100, c(1, 100)),
-  series = mwSelect(c("series1", "series2", "series3")),
-  title = mwText(),
-  .compare = list(
-    title = list("First chart", "Second chart"),
-    series = NULL
-  )
-)
-```
-
-![Comparison mode](comparison.gif)
-
 ### Using `manipulateWidget` in a document
 
 `manipulateWidget` uses Shiny, so it does not work in a "normal" Rmarkdown document. If one uses the function in a code chunck, the htmlwidget will be outputed with the default values of the parameters and there will be no interface to modify the parameters.