finish generating non-shiny interactives

Author: cpsievert

DESCRIPTION

@@ -45,4 +45,5 @@ Remotes:
   hadley/ggstat,
   hadley/emo,
   hrbrmstr/albersusa,
+  hrbrmstr/ggalt,
   leeper/slopegraph

animation.Rmd

@@ -12,7 +12,7 @@ gg <- ggplot(gapminder, aes(gdpPercap, lifeExp, color = continent)) +
 ggplotly(gg)
 ```
 
-```{r animation-ggplotly, echo = FALSE, fig.cap = "(ref:animation-ggplotly)"}
+```{r animation-ggplotly, echo = FALSE, fig.cap = "(ref:animation-ggplotly)", out.extra = 'data-url="/interactives/animation-ggplotly.html"'}
 knitr::include_graphics("images/animation-ggplotly.png")
 ```
 
@@ -35,7 +35,7 @@ base %>%
   )
 ```
 
-```{r animation-opts, echo = FALSE, fig.cap = "(ref:animation-opts)"}
+```{r animation-opts, echo = FALSE, fig.cap = "(ref:animation-opts)", out.extra = 'data-url="/interactives/animation-opts.html"'}
 knitr::include_graphics("images/animation-opts.png")
 ```
 
@@ -53,20 +53,20 @@ base %>%
   animation_opts(frame = 1000, transition = 0, redraw = FALSE)
 ```
 
-```{r animation-factors, echo = FALSE, fig.cap = "(ref:animation-factors)"}
+```{r animation-factors, echo = FALSE, fig.cap = "(ref:animation-factors)", out.extra = 'data-url="/interactives/animation-factors.html"'}
 knitr::include_graphics("images/animation-factors.png")
 ```
 
 Both the `frame` and `ids` attributes operate on the trace level -- meaning that we can target specific layers of the graph to be animated. One obvious use case for this is to provide a background which displays every possible frame (which is not animated) and overlay the animated frames onto that background. Figure \@ref(fig:animation-targets) shows the same information as Figure \@ref(fig:animation-opts), but layers animated frames on top of a background of all the frames. As a result, it is easier to put a specific year into a global context.
 
 ```r
 base %>%
-  add_markers(color = ~continent, alpha = 0.2, showlegend = F) %>%
+  add_markers(color = ~continent, alpha = 0.2, alpha_stroke = 0.2, showlegend = F) %>%
   add_markers(color = ~continent, frame = ~year, ids = ~country) %>%
   animation_opts(1000, redraw = FALSE)
 ```
 
-```{r animation-targets, echo = FALSE, fig.cap = "(ref:animation-targets)"}
+```{r animation-targets, echo = FALSE, fig.cap = "(ref:animation-targets)", out.extra = 'data-url="/interactives/animation-targets.html"'}
 knitr::include_graphics("images/animation-targets.png")
 ```
 

arranging.Rmd

@@ -20,8 +20,7 @@ p2 <- plot_ly(economics, x = ~date, y = ~uempmed) %>%
 subplot(p1, p2)
 ```
 
-
-```{r subplot-simple, echo=FALSE, fig.cap="(ref:subplot-simple)"}
+```{r subplot-simple, echo=FALSE, fig.cap="(ref:subplot-simple)", out.extra = 'data-url="/interactives/subplot-simple.html"'}
 knitr::include_graphics("images/subplot-simple.svg")
 ```
 
@@ -36,7 +35,7 @@ plots <- lapply(vars, function(var) {
 subplot(plots, nrows = length(plots), shareX = TRUE, titleX = FALSE)
 ```
 
-```{r economics, echo=FALSE, fig.cap = "(ref:economics)"}
+```{r economics, echo=FALSE, fig.cap = "(ref:economics)", out.extra = 'data-url="/interactives/economics.html"'}
 knitr::include_graphics("images/economics.svg")
 ```
 
@@ -65,7 +64,7 @@ s <- subplot(
 layout(s, showlegend = FALSE)
 ```
 
-```{r joint, echo = FALSE, fig.cap = "(ref:joint)"}
+```{r joint, echo = FALSE, fig.cap = "(ref:joint)", out.extra = 'data-url="/interactives/joint.html"'}
 knitr::include_graphics("images/joint.svg")
 ```
 
@@ -85,7 +84,7 @@ subplot(
 )
 ```
 
-```{r recursive, echo = FALSE, fig.cap = "(ref:recursive)"}
+```{r recursive, echo = FALSE, fig.cap = "(ref:recursive)", out.extra = 'data-url="/interactives/recursive.html"'}
 knitr::include_graphics("images/recursive.svg")
 ```
 
@@ -117,7 +116,7 @@ subplot(barcharts, margin = 0.01) %>%
   colorbar(y = 0.5)
 ```
 
-```{r map-subplot, echo = FALSE, fig.cap = "(ref:map-subplot)"}
+```{r map-subplot, echo = FALSE, fig.cap = "(ref:map-subplot)", out.extra = 'data-url="/interactives/map-subplot.html"'}
 knitr::include_graphics("images/map-subplot.svg")
 ```
 
@@ -155,7 +154,7 @@ class(pm)
 ggplotly(pm)
 ```
 
-```{r ggpairs, echo = FALSE, fig.cap = "(ref:ggpairs)"}
+```{r ggpairs, echo = FALSE, fig.cap = "(ref:ggpairs)", out.extra = 'data-url="/interactives/ggpairs.html"'}
 knitr::include_graphics("images/ggpairs.svg")
 ```
 
@@ -204,7 +203,7 @@ economics_long %>%
   subplot(nrows = NROW(.), shareX = TRUE)
 ```
 
-```{r subplot-trellis, echo=FALSE, fig.cap = "(ref:subplot-trellis)"}
+```{r subplot-trellis, echo=FALSE, fig.cap = "(ref:subplot-trellis)", out.extra = 'data-url="/interactives/subplot-trellis.html"'}
 knitr::include_graphics("images/subplot-trellis.svg")
 ```
 
@@ -241,8 +240,6 @@ Although **flexdashboard** is a really excellent way to arrange web-based conten
 
 Figure \@ref(fig:flexdashboard-ggplotly) provides an example of embedding `ggplotly()` inside **flexdashboard** [@flexdashboard]. Since **flexdashboard** is an **rmarkdown** template, it automatically comes with many of things that make **rmarkdown** great: ability to produce standalone HTML, integration with other languages, and thoughtful integration with RStudio products like Connect. There are many other things to like about **flexdashboard**, including lots of easy-to-use theming options, multiple pages, storyboards, and even **shiny** integration. Explaining how the **flexdashboard** package actually works is beyond the scope of this book, but you can visit the website for documentation and more examples <https://rmarkdown.rstudio.com/flexdashboard/>.
 
-
-
 ```{r flexdashboard-ggplotly, echo = FALSE, fig.link="https://plotly-r.com/flexdashboard.html", fig.cap = "(ref:flexdashboard-ggplotly)"}
 knitr::include_graphics("images/flexdashboard.png")
 ```
@@ -266,7 +263,7 @@ fluidPage(
 )
 ```
 
-```{r fluid, echo = FALSE,  fig.cap = "(ref:fluid)"}
+```{r fluid, echo = FALSE, fig.cap = "(ref:fluid)", out.extra = 'data-url="/interactives/fluid.html"'}
 knitr::include_graphics("images/fluid.png")
 ```
 
@@ -296,7 +293,7 @@ browsable(div(
 ))
 ```
 
-```{r flexbox, echo = FALSE,  fig.cap = "(ref:flexbox)"}
+```{r flexbox, echo = FALSE, fig.cap = "(ref:flexbox)", out.extra = 'data-url="/interactives/flexbox.html"'}
 knitr::include_graphics("images/flexbox.png")
 ```
 

docs/animating-views.html

@@ -347,7 +347,7 @@ <h2><span class="header-section-number">14.1</span> Animation API</h2>
 <span class="st">  </span><span class="kw">scale_x_log10</span>()
 <span class="kw">ggplotly</span>(gg)</code></pre>
 <div class="figure" style="text-align: center"><span id="fig:animation-ggplotly"></span>
-<img src="images/animation-ggplotly.png" alt="Animation of the evolution in the relationship between GDP per capita and life expectancy in numerous countries." width="100%" />
+<img src="images/animation-ggplotly.png" alt="Animation of the evolution in the relationship between GDP per capita and life expectancy in numerous countries." width="100%" data-url="/interactives/animation-ggplotly.html" />
 <p class="caption">
 FIGURE 14.1: Animation of the evolution in the relationship between GDP per capita and life expectancy in numerous countries.
 </p>
@@ -368,7 +368,7 @@ <h2><span class="header-section-number">14.1</span> Animation API</h2>
     <span class="dt">currentvalue =</span> <span class="kw">list</span>(<span class="dt">prefix =</span> <span class="st">&quot;YEAR &quot;</span>, <span class="dt">font =</span> <span class="kw">list</span>(<span class="dt">color=</span><span class="st">&quot;red&quot;</span>))
   )</code></pre>
 <div class="figure" style="text-align: center"><span id="fig:animation-opts"></span>
-<img src="images/animation-opts.png" alt="Modifying animation defaults with animation_opts(), animation_button(), and animation_slider()." width="100%" />
+<img src="images/animation-opts.png" alt="Modifying animation defaults with animation_opts(), animation_button(), and animation_slider()." width="100%" data-url="/interactives/animation-opts.html" />
 <p class="caption">
 FIGURE 14.2: Modifying animation defaults with <code>animation_opts()</code>, <code>animation_button()</code>, and <code>animation_slider()</code>.
 </p>
@@ -384,18 +384,18 @@ <h2><span class="header-section-number">14.1</span> Animation API</h2>
 <span class="st">  </span><span class="kw">hide_legend</span>() <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">animation_opts</span>(<span class="dt">frame =</span> <span class="dv">1000</span>, <span class="dt">transition =</span> <span class="dv">0</span>, <span class="dt">redraw =</span> <span class="ot">FALSE</span>)</code></pre>
 <div class="figure" style="text-align: center"><span id="fig:animation-factors"></span>
-<img src="images/animation-factors.png" alt="Animation of GDP per capita versus life expectancy by continent. The ordering of the contintents goes from lowest average (across countries) life expectancy to highest." width="100%" />
+<img src="images/animation-factors.png" alt="Animation of GDP per capita versus life expectancy by continent. The ordering of the contintents goes from lowest average (across countries) life expectancy to highest." width="100%" data-url="/interactives/animation-factors.html" />
 <p class="caption">
 FIGURE 14.3: Animation of GDP per capita versus life expectancy by continent. The ordering of the contintents goes from lowest average (across countries) life expectancy to highest.
 </p>
 </div>
 <p>Both the <code>frame</code> and <code>ids</code> attributes operate on the trace level – meaning that we can target specific layers of the graph to be animated. One obvious use case for this is to provide a background which displays every possible frame (which is not animated) and overlay the animated frames onto that background. Figure <a href="animating-views.html#fig:animation-targets">14.4</a> shows the same information as Figure <a href="animating-views.html#fig:animation-opts">14.2</a>, but layers animated frames on top of a background of all the frames. As a result, it is easier to put a specific year into a global context.</p>
 <pre class="sourceCode r"><code class="sourceCode r">base <span class="op">%&gt;%</span>
-<span class="st">  </span><span class="kw">add_markers</span>(<span class="dt">color =</span> <span class="op">~</span>continent, <span class="dt">alpha =</span> <span class="fl">0.2</span>, <span class="dt">showlegend =</span> F) <span class="op">%&gt;%</span>
+<span class="st">  </span><span class="kw">add_markers</span>(<span class="dt">color =</span> <span class="op">~</span>continent, <span class="dt">alpha =</span> <span class="fl">0.2</span>, <span class="dt">alpha_stroke =</span> <span class="fl">0.2</span>, <span class="dt">showlegend =</span> F) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">add_markers</span>(<span class="dt">color =</span> <span class="op">~</span>continent, <span class="dt">frame =</span> <span class="op">~</span>year, <span class="dt">ids =</span> <span class="op">~</span>country) <span class="op">%&gt;%</span>
 <span class="st">  </span><span class="kw">animation_opts</span>(<span class="dv">1000</span>, <span class="dt">redraw =</span> <span class="ot">FALSE</span>)</code></pre>
 <div class="figure" style="text-align: center"><span id="fig:animation-targets"></span>
-<img src="images/animation-targets.png" alt="Overlaying animated frames on top of a background of all possible frames." width="100%" />
+<img src="images/animation-targets.png" alt="Overlaying animated frames on top of a background of all possible frames." width="100%" data-url="/interactives/animation-targets.html" />
 <p class="caption">
 FIGURE 14.4: Overlaying animated frames on top of a background of all possible frames.
 </p>

docs/arranging-views.html

@@ -351,7 +351,7 @@ <h2><span class="header-section-number">13.1</span> Arranging plotly objects</h2
 <span class="st">  </span><span class="kw">add_lines</span>(<span class="dt">name =</span> <span class="st">&quot;uempmed&quot;</span>)
 <span class="kw">subplot</span>(p1, p2)</code></pre>
 <div class="figure" style="text-align: center"><span id="fig:subplot-simple"></span>
-<img src="images/subplot-simple.svg" alt="The most basic use of subplot() to merge multiple plotly objects into a single plotly object." width="100%" />
+<img src="images/subplot-simple.svg" alt="The most basic use of subplot() to merge multiple plotly objects into a single plotly object." width="100%" data-url="/interactives/subplot-simple.html" />
 <p class="caption">
 FIGURE 13.1: The most basic use of <code>subplot()</code> to merge multiple plotly objects into a single plotly object.
 </p>
@@ -364,7 +364,7 @@ <h2><span class="header-section-number">13.1</span> Arranging plotly objects</h2
 })
 <span class="kw">subplot</span>(plots, <span class="dt">nrows =</span> <span class="kw">length</span>(plots), <span class="dt">shareX =</span> <span class="ot">TRUE</span>, <span class="dt">titleX =</span> <span class="ot">FALSE</span>)</code></pre>
 <div class="figure" style="text-align: center"><span id="fig:economics"></span>
-<img src="images/economics.svg" alt="Five different economic variables on different y scales and a common x scale. Zoom and pan events in the x-direction are synchronized across plots." width="100%" />
+<img src="images/economics.svg" alt="Five different economic variables on different y scales and a common x scale. Zoom and pan events in the x-direction are synchronized across plots." width="100%" data-url="/interactives/economics.html" />
 <p class="caption">
 FIGURE 13.2: Five different economic variables on different y scales and a common x scale. Zoom and pan events in the x-direction are synchronized across plots.
 </p>
@@ -395,7 +395,7 @@ <h2><span class="header-section-number">13.1</span> Arranging plotly objects</h2
 <span class="kw">layout</span>(s, <span class="dt">showlegend =</span> <span class="ot">FALSE</span>)</code></pre>
 </details>
 <div class="figure" style="text-align: center"><span id="fig:joint"></span>
-<img src="images/joint.svg" alt="A joint density plot with synchronized axes." width="100%" />
+<img src="images/joint.svg" alt="A joint density plot with synchronized axes." width="100%" data-url="/interactives/joint.html" />
 <p class="caption">
 FIGURE 13.4: A joint density plot with synchronized axes.
 </p>
@@ -416,7 +416,7 @@ <h3><span class="header-section-number">13.1.1</span> Recursive subplots</h3>
 )</code></pre>
 </details>
 <div class="figure" style="text-align: center"><span id="fig:recursive"></span>
-<img src="images/recursive.svg" alt="Recursive subplots." width="100%" />
+<img src="images/recursive.svg" alt="Recursive subplots." width="100%" data-url="/interactives/recursive.html" />
 <p class="caption">
 FIGURE 13.5: Recursive subplots.
 </p>
@@ -449,7 +449,7 @@ <h3><span class="header-section-number">13.1.1</span> Recursive subplots</h3>
 <span class="st">  </span><span class="kw">colorbar</span>(<span class="dt">y =</span> <span class="fl">0.5</span>)</code></pre>
 </details>
 <div class="figure" style="text-align: center"><span id="fig:map-subplot"></span>
-<img src="images/map-subplot.svg" alt="Multiple bar charts of US statistics by state in a subplot with a choropleth of population density." width="100%" />
+<img src="images/map-subplot.svg" alt="Multiple bar charts of US statistics by state in a subplot with a choropleth of population density." width="100%" data-url="/interactives/map-subplot.html" />
 <p class="caption">
 FIGURE 13.6: Multiple bar charts of US statistics by state in a subplot with a choropleth of population density.
 </p>
@@ -483,7 +483,7 @@ <h4><span class="header-section-number">13.1.2.2</span> Generalized pairs plot</
 <span class="co">#&gt; [1] &quot;gg&quot;  &quot;ggmatrix&quot;</span>
 <span class="kw">ggplotly</span>(pm)</code></pre>
 <div class="figure" style="text-align: center"><span id="fig:ggpairs"></span>
-<img src="images/ggpairs.svg" alt="A generalized pairs plot made via the ggpairs() function from the GGally package." width="100%" />
+<img src="images/ggpairs.svg" alt="A generalized pairs plot made via the ggpairs() function from the GGally package." width="100%" data-url="/interactives/ggpairs.html" />
 <p class="caption">
 FIGURE 13.8: A generalized pairs plot made via the <code>ggpairs()</code> function from the <strong>GGally</strong> package.
 </p>
@@ -533,7 +533,7 @@ <h4><span class="header-section-number">13.1.2.3</span> Trellis displays with <c
 <span class="st">  </span><span class="kw">subplot</span>(<span class="dt">nrows =</span> <span class="kw">NROW</span>(.), <span class="dt">shareX =</span> <span class="ot">TRUE</span>)</code></pre>
 </details>
 <div class="figure" style="text-align: center"><span id="fig:subplot-trellis"></span>
-<img src="images/subplot-trellis.svg" alt="Creating a trellis display with subplot()." width="100%" />
+<img src="images/subplot-trellis.svg" alt="Creating a trellis display with subplot()." width="100%" data-url="/interactives/subplot-trellis.html" />
 <p class="caption">
 FIGURE 13.9: Creating a trellis display with <code>subplot()</code>.
 </p>
@@ -588,7 +588,7 @@ <h3><span class="header-section-number">13.2.2</span> Bootstrap grid layout</h3>
   )
 )</code></pre>
 <div class="figure" style="text-align: center"><span id="fig:fluid"></span>
-<img src="images/fluid.png" alt="Arranging multiple htmlwidgets with fluidPage() from the shiny package." width="100%" />
+<img src="images/fluid.png" alt="Arranging multiple htmlwidgets with fluidPage() from the shiny package." width="100%" data-url="/interactives/fluid.html" />
 <p class="caption">
 FIGURE 13.12: Arranging multiple htmlwidgets with <code>fluidPage()</code> from the <strong>shiny</strong> package.
 </p>
@@ -611,7 +611,7 @@ <h3><span class="header-section-number">13.2.3</span> CSS flexbox</h3>
   <span class="kw">div</span>(p, <span class="dt">style =</span> <span class="st">&quot;width: 100%; border: solid;&quot;</span>)
 ))</code></pre>
 <div class="figure" style="text-align: center"><span id="fig:flexbox"></span>
-<img src="images/flexbox.png" alt="Arranging multiple htmlwidgets with CSS flexbox." width="100%" />
+<img src="images/flexbox.png" alt="Arranging multiple htmlwidgets with CSS flexbox." width="100%" data-url="/interactives/flexbox.html" />
 <p class="caption">
 FIGURE 13.13: Arranging multiple htmlwidgets with CSS flexbox.
 </p>
@@ -639,7 +639,7 @@ <h2><span class="header-section-number">13.3</span> Arranging many views</h2>
 <div class="figure" style="text-align: center"><span id="fig:trelliscope"></span>
 <iframe src="https://player.vimeo.com/video/325778067?title=0&amp;byline=0&amp;portrait=0" width="100%" height="400" frameborder="0" seamless="seamless" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
 <p class="caption">
-FIGURE 13.14: Using <strong>trelliscopejs</strong> to surface high-dimensional insights related to life expectancy and GDP per capita in various countries. For the interactive, see <a href="https://plotly-r.com/interactives/trelliscope.html" class="uri">https://plotly-r.com/interactives/trelliscope.html</a>
+FIGURE 13.14: Using <strong>trelliscopejs</strong> to surface high-dimensional insights related to life expectancy and GDP per capita in various countries. For the interactive, see <a href="https://plotly-r.com/interactives/trelliscope" class="uri">https://plotly-r.com/interactives/trelliscope</a>
 </p>
 </div>