class: center, middle, inverse, title-slide # RaukR presentation demo ## RaukR 2021 • Advanced R for Bioinformatics ### <b>Roy Francis</b> ### NBIS, SciLifeLab --- exclude: true count: false <link href="https://fonts.googleapis.com/css?family=Roboto|Source+Sans+Pro:300,400,600|Ubuntu+Mono&subset=latin-ext" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <!-- ----------------- Only edit title & author above this ----------------- --> --- name: content class: spaced ## Contents * [RMarkdown](#intro_rmarkdown) * [Slides](#slides) * [Layout](#layout) * [Text formatting](#text_formatting_1) * [Code formatting](#code) * [Lists](#lists) * [Images](#images_markdown) * [Math expressions](#math) * [Tables](#table_kable) * [Static plots](#plot_static_base) * [Interactive plots](#plot_interactive_highcharter) * [Maps](#plot_interactive_leaflet) * [Crosstalk](#plot_interactive_crosstalk) * [General tips](#tips) --- name: intro class: middle, spaced ## Introduction <div class="abstract"> .medium[This is a demo to showcase the __RaukR presentation design guide__, __usage__ and capabilities of this presentation system. This presentation is created in RStudio using R package __[xaringan](https://github.com/yihui/xaringan)__. This package in turn utilises the javascript library __[remarkjs](https://github.com/yihui/xaringan)__ as the underlying framework. Note that the markdown interpreter used by remarkjs (blackfriday) is different from that used by knitr (pandoc). Therefore, some features that you may be familiar with in regular RMarkdown may not work here. There are also many new features here not available in regular RMarkdown.] .medium[Note that many of the classes used in this presentation are custom built and not part of any standard package.] </div> --- name: intro_rmarkdown ## RMarkdown * This is an RMarkdown presentation. * Markdown is a simple formatting syntax for authoring documents exported to HTML, PDF etc. * In RStudio, you create a `.Rmd` text file. * Add YAML matter to the top if not already there. ``` --- title: "This is a title" output: xaringan::moon_reader --- ``` * Click the **Knit** button for interactive render. * Or using `render()` as such: ```r rmarkdown::render("report.Rmd",output_format="html_document") ``` --- name: slides ## Slides __Slide separators__ Slides are separated by `---`. Incremental content on same slide is separated by `--` like below. -- __Slide properties__ Slides can be named. ``` --- name: intro ``` and then hyperlinked from elsewhere. For eg: `go to [introduction](#intro)` displayed as go to [introduction](#intro). Custom classes can be defined for each slide. ``` --- class: spaced ``` Few default options are _spaced_ (increases line spacing), _middle_ (center aligns content vertically) and _center_ (center aligns content horizontally). Slides can be hidden using `exclude: true`. Slides can be dropped from page count using `count: false`. -- __Slide notes__ Any content below `???` on a slide are notes. This is only visible in presenter mode (by pressing __P__). -- __Keyboard shortcuts__ Press __H__ to view keyboard shorcuts. Pressing __C__ clones and creates two linked presentations. ??? Here are some slide notes. Press **P** again to exit presenter mode. --- name: layout ## Layout The slide content can be organised into columns which can be nested if needed. Classes for 30, 40, 50, 60 and 70 have been implemented for left and right. Note that the total width must sum to 100. ``` .pull-left-50[ <div style="background-color:#fdebd0">Left content</div> ] .pull-right-50[ <div style="background-color:#eaf2f8">Right content</div> .pull-left-60[ <div style="background-color:#d0ece7">Inner left content</div> ] .pull-right-40[ <div style="background-color:#f2d7d5">Inner right content</div> ] ] ``` .pull-left-50[ <div style="background-color:#fdebd0">Left content</div> ] .pull-right-50[ <div style="background-color:#eaf2f8">Right content</div> .pull-left-60[ <div style="background-color:#d0ece7">Inner left content</div> ] .pull-right-40[ <div style="background-color:#f2d7d5 ">Inner right content</div> ] ] --- name: layout-2 ## Custom Divs ``` <div class="abstract"> This is a special box. </div> ``` <div class="abstract"> This is a special box. </div> --- name: text_formatting_1 ## Text Formatting .pull-left-50[ Headings can be defined as shown below. ``` ## Level 2 heading ### Level 3 heading #### Level 4 heading ##### Level 5 heading ###### Level 6 heading ``` ## Level 2 heading ### Level 3 heading #### Level 4 heading ##### Level 5 heading ###### Level 6 heading Level 1 usage is not recommended. Use level 2 for slide titles. Use level 3 and below for other titles. ] .pull-right-50[ Six custom classes are defined for text scaling. ``` .largest[Largest text.] .larger[Larger text.] .large[Large text.] Normal text. .small[Small text] .smaller[Smaller text.] .smallest[Smallest text.] ``` .largest[Largest text.] .larger[Larger text.] .large[Large text.] Normal text. .small[Small text.] .smaller[Smaller text.] .smallest[Smallest text.] ] --- name: text_formatting_2 ## Text Formatting .pull-left-50[ Horizontal alignment of text can be adjusted as shown below. ``` .left[Left aligned text.] .center[Center aligned text.] .right[Right aligned text.] ``` .left[Left aligned text.] .center[Center aligned text.] .right[Right aligned text.] Indented quotes using `>` > This line is blockquoted Icons from [FontAwesome](https://fontawesome.com/v5.0.13/icons?d=gallery) can be displayed using the HTML `<i>` tag. Note that not all icons may work. `Here is a <i class='fa fa-calendar'></i> calendar and a <i class='fa fa-couch'></i> couch.` Here is a <i class='fa fa-calendar'></i> calendar and a <i class='fa fa-couch'></i> couch. ] .pull-right-50[ A horizontal line can be created using `***` *** `This is __Bold text__` This is __Bold text__ `This is _Italic text_` This is _Italic text_ `~~Strikethrough~~ text` ~~Strikethrough~~ text This is Subscript `H<sub>2</sub>O` displayed as H<sub>2</sub>O This is Superscript `2<sup>10</sup>` displayed as 2<sup>10</sup> `This is a [link](r-project.org)` This is a [link](r-project.org) ] --- name: code ## Code formatting .pull-left-50[ Code can be defined inline where `` `this` `` looks like `this`. R code can be executed inline `` `r Sys.Date()` `` producing 2022-04-13. Code can also be defined inside code blocks. <pre class="smaller"> ``` This is code ``` </pre> ``` This is code ``` R code is executed inside code blocks like this ```` ```{r} Sys.Date() ``` ```` which shows the code and output. ```r Sys.Date() ``` ``` ## [1] "2022-04-13" ``` The code and results can be hidden by `` ```{r,echo=FALSE,results='hide'}` ``. ] .pull-right-50[ ```r data(iris) head(iris[,1:2]) ``` ``` ## Sepal.Length Sepal.Width ## 1 5.1 3.5 ## 2 4.9 3.0 ## 3 4.7 3.2 ## 4 4.6 3.1 ## 5 5.0 3.6 ## 6 5.4 3.9 ``` ] --- name: lists ## Lists __Bulleted List__ Bullet points are defined using the asterisk (*). ``` ** Bullet 1 ** Bullet 2 + Sub-bullet 2.1 ``` * Bullet 1 * Bullet 2 + Sub-bullet 2.1 -- __Incremental Bullets__ ``` ** Incremental Bullet 1 -- ** Incremental Bullet 2 -- ** Incremental Bullet 3 ``` Note that there is an empty line between the bullet point and the `--` below. -- * Incremental Bullet 1 -- * Incremental Bullet 2 -- * Incremental Bullet 3 --- name: images_markdown ## Images • Markdown __Using Markdown__ .pull-left-50[ Using regular markdown. ```  ```  The dimensions are based on image and/or fill up the entire available space. You have no control over the displayed dimensions. ] .pull-right[ Custom classes can be used to control size. ``` .size-20[] .size-10[] ``` .size-20[] .size-10[] The number denotes % of the original dimension. The following size classes are implemented: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95. ] --- name: images_html ## Images • HTML __Using Raw HTML__ This image is 30% size. `<img src="assets/cover.jpg" style="width:30%;"/>` <img src="assets/cover.jpg" style="width:30%;"/> This image is 30% size, has shadow and corners rounded. `<img src="assets/cover.jpg" style="width:30%;" class="fancyimage"/>` <img src="assets/cover.jpg" style="width:30%;" class="fancyimage"/> --- name: images_r ## Images • R __Using R__ R chunks in RMarkdown can be used to control image display size using the arguemnt `out.width`. This image is displayed at a size of 200 pixels. ```` ```{r,out.width=200} knitr::include_graphics('assets/cover.jpg') ``` ```` <img src="assets/cover.jpg" width="200" style="display: block; margin: auto auto auto 0;" /> This image is displayed at a size of 75 pixels. ```` ```{r,out.width=75} knitr::include_graphics('assets/cover.jpg') ``` ```` <img src="assets/cover.jpg" width="75" style="display: block; margin: auto auto auto 0;" /> --- name: math ## Math expressions Some examples of rendering equations. .pull-left-40[ `\(e^{i\pi} + 1 = 0\)` `$$\frac{E \times X^2 \prod I}{2+7} = 432$$` `$$\sum_{i=1}^n X_i$$` `$$\int_0^{2\pi} \sin x~dx$$` ] .pull-right-60[ `\(\left( \sum_{i=1}^{n}{i} \right)^2 = \left( \frac{n(n-1)}{2}\right)^2 = \frac{n^2(n-1)^2}{4}\)` `\(\begin{eqnarray} X & \sim & \mathrm{N}(0,1)\\ Y & \sim & \chi^2_{n-p}\\ R & \equiv & X/Y \sim t_{n-p} \end{eqnarray}\)` ] `\(\begin{eqnarray} P(|X-\mu| > k) & = & P(|X-\mu|^2 > k^2)\\ & \leq & \frac{\mathbb{E}\left[|X-\mu|^2\right]}{k^2}\\ & \leq & \frac{\mathrm{Var}[X]}{k^2} \end{eqnarray}\)` --- name: table_kable ## Tables • `kable` The most simple table using `kable` from R package `knitr`. ```r knitr::kable(head(iris),'html') ``` <table> <thead> <tr> <th style="text-align:right;"> Sepal.Length </th> <th style="text-align:right;"> Sepal.Width </th> <th style="text-align:right;"> Petal.Length </th> <th style="text-align:right;"> Petal.Width </th> <th style="text-align:left;"> Species </th> </tr> </thead> <tbody> <tr> <td style="text-align:right;"> 5.1 </td> <td style="text-align:right;"> 3.5 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.9 </td> <td style="text-align:right;"> 3.0 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.7 </td> <td style="text-align:right;"> 3.2 </td> <td style="text-align:right;"> 1.3 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.6 </td> <td style="text-align:right;"> 3.1 </td> <td style="text-align:right;"> 1.5 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 5.0 </td> <td style="text-align:right;"> 3.6 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 5.4 </td> <td style="text-align:right;"> 3.9 </td> <td style="text-align:right;"> 1.7 </td> <td style="text-align:right;"> 0.4 </td> <td style="text-align:left;"> setosa </td> </tr> </tbody> </table> --- name: table_kableextra ## Tables • `kableExtra` More advanced table using [`kableExtra`](https://cran.r-project.org/web/packages/kableExtra/vignettes/awesome_table_in_html.html) and [`formattable`](https://cran.r-project.org/web/packages/formattable/vignettes/formattable-data-frame.html). ```r iris[c(1:4,51:53,105:108),] %>% mutate(Sepal.Length=color_bar("lightsteelblue")(Sepal.Length)) %>% mutate(Sepal.Width=color_tile("white","orange")(Sepal.Width)) %>% mutate(Species=cell_spec(Species,"html",color="white",bold=T, background=c("#8dd3c7","#fb8072","#bebada")[factor(.$Species)])) %>% kable("html",escape=F) %>% kable_styling(bootstrap_options=c("striped","hover","responsive"), full_width=F,position="left") %>% column_spec(5,width="3cm") ``` <table class="table table-striped table-hover table-responsive" style="width: auto !important; "> <thead> <tr> <th style="text-align:left;"> </th> <th style="text-align:left;"> Sepal.Length </th> <th style="text-align:left;"> Sepal.Width </th> <th style="text-align:right;"> Petal.Length </th> <th style="text-align:right;"> Petal.Width </th> <th style="text-align:left;"> Species </th> </tr> </thead> <tbody> <tr> <td style="text-align:left;"> 1 </td> <td style="text-align:left;"> <span style="display: inline-block; direction: rtl; unicode-bidi: plaintext; border-radius: 4px; padding-right: 2px; background-color: lightsteelblue; width: 67.11%">5.1</span> </td> <td style="text-align:left;"> <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffa500">3.5</span> </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;width: 3cm; "> 0.2 </td> <td style="text-align:left;"> <span style=" font-weight: bold; color: white !important;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #8dd3c7 !important;">setosa</span> </td> </tr> <tr> <td style="text-align:left;"> 2 </td> <td style="text-align:left;"> <span style="display: inline-block; direction: rtl; unicode-bidi: plaintext; border-radius: 4px; padding-right: 2px; background-color: lightsteelblue; width: 64.47%">4.9</span> </td> <td style="text-align:left;"> <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffd27f">3.0</span> </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;width: 3cm; "> 0.2 </td> <td style="text-align:left;"> <span style=" font-weight: bold; color: white !important;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #8dd3c7 !important;">setosa</span> </td> </tr> <tr> <td style="text-align:left;"> 3 </td> <td style="text-align:left;"> <span style="display: inline-block; direction: rtl; unicode-bidi: plaintext; border-radius: 4px; padding-right: 2px; background-color: lightsteelblue; width: 61.84%">4.7</span> </td> <td style="text-align:left;"> <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc04c">3.2</span> </td> <td style="text-align:right;"> 1.3 </td> <td style="text-align:right;width: 3cm; "> 0.2 </td> <td style="text-align:left;"> <span style=" font-weight: bold; color: white !important;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #8dd3c7 !important;">setosa</span> </td> </tr> <tr> <td style="text-align:left;"> 4 </td> <td style="text-align:left;"> <span style="display: inline-block; direction: rtl; unicode-bidi: plaintext; border-radius: 4px; padding-right: 2px; background-color: lightsteelblue; width: 60.53%">4.6</span> </td> <td style="text-align:left;"> <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc965">3.1</span> </td> <td style="text-align:right;"> 1.5 </td> <td style="text-align:right;width: 3cm; "> 0.2 </td> <td style="text-align:left;"> <span style=" font-weight: bold; color: white !important;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #8dd3c7 !important;">setosa</span> </td> </tr> <tr> <td style="text-align:left;"> 51 </td> <td style="text-align:left;"> <span style="display: inline-block; direction: rtl; unicode-bidi: plaintext; border-radius: 4px; padding-right: 2px; background-color: lightsteelblue; width: 92.11%">7.0</span> </td> <td style="text-align:left;"> <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc04c">3.2</span> </td> <td style="text-align:right;"> 4.7 </td> <td style="text-align:right;width: 3cm; "> 1.4 </td> <td style="text-align:left;"> <span style=" font-weight: bold; color: white !important;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #fb8072 !important;">versicolor</span> </td> </tr> <tr> <td style="text-align:left;"> 52 </td> <td style="text-align:left;"> <span style="display: inline-block; direction: rtl; unicode-bidi: plaintext; border-radius: 4px; padding-right: 2px; background-color: lightsteelblue; width: 84.21%">6.4</span> </td> <td style="text-align:left;"> <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc04c">3.2</span> </td> <td style="text-align:right;"> 4.5 </td> <td style="text-align:right;width: 3cm; "> 1.5 </td> <td style="text-align:left;"> <span style=" font-weight: bold; color: white !important;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #fb8072 !important;">versicolor</span> </td> </tr> <tr> <td style="text-align:left;"> 53 </td> <td style="text-align:left;"> <span style="display: inline-block; direction: rtl; unicode-bidi: plaintext; border-radius: 4px; padding-right: 2px; background-color: lightsteelblue; width: 90.79%">6.9</span> </td> <td style="text-align:left;"> <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc965">3.1</span> </td> <td style="text-align:right;"> 4.9 </td> <td style="text-align:right;width: 3cm; "> 1.5 </td> <td style="text-align:left;"> <span style=" font-weight: bold; color: white !important;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #fb8072 !important;">versicolor</span> </td> </tr> <tr> <td style="text-align:left;"> 105 </td> <td style="text-align:left;"> <span style="display: inline-block; direction: rtl; unicode-bidi: plaintext; border-radius: 4px; padding-right: 2px; background-color: lightsteelblue; width: 85.53%">6.5</span> </td> <td style="text-align:left;"> <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffd27f">3.0</span> </td> <td style="text-align:right;"> 5.8 </td> <td style="text-align:right;width: 3cm; "> 2.2 </td> <td style="text-align:left;"> <span style=" font-weight: bold; color: white !important;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #bebada !important;">virginica</span> </td> </tr> <tr> <td style="text-align:left;"> 106 </td> <td style="text-align:left;"> <span style="display: inline-block; direction: rtl; unicode-bidi: plaintext; border-radius: 4px; padding-right: 2px; background-color: lightsteelblue; width: 100.00%">7.6</span> </td> <td style="text-align:left;"> <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffd27f">3.0</span> </td> <td style="text-align:right;"> 6.6 </td> <td style="text-align:right;width: 3cm; "> 2.1 </td> <td style="text-align:left;"> <span style=" font-weight: bold; color: white !important;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #bebada !important;">virginica</span> </td> </tr> <tr> <td style="text-align:left;"> 107 </td> <td style="text-align:left;"> <span style="display: inline-block; direction: rtl; unicode-bidi: plaintext; border-radius: 4px; padding-right: 2px; background-color: lightsteelblue; width: 64.47%">4.9</span> </td> <td style="text-align:left;"> <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffffff">2.5</span> </td> <td style="text-align:right;"> 4.5 </td> <td style="text-align:right;width: 3cm; "> 1.7 </td> <td style="text-align:left;"> <span style=" font-weight: bold; color: white !important;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #bebada !important;">virginica</span> </td> </tr> <tr> <td style="text-align:left;"> 108 </td> <td style="text-align:left;"> <span style="display: inline-block; direction: rtl; unicode-bidi: plaintext; border-radius: 4px; padding-right: 2px; background-color: lightsteelblue; width: 96.05%">7.3</span> </td> <td style="text-align:left;"> <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffdb99">2.9</span> </td> <td style="text-align:right;"> 6.3 </td> <td style="text-align:right;width: 3cm; "> 1.8 </td> <td style="text-align:left;"> <span style=" font-weight: bold; color: white !important;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #bebada !important;">virginica</span> </td> </tr> </tbody> </table> --- name: table_dt ## Tables • `DT` Interactive table using R package [`DT`](https://rstudio.github.io/DT/). ```r library(DT) DT::datatable(iris[1:20,],options=list(pageLength=7)) ``` <div id="htmlwidget-d3f43a11134fd69a244c" style="width:100%;height:auto;" class="datatables html-widget"></div> <script type="application/json" data-for="htmlwidget-d3f43a11134fd69a244c">{"x":{"filter":"none","vertical":false,"data":[["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"],[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1],[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8],[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5],[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3],["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th> <\/th>\n <th>Sepal.Length<\/th>\n <th>Sepal.Width<\/th>\n <th>Petal.Length<\/th>\n <th>Petal.Width<\/th>\n <th>Species<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"pageLength":7,"columnDefs":[{"className":"dt-right","targets":[1,2,3,4]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[7,10,25,50,100]}},"evals":[],"jsHooks":[]}</script> --- name: plot_static_base ## Static plots • Base Plot Plots using base R are widely used and may be good enough for most situations. But they lack a consistent coding framework. ```r {par(mar=c(5,5,0,0)) plot(x=iris$Sepal.Length,y=iris$Sepal.Width, col=c("coral","steelblue","forestgreen")[iris$Species], xlab="Sepal Length",ylab="Sepal Width",pch=19) legend(x=7,y=4.47,legend=c("setosa","versicolor","virginica"), col=c("coral","steelblue","forestgreen"),pch=19)} ``` <img src="presentation-demo_files/figure-html/unnamed-chunk-14-1.png" width="360" style="display: block; margin: auto auto auto 0;" /> --- name: plot_static_ggplot ## Static plots • `ggplot2` R package [`ggplot2`](http://ggplot2.org/) is a versatile and almost complete plotting solution. ```r iris %>% ggplot(aes(x=Sepal.Length,y=Sepal.Width,col=Species))+ geom_point(size=2)+ labs(x="Sepal Length",y="Sepal Width")+ theme_bw(base_size=18) ``` <img src="presentation-demo_files/figure-html/unnamed-chunk-15-1.png" width="432" style="display: block; margin: auto auto auto 0;" /> --- name: plot_interactive_highcharter ## Interactive plots • `highcharter` R package [`highcharter`](http://jkunst.com/highcharter/) is a wrapper around javascript library [`highcharts`](https://www.highcharts.com/). ```r library(highcharter) h <- iris %>% hchart("scatter",hcaes(x="Sepal.Length",y="Sepal.Width",group="Species")) %>% hc_xAxis(title=list(text="Sepal Length"),crosshair=TRUE) %>% hc_yAxis(title=list(text="Sepal Width"),crosshair=TRUE) %>% hc_chart(zoomType="xy",inverted=FALSE) %>% hc_legend(verticalAlign="top",align="right") %>% hc_size(height=350) htmltools::tagList(list(h)) ``` <div id="htmlwidget-65d666d5a9f0b154ff81" style="width:100%;height:350px;" class="highchart html-widget"></div> <script type="application/json" data-for="htmlwidget-65d666d5a9f0b154ff81">{"x":{"hc_opts":{"chart":{"reflow":true,"zoomType":"xy","inverted":false,"height":350},"title":{"text":null},"yAxis":{"title":{"text":"Sepal Width"},"type":"linear","crosshair":true},"credits":{"enabled":false},"exporting":{"enabled":false},"boost":{"enabled":false},"plotOptions":{"series":{"label":{"enabled":false},"turboThreshold":0,"showInLegend":true},"treemap":{"layoutAlgorithm":"squarified"},"scatter":{"marker":{"symbol":"circle"}}},"series":[{"name":"setosa","data":[{"Sepal.Length":5.1,"Sepal.Width":3.5,"Petal.Length":1.4,"Petal.Width":0.2,"Species":"setosa","x":5.1,"y":3.5},{"Sepal.Length":4.9,"Sepal.Width":3,"Petal.Length":1.4,"Petal.Width":0.2,"Species":"setosa","x":4.9,"y":3},{"Sepal.Length":4.7,"Sepal.Width":3.2,"Petal.Length":1.3,"Petal.Width":0.2,"Species":"setosa","x":4.7,"y":3.2},{"Sepal.Length":4.6,"Sepal.Width":3.1,"Petal.Length":1.5,"Petal.Width":0.2,"Species":"setosa","x":4.6,"y":3.1},{"Sepal.Length":5,"Sepal.Width":3.6,"Petal.Length":1.4,"Petal.Width":0.2,"Species":"setosa","x":5,"y":3.6},{"Sepal.Length":5.4,"Sepal.Width":3.9,"Petal.Length":1.7,"Petal.Width":0.4,"Species":"setosa","x":5.4,"y":3.9},{"Sepal.Length":4.6,"Sepal.Width":3.4,"Petal.Length":1.4,"Petal.Width":0.3,"Species":"setosa","x":4.6,"y":3.4},{"Sepal.Length":5,"Sepal.Width":3.4,"Petal.Length":1.5,"Petal.Width":0.2,"Species":"setosa","x":5,"y":3.4},{"Sepal.Length":4.4,"Sepal.Width":2.9,"Petal.Length":1.4,"Petal.Width":0.2,"Species":"setosa","x":4.4,"y":2.9},{"Sepal.Length":4.9,"Sepal.Width":3.1,"Petal.Length":1.5,"Petal.Width":0.1,"Species":"setosa","x":4.9,"y":3.1},{"Sepal.Length":5.4,"Sepal.Width":3.7,"Petal.Length":1.5,"Petal.Width":0.2,"Species":"setosa","x":5.4,"y":3.7},{"Sepal.Length":4.8,"Sepal.Width":3.4,"Petal.Length":1.6,"Petal.Width":0.2,"Species":"setosa","x":4.8,"y":3.4},{"Sepal.Length":4.8,"Sepal.Width":3,"Petal.Length":1.4,"Petal.Width":0.1,"Species":"setosa","x":4.8,"y":3},{"Sepal.Length":4.3,"Sepal.Width":3,"Petal.Length":1.1,"Petal.Width":0.1,"Species":"setosa","x":4.3,"y":3},{"Sepal.Length":5.8,"Sepal.Width":4,"Petal.Length":1.2,"Petal.Width":0.2,"Species":"setosa","x":5.8,"y":4},{"Sepal.Length":5.7,"Sepal.Width":4.4,"Petal.Length":1.5,"Petal.Width":0.4,"Species":"setosa","x":5.7,"y":4.4},{"Sepal.Length":5.4,"Sepal.Width":3.9,"Petal.Length":1.3,"Petal.Width":0.4,"Species":"setosa","x":5.4,"y":3.9},{"Sepal.Length":5.1,"Sepal.Width":3.5,"Petal.Length":1.4,"Petal.Width":0.3,"Species":"setosa","x":5.1,"y":3.5},{"Sepal.Length":5.7,"Sepal.Width":3.8,"Petal.Length":1.7,"Petal.Width":0.3,"Species":"setosa","x":5.7,"y":3.8},{"Sepal.Length":5.1,"Sepal.Width":3.8,"Petal.Length":1.5,"Petal.Width":0.3,"Species":"setosa","x":5.1,"y":3.8},{"Sepal.Length":5.4,"Sepal.Width":3.4,"Petal.Length":1.7,"Petal.Width":0.2,"Species":"setosa","x":5.4,"y":3.4},{"Sepal.Length":5.1,"Sepal.Width":3.7,"Petal.Length":1.5,"Petal.Width":0.4,"Species":"setosa","x":5.1,"y":3.7},{"Sepal.Length":4.6,"Sepal.Width":3.6,"Petal.Length":1,"Petal.Width":0.2,"Species":"setosa","x":4.6,"y":3.6},{"Sepal.Length":5.1,"Sepal.Width":3.3,"Petal.Length":1.7,"Petal.Width":0.5,"Species":"setosa","x":5.1,"y":3.3},{"Sepal.Length":4.8,"Sepal.Width":3.4,"Petal.Length":1.9,"Petal.Width":0.2,"Species":"setosa","x":4.8,"y":3.4},{"Sepal.Length":5,"Sepal.Width":3,"Petal.Length":1.6,"Petal.Width":0.2,"Species":"setosa","x":5,"y":3},{"Sepal.Length":5,"Sepal.Width":3.4,"Petal.Length":1.6,"Petal.Width":0.4,"Species":"setosa","x":5,"y":3.4},{"Sepal.Length":5.2,"Sepal.Width":3.5,"Petal.Length":1.5,"Petal.Width":0.2,"Species":"setosa","x":5.2,"y":3.5},{"Sepal.Length":5.2,"Sepal.Width":3.4,"Petal.Length":1.4,"Petal.Width":0.2,"Species":"setosa","x":5.2,"y":3.4},{"Sepal.Length":4.7,"Sepal.Width":3.2,"Petal.Length":1.6,"Petal.Width":0.2,"Species":"setosa","x":4.7,"y":3.2},{"Sepal.Length":4.8,"Sepal.Width":3.1,"Petal.Length":1.6,"Petal.Width":0.2,"Species":"setosa","x":4.8,"y":3.1},{"Sepal.Length":5.4,"Sepal.Width":3.4,"Petal.Length":1.5,"Petal.Width":0.4,"Species":"setosa","x":5.4,"y":3.4},{"Sepal.Length":5.2,"Sepal.Width":4.1,"Petal.Length":1.5,"Petal.Width":0.1,"Species":"setosa","x":5.2,"y":4.1},{"Sepal.Length":5.5,"Sepal.Width":4.2,"Petal.Length":1.4,"Petal.Width":0.2,"Species":"setosa","x":5.5,"y":4.2},{"Sepal.Length":4.9,"Sepal.Width":3.1,"Petal.Length":1.5,"Petal.Width":0.2,"Species":"setosa","x":4.9,"y":3.1},{"Sepal.Length":5,"Sepal.Width":3.2,"Petal.Length":1.2,"Petal.Width":0.2,"Species":"setosa","x":5,"y":3.2},{"Sepal.Length":5.5,"Sepal.Width":3.5,"Petal.Length":1.3,"Petal.Width":0.2,"Species":"setosa","x":5.5,"y":3.5},{"Sepal.Length":4.9,"Sepal.Width":3.6,"Petal.Length":1.4,"Petal.Width":0.1,"Species":"setosa","x":4.9,"y":3.6},{"Sepal.Length":4.4,"Sepal.Width":3,"Petal.Length":1.3,"Petal.Width":0.2,"Species":"setosa","x":4.4,"y":3},{"Sepal.Length":5.1,"Sepal.Width":3.4,"Petal.Length":1.5,"Petal.Width":0.2,"Species":"setosa","x":5.1,"y":3.4},{"Sepal.Length":5,"Sepal.Width":3.5,"Petal.Length":1.3,"Petal.Width":0.3,"Species":"setosa","x":5,"y":3.5},{"Sepal.Length":4.5,"Sepal.Width":2.3,"Petal.Length":1.3,"Petal.Width":0.3,"Species":"setosa","x":4.5,"y":2.3},{"Sepal.Length":4.4,"Sepal.Width":3.2,"Petal.Length":1.3,"Petal.Width":0.2,"Species":"setosa","x":4.4,"y":3.2},{"Sepal.Length":5,"Sepal.Width":3.5,"Petal.Length":1.6,"Petal.Width":0.6,"Species":"setosa","x":5,"y":3.5},{"Sepal.Length":5.1,"Sepal.Width":3.8,"Petal.Length":1.9,"Petal.Width":0.4,"Species":"setosa","x":5.1,"y":3.8},{"Sepal.Length":4.8,"Sepal.Width":3,"Petal.Length":1.4,"Petal.Width":0.3,"Species":"setosa","x":4.8,"y":3},{"Sepal.Length":5.1,"Sepal.Width":3.8,"Petal.Length":1.6,"Petal.Width":0.2,"Species":"setosa","x":5.1,"y":3.8},{"Sepal.Length":4.6,"Sepal.Width":3.2,"Petal.Length":1.4,"Petal.Width":0.2,"Species":"setosa","x":4.6,"y":3.2},{"Sepal.Length":5.3,"Sepal.Width":3.7,"Petal.Length":1.5,"Petal.Width":0.2,"Species":"setosa","x":5.3,"y":3.7},{"Sepal.Length":5,"Sepal.Width":3.3,"Petal.Length":1.4,"Petal.Width":0.2,"Species":"setosa","x":5,"y":3.3}],"type":"scatter"},{"name":"versicolor","data":[{"Sepal.Length":7,"Sepal.Width":3.2,"Petal.Length":4.7,"Petal.Width":1.4,"Species":"versicolor","x":7,"y":3.2},{"Sepal.Length":6.4,"Sepal.Width":3.2,"Petal.Length":4.5,"Petal.Width":1.5,"Species":"versicolor","x":6.4,"y":3.2},{"Sepal.Length":6.9,"Sepal.Width":3.1,"Petal.Length":4.9,"Petal.Width":1.5,"Species":"versicolor","x":6.9,"y":3.1},{"Sepal.Length":5.5,"Sepal.Width":2.3,"Petal.Length":4,"Petal.Width":1.3,"Species":"versicolor","x":5.5,"y":2.3},{"Sepal.Length":6.5,"Sepal.Width":2.8,"Petal.Length":4.6,"Petal.Width":1.5,"Species":"versicolor","x":6.5,"y":2.8},{"Sepal.Length":5.7,"Sepal.Width":2.8,"Petal.Length":4.5,"Petal.Width":1.3,"Species":"versicolor","x":5.7,"y":2.8},{"Sepal.Length":6.3,"Sepal.Width":3.3,"Petal.Length":4.7,"Petal.Width":1.6,"Species":"versicolor","x":6.3,"y":3.3},{"Sepal.Length":4.9,"Sepal.Width":2.4,"Petal.Length":3.3,"Petal.Width":1,"Species":"versicolor","x":4.9,"y":2.4},{"Sepal.Length":6.6,"Sepal.Width":2.9,"Petal.Length":4.6,"Petal.Width":1.3,"Species":"versicolor","x":6.6,"y":2.9},{"Sepal.Length":5.2,"Sepal.Width":2.7,"Petal.Length":3.9,"Petal.Width":1.4,"Species":"versicolor","x":5.2,"y":2.7},{"Sepal.Length":5,"Sepal.Width":2,"Petal.Length":3.5,"Petal.Width":1,"Species":"versicolor","x":5,"y":2},{"Sepal.Length":5.9,"Sepal.Width":3,"Petal.Length":4.2,"Petal.Width":1.5,"Species":"versicolor","x":5.9,"y":3},{"Sepal.Length":6,"Sepal.Width":2.2,"Petal.Length":4,"Petal.Width":1,"Species":"versicolor","x":6,"y":2.2},{"Sepal.Length":6.1,"Sepal.Width":2.9,"Petal.Length":4.7,"Petal.Width":1.4,"Species":"versicolor","x":6.1,"y":2.9},{"Sepal.Length":5.6,"Sepal.Width":2.9,"Petal.Length":3.6,"Petal.Width":1.3,"Species":"versicolor","x":5.6,"y":2.9},{"Sepal.Length":6.7,"Sepal.Width":3.1,"Petal.Length":4.4,"Petal.Width":1.4,"Species":"versicolor","x":6.7,"y":3.1},{"Sepal.Length":5.6,"Sepal.Width":3,"Petal.Length":4.5,"Petal.Width":1.5,"Species":"versicolor","x":5.6,"y":3},{"Sepal.Length":5.8,"Sepal.Width":2.7,"Petal.Length":4.1,"Petal.Width":1,"Species":"versicolor","x":5.8,"y":2.7},{"Sepal.Length":6.2,"Sepal.Width":2.2,"Petal.Length":4.5,"Petal.Width":1.5,"Species":"versicolor","x":6.2,"y":2.2},{"Sepal.Length":5.6,"Sepal.Width":2.5,"Petal.Length":3.9,"Petal.Width":1.1,"Species":"versicolor","x":5.6,"y":2.5},{"Sepal.Length":5.9,"Sepal.Width":3.2,"Petal.Length":4.8,"Petal.Width":1.8,"Species":"versicolor","x":5.9,"y":3.2},{"Sepal.Length":6.1,"Sepal.Width":2.8,"Petal.Length":4,"Petal.Width":1.3,"Species":"versicolor","x":6.1,"y":2.8},{"Sepal.Length":6.3,"Sepal.Width":2.5,"Petal.Length":4.9,"Petal.Width":1.5,"Species":"versicolor","x":6.3,"y":2.5},{"Sepal.Length":6.1,"Sepal.Width":2.8,"Petal.Length":4.7,"Petal.Width":1.2,"Species":"versicolor","x":6.1,"y":2.8},{"Sepal.Length":6.4,"Sepal.Width":2.9,"Petal.Length":4.3,"Petal.Width":1.3,"Species":"versicolor","x":6.4,"y":2.9},{"Sepal.Length":6.6,"Sepal.Width":3,"Petal.Length":4.4,"Petal.Width":1.4,"Species":"versicolor","x":6.6,"y":3},{"Sepal.Length":6.8,"Sepal.Width":2.8,"Petal.Length":4.8,"Petal.Width":1.4,"Species":"versicolor","x":6.8,"y":2.8},{"Sepal.Length":6.7,"Sepal.Width":3,"Petal.Length":5,"Petal.Width":1.7,"Species":"versicolor","x":6.7,"y":3},{"Sepal.Length":6,"Sepal.Width":2.9,"Petal.Length":4.5,"Petal.Width":1.5,"Species":"versicolor","x":6,"y":2.9},{"Sepal.Length":5.7,"Sepal.Width":2.6,"Petal.Length":3.5,"Petal.Width":1,"Species":"versicolor","x":5.7,"y":2.6},{"Sepal.Length":5.5,"Sepal.Width":2.4,"Petal.Length":3.8,"Petal.Width":1.1,"Species":"versicolor","x":5.5,"y":2.4},{"Sepal.Length":5.5,"Sepal.Width":2.4,"Petal.Length":3.7,"Petal.Width":1,"Species":"versicolor","x":5.5,"y":2.4},{"Sepal.Length":5.8,"Sepal.Width":2.7,"Petal.Length":3.9,"Petal.Width":1.2,"Species":"versicolor","x":5.8,"y":2.7},{"Sepal.Length":6,"Sepal.Width":2.7,"Petal.Length":5.1,"Petal.Width":1.6,"Species":"versicolor","x":6,"y":2.7},{"Sepal.Length":5.4,"Sepal.Width":3,"Petal.Length":4.5,"Petal.Width":1.5,"Species":"versicolor","x":5.4,"y":3},{"Sepal.Length":6,"Sepal.Width":3.4,"Petal.Length":4.5,"Petal.Width":1.6,"Species":"versicolor","x":6,"y":3.4},{"Sepal.Length":6.7,"Sepal.Width":3.1,"Petal.Length":4.7,"Petal.Width":1.5,"Species":"versicolor","x":6.7,"y":3.1},{"Sepal.Length":6.3,"Sepal.Width":2.3,"Petal.Length":4.4,"Petal.Width":1.3,"Species":"versicolor","x":6.3,"y":2.3},{"Sepal.Length":5.6,"Sepal.Width":3,"Petal.Length":4.1,"Petal.Width":1.3,"Species":"versicolor","x":5.6,"y":3},{"Sepal.Length":5.5,"Sepal.Width":2.5,"Petal.Length":4,"Petal.Width":1.3,"Species":"versicolor","x":5.5,"y":2.5},{"Sepal.Length":5.5,"Sepal.Width":2.6,"Petal.Length":4.4,"Petal.Width":1.2,"Species":"versicolor","x":5.5,"y":2.6},{"Sepal.Length":6.1,"Sepal.Width":3,"Petal.Length":4.6,"Petal.Width":1.4,"Species":"versicolor","x":6.1,"y":3},{"Sepal.Length":5.8,"Sepal.Width":2.6,"Petal.Length":4,"Petal.Width":1.2,"Species":"versicolor","x":5.8,"y":2.6},{"Sepal.Length":5,"Sepal.Width":2.3,"Petal.Length":3.3,"Petal.Width":1,"Species":"versicolor","x":5,"y":2.3},{"Sepal.Length":5.6,"Sepal.Width":2.7,"Petal.Length":4.2,"Petal.Width":1.3,"Species":"versicolor","x":5.6,"y":2.7},{"Sepal.Length":5.7,"Sepal.Width":3,"Petal.Length":4.2,"Petal.Width":1.2,"Species":"versicolor","x":5.7,"y":3},{"Sepal.Length":5.7,"Sepal.Width":2.9,"Petal.Length":4.2,"Petal.Width":1.3,"Species":"versicolor","x":5.7,"y":2.9},{"Sepal.Length":6.2,"Sepal.Width":2.9,"Petal.Length":4.3,"Petal.Width":1.3,"Species":"versicolor","x":6.2,"y":2.9},{"Sepal.Length":5.1,"Sepal.Width":2.5,"Petal.Length":3,"Petal.Width":1.1,"Species":"versicolor","x":5.1,"y":2.5},{"Sepal.Length":5.7,"Sepal.Width":2.8,"Petal.Length":4.1,"Petal.Width":1.3,"Species":"versicolor","x":5.7,"y":2.8}],"type":"scatter"},{"name":"virginica","data":[{"Sepal.Length":6.3,"Sepal.Width":3.3,"Petal.Length":6,"Petal.Width":2.5,"Species":"virginica","x":6.3,"y":3.3},{"Sepal.Length":5.8,"Sepal.Width":2.7,"Petal.Length":5.1,"Petal.Width":1.9,"Species":"virginica","x":5.8,"y":2.7},{"Sepal.Length":7.1,"Sepal.Width":3,"Petal.Length":5.9,"Petal.Width":2.1,"Species":"virginica","x":7.1,"y":3},{"Sepal.Length":6.3,"Sepal.Width":2.9,"Petal.Length":5.6,"Petal.Width":1.8,"Species":"virginica","x":6.3,"y":2.9},{"Sepal.Length":6.5,"Sepal.Width":3,"Petal.Length":5.8,"Petal.Width":2.2,"Species":"virginica","x":6.5,"y":3},{"Sepal.Length":7.6,"Sepal.Width":3,"Petal.Length":6.6,"Petal.Width":2.1,"Species":"virginica","x":7.6,"y":3},{"Sepal.Length":4.9,"Sepal.Width":2.5,"Petal.Length":4.5,"Petal.Width":1.7,"Species":"virginica","x":4.9,"y":2.5},{"Sepal.Length":7.3,"Sepal.Width":2.9,"Petal.Length":6.3,"Petal.Width":1.8,"Species":"virginica","x":7.3,"y":2.9},{"Sepal.Length":6.7,"Sepal.Width":2.5,"Petal.Length":5.8,"Petal.Width":1.8,"Species":"virginica","x":6.7,"y":2.5},{"Sepal.Length":7.2,"Sepal.Width":3.6,"Petal.Length":6.1,"Petal.Width":2.5,"Species":"virginica","x":7.2,"y":3.6},{"Sepal.Length":6.5,"Sepal.Width":3.2,"Petal.Length":5.1,"Petal.Width":2,"Species":"virginica","x":6.5,"y":3.2},{"Sepal.Length":6.4,"Sepal.Width":2.7,"Petal.Length":5.3,"Petal.Width":1.9,"Species":"virginica","x":6.4,"y":2.7},{"Sepal.Length":6.8,"Sepal.Width":3,"Petal.Length":5.5,"Petal.Width":2.1,"Species":"virginica","x":6.8,"y":3},{"Sepal.Length":5.7,"Sepal.Width":2.5,"Petal.Length":5,"Petal.Width":2,"Species":"virginica","x":5.7,"y":2.5},{"Sepal.Length":5.8,"Sepal.Width":2.8,"Petal.Length":5.1,"Petal.Width":2.4,"Species":"virginica","x":5.8,"y":2.8},{"Sepal.Length":6.4,"Sepal.Width":3.2,"Petal.Length":5.3,"Petal.Width":2.3,"Species":"virginica","x":6.4,"y":3.2},{"Sepal.Length":6.5,"Sepal.Width":3,"Petal.Length":5.5,"Petal.Width":1.8,"Species":"virginica","x":6.5,"y":3},{"Sepal.Length":7.7,"Sepal.Width":3.8,"Petal.Length":6.7,"Petal.Width":2.2,"Species":"virginica","x":7.7,"y":3.8},{"Sepal.Length":7.7,"Sepal.Width":2.6,"Petal.Length":6.9,"Petal.Width":2.3,"Species":"virginica","x":7.7,"y":2.6},{"Sepal.Length":6,"Sepal.Width":2.2,"Petal.Length":5,"Petal.Width":1.5,"Species":"virginica","x":6,"y":2.2},{"Sepal.Length":6.9,"Sepal.Width":3.2,"Petal.Length":5.7,"Petal.Width":2.3,"Species":"virginica","x":6.9,"y":3.2},{"Sepal.Length":5.6,"Sepal.Width":2.8,"Petal.Length":4.9,"Petal.Width":2,"Species":"virginica","x":5.6,"y":2.8},{"Sepal.Length":7.7,"Sepal.Width":2.8,"Petal.Length":6.7,"Petal.Width":2,"Species":"virginica","x":7.7,"y":2.8},{"Sepal.Length":6.3,"Sepal.Width":2.7,"Petal.Length":4.9,"Petal.Width":1.8,"Species":"virginica","x":6.3,"y":2.7},{"Sepal.Length":6.7,"Sepal.Width":3.3,"Petal.Length":5.7,"Petal.Width":2.1,"Species":"virginica","x":6.7,"y":3.3},{"Sepal.Length":7.2,"Sepal.Width":3.2,"Petal.Length":6,"Petal.Width":1.8,"Species":"virginica","x":7.2,"y":3.2},{"Sepal.Length":6.2,"Sepal.Width":2.8,"Petal.Length":4.8,"Petal.Width":1.8,"Species":"virginica","x":6.2,"y":2.8},{"Sepal.Length":6.1,"Sepal.Width":3,"Petal.Length":4.9,"Petal.Width":1.8,"Species":"virginica","x":6.1,"y":3},{"Sepal.Length":6.4,"Sepal.Width":2.8,"Petal.Length":5.6,"Petal.Width":2.1,"Species":"virginica","x":6.4,"y":2.8},{"Sepal.Length":7.2,"Sepal.Width":3,"Petal.Length":5.8,"Petal.Width":1.6,"Species":"virginica","x":7.2,"y":3},{"Sepal.Length":7.4,"Sepal.Width":2.8,"Petal.Length":6.1,"Petal.Width":1.9,"Species":"virginica","x":7.4,"y":2.8},{"Sepal.Length":7.9,"Sepal.Width":3.8,"Petal.Length":6.4,"Petal.Width":2,"Species":"virginica","x":7.9,"y":3.8},{"Sepal.Length":6.4,"Sepal.Width":2.8,"Petal.Length":5.6,"Petal.Width":2.2,"Species":"virginica","x":6.4,"y":2.8},{"Sepal.Length":6.3,"Sepal.Width":2.8,"Petal.Length":5.1,"Petal.Width":1.5,"Species":"virginica","x":6.3,"y":2.8},{"Sepal.Length":6.1,"Sepal.Width":2.6,"Petal.Length":5.6,"Petal.Width":1.4,"Species":"virginica","x":6.1,"y":2.6},{"Sepal.Length":7.7,"Sepal.Width":3,"Petal.Length":6.1,"Petal.Width":2.3,"Species":"virginica","x":7.7,"y":3},{"Sepal.Length":6.3,"Sepal.Width":3.4,"Petal.Length":5.6,"Petal.Width":2.4,"Species":"virginica","x":6.3,"y":3.4},{"Sepal.Length":6.4,"Sepal.Width":3.1,"Petal.Length":5.5,"Petal.Width":1.8,"Species":"virginica","x":6.4,"y":3.1},{"Sepal.Length":6,"Sepal.Width":3,"Petal.Length":4.8,"Petal.Width":1.8,"Species":"virginica","x":6,"y":3},{"Sepal.Length":6.9,"Sepal.Width":3.1,"Petal.Length":5.4,"Petal.Width":2.1,"Species":"virginica","x":6.9,"y":3.1},{"Sepal.Length":6.7,"Sepal.Width":3.1,"Petal.Length":5.6,"Petal.Width":2.4,"Species":"virginica","x":6.7,"y":3.1},{"Sepal.Length":6.9,"Sepal.Width":3.1,"Petal.Length":5.1,"Petal.Width":2.3,"Species":"virginica","x":6.9,"y":3.1},{"Sepal.Length":5.8,"Sepal.Width":2.7,"Petal.Length":5.1,"Petal.Width":1.9,"Species":"virginica","x":5.8,"y":2.7},{"Sepal.Length":6.8,"Sepal.Width":3.2,"Petal.Length":5.9,"Petal.Width":2.3,"Species":"virginica","x":6.8,"y":3.2},{"Sepal.Length":6.7,"Sepal.Width":3.3,"Petal.Length":5.7,"Petal.Width":2.5,"Species":"virginica","x":6.7,"y":3.3},{"Sepal.Length":6.7,"Sepal.Width":3,"Petal.Length":5.2,"Petal.Width":2.3,"Species":"virginica","x":6.7,"y":3},{"Sepal.Length":6.3,"Sepal.Width":2.5,"Petal.Length":5,"Petal.Width":1.9,"Species":"virginica","x":6.3,"y":2.5},{"Sepal.Length":6.5,"Sepal.Width":3,"Petal.Length":5.2,"Petal.Width":2,"Species":"virginica","x":6.5,"y":3},{"Sepal.Length":6.2,"Sepal.Width":3.4,"Petal.Length":5.4,"Petal.Width":2.3,"Species":"virginica","x":6.2,"y":3.4},{"Sepal.Length":5.9,"Sepal.Width":3,"Petal.Length":5.1,"Petal.Width":1.8,"Species":"virginica","x":5.9,"y":3}],"type":"scatter"}],"xAxis":{"type":"linear","title":{"text":"Sepal Length"},"crosshair":true},"legend":{"verticalAlign":"top","align":"right"}},"theme":{"chart":{"backgroundColor":"transparent"},"colors":["#7cb5ec","#434348","#90ed7d","#f7a35c","#8085e9","#f15c80","#e4d354","#2b908f","#f45b5b","#91e8e1"]},"conf_opts":{"global":{"Date":null,"VMLRadialGradientURL":"http =//code.highcharts.com/list(version)/gfx/vml-radial-gradient.png","canvasToolsURL":"http =//code.highcharts.com/list(version)/modules/canvas-tools.js","getTimezoneOffset":null,"timezoneOffset":0,"useUTC":true},"lang":{"contextButtonTitle":"Chart context menu","decimalPoint":".","downloadCSV":"Download CSV","downloadJPEG":"Download JPEG image","downloadPDF":"Download PDF document","downloadPNG":"Download PNG image","downloadSVG":"Download SVG vector image","downloadXLS":"Download XLS","drillUpText":"◁ Back to {series.name}","exitFullscreen":"Exit from full screen","exportData":{"annotationHeader":"Annotations","categoryDatetimeHeader":"DateTime","categoryHeader":"Category"},"hideData":"Hide data table","invalidDate":null,"loading":"Loading...","months":["January","February","March","April","May","June","July","August","September","October","November","December"],"noData":"No data to display","numericSymbolMagnitude":1000,"numericSymbols":["k","M","G","T","P","E"],"printChart":"Print chart","resetZoom":"Reset zoom","resetZoomTitle":"Reset zoom level 1:1","shortMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"shortWeekdays":["Sat","Sun","Mon","Tue","Wed","Thu","Fri"],"thousandsSep":" ","viewData":"View data table","viewFullscreen":"View in full screen","weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]}},"type":"chart","fonts":[],"debug":false},"evals":[],"jsHooks":[]}</script> --- name: plot_interactive_plotly ## Interactive plots • `plotly` R package [`plotly`](https://plot.ly/r/) provides R binding around javascript plotting library [`plotly`](https://plot.ly). ```r library(plotly) p <- iris %>% plot_ly(x=~Sepal.Length,y=~Sepal.Width,color=~Species,width=500,height=400) %>% add_markers() p ``` <div id="htmlwidget-2ef9a9a260dc7a695717" style="width:500px;height:400px;" class="plotly html-widget"></div> <script type="application/json" data-for="htmlwidget-2ef9a9a260dc7a695717">{"x":{"visdat":{"13dda5157b7c9":["function () ","plotlyVisDat"]},"cur_data":"13dda5157b7c9","attrs":{"13dda5157b7c9":{"x":{},"y":{},"color":{},"alpha_stroke":1,"sizes":[10,100],"spans":[1,20],"type":"scatter","mode":"markers","inherit":true}},"layout":{"width":500,"height":400,"margin":{"b":40,"l":60,"t":25,"r":10},"xaxis":{"domain":[0,1],"automargin":true,"title":"Sepal.Length"},"yaxis":{"domain":[0,1],"automargin":true,"title":"Sepal.Width"},"hovermode":"closest","showlegend":true},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"data":[{"x":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5],"y":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3],"type":"scatter","mode":"markers","name":"setosa","marker":{"color":"rgba(102,194,165,1)","line":{"color":"rgba(102,194,165,1)"}},"textfont":{"color":"rgba(102,194,165,1)"},"error_y":{"color":"rgba(102,194,165,1)"},"error_x":{"color":"rgba(102,194,165,1)"},"line":{"color":"rgba(102,194,165,1)"},"xaxis":"x","yaxis":"y","frame":null},{"x":[7,6.4,6.9,5.5,6.5,5.7,6.3,4.9,6.6,5.2,5,5.9,6,6.1,5.6,6.7,5.6,5.8,6.2,5.6,5.9,6.1,6.3,6.1,6.4,6.6,6.8,6.7,6,5.7,5.5,5.5,5.8,6,5.4,6,6.7,6.3,5.6,5.5,5.5,6.1,5.8,5,5.6,5.7,5.7,6.2,5.1,5.7],"y":[3.2,3.2,3.1,2.3,2.8,2.8,3.3,2.4,2.9,2.7,2,3,2.2,2.9,2.9,3.1,3,2.7,2.2,2.5,3.2,2.8,2.5,2.8,2.9,3,2.8,3,2.9,2.6,2.4,2.4,2.7,2.7,3,3.4,3.1,2.3,3,2.5,2.6,3,2.6,2.3,2.7,3,2.9,2.9,2.5,2.8],"type":"scatter","mode":"markers","name":"versicolor","marker":{"color":"rgba(252,141,98,1)","line":{"color":"rgba(252,141,98,1)"}},"textfont":{"color":"rgba(252,141,98,1)"},"error_y":{"color":"rgba(252,141,98,1)"},"error_x":{"color":"rgba(252,141,98,1)"},"line":{"color":"rgba(252,141,98,1)"},"xaxis":"x","yaxis":"y","frame":null},{"x":[6.3,5.8,7.1,6.3,6.5,7.6,4.9,7.3,6.7,7.2,6.5,6.4,6.8,5.7,5.8,6.4,6.5,7.7,7.7,6,6.9,5.6,7.7,6.3,6.7,7.2,6.2,6.1,6.4,7.2,7.4,7.9,6.4,6.3,6.1,7.7,6.3,6.4,6,6.9,6.7,6.9,5.8,6.8,6.7,6.7,6.3,6.5,6.2,5.9],"y":[3.3,2.7,3,2.9,3,3,2.5,2.9,2.5,3.6,3.2,2.7,3,2.5,2.8,3.2,3,3.8,2.6,2.2,3.2,2.8,2.8,2.7,3.3,3.2,2.8,3,2.8,3,2.8,3.8,2.8,2.8,2.6,3,3.4,3.1,3,3.1,3.1,3.1,2.7,3.2,3.3,3,2.5,3,3.4,3],"type":"scatter","mode":"markers","name":"virginica","marker":{"color":"rgba(141,160,203,1)","line":{"color":"rgba(141,160,203,1)"}},"textfont":{"color":"rgba(141,160,203,1)"},"error_y":{"color":"rgba(141,160,203,1)"},"error_x":{"color":"rgba(141,160,203,1)"},"line":{"color":"rgba(141,160,203,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script> --- name: plot_interactive_ggplotly ## Interactive plots • `ggplotly` `plotly` also has a function called `ggplotly` which converts a static ggplot2 object into an interactive plot. ```r library(plotly) p <- ggplot(iris,aes(x=Sepal.Length,y=Sepal.Width,col=Species))+ geom_point()+ labs(x="Sepal Length",y="Sepal Width")+ theme_bw(base_size=12) plotly::ggplotly(p,width=460,height=360) ``` <div id="htmlwidget-0299074b1126d4fd2295" style="width:460px;height:360px;" class="plotly html-widget"></div> <script type="application/json" data-for="htmlwidget-0299074b1126d4fd2295">{"x":{"data":[{"x":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5],"y":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3],"text":["Sepal.Length: 5.1<br />Sepal.Width: 3.5<br />Species: setosa","Sepal.Length: 4.9<br />Sepal.Width: 3.0<br />Species: setosa","Sepal.Length: 4.7<br />Sepal.Width: 3.2<br />Species: setosa","Sepal.Length: 4.6<br />Sepal.Width: 3.1<br />Species: setosa","Sepal.Length: 5.0<br />Sepal.Width: 3.6<br />Species: setosa","Sepal.Length: 5.4<br />Sepal.Width: 3.9<br />Species: setosa","Sepal.Length: 4.6<br />Sepal.Width: 3.4<br />Species: setosa","Sepal.Length: 5.0<br />Sepal.Width: 3.4<br />Species: setosa","Sepal.Length: 4.4<br />Sepal.Width: 2.9<br />Species: setosa","Sepal.Length: 4.9<br />Sepal.Width: 3.1<br />Species: setosa","Sepal.Length: 5.4<br />Sepal.Width: 3.7<br />Species: setosa","Sepal.Length: 4.8<br />Sepal.Width: 3.4<br />Species: setosa","Sepal.Length: 4.8<br />Sepal.Width: 3.0<br />Species: setosa","Sepal.Length: 4.3<br />Sepal.Width: 3.0<br />Species: setosa","Sepal.Length: 5.8<br />Sepal.Width: 4.0<br />Species: setosa","Sepal.Length: 5.7<br />Sepal.Width: 4.4<br />Species: setosa","Sepal.Length: 5.4<br />Sepal.Width: 3.9<br />Species: setosa","Sepal.Length: 5.1<br />Sepal.Width: 3.5<br />Species: setosa","Sepal.Length: 5.7<br />Sepal.Width: 3.8<br />Species: setosa","Sepal.Length: 5.1<br />Sepal.Width: 3.8<br />Species: setosa","Sepal.Length: 5.4<br />Sepal.Width: 3.4<br />Species: setosa","Sepal.Length: 5.1<br />Sepal.Width: 3.7<br />Species: setosa","Sepal.Length: 4.6<br />Sepal.Width: 3.6<br />Species: setosa","Sepal.Length: 5.1<br />Sepal.Width: 3.3<br />Species: setosa","Sepal.Length: 4.8<br />Sepal.Width: 3.4<br />Species: setosa","Sepal.Length: 5.0<br />Sepal.Width: 3.0<br />Species: setosa","Sepal.Length: 5.0<br />Sepal.Width: 3.4<br />Species: setosa","Sepal.Length: 5.2<br />Sepal.Width: 3.5<br />Species: setosa","Sepal.Length: 5.2<br />Sepal.Width: 3.4<br />Species: setosa","Sepal.Length: 4.7<br />Sepal.Width: 3.2<br />Species: setosa","Sepal.Length: 4.8<br />Sepal.Width: 3.1<br />Species: setosa","Sepal.Length: 5.4<br />Sepal.Width: 3.4<br />Species: setosa","Sepal.Length: 5.2<br />Sepal.Width: 4.1<br />Species: setosa","Sepal.Length: 5.5<br />Sepal.Width: 4.2<br />Species: setosa","Sepal.Length: 4.9<br />Sepal.Width: 3.1<br />Species: setosa","Sepal.Length: 5.0<br />Sepal.Width: 3.2<br />Species: setosa","Sepal.Length: 5.5<br />Sepal.Width: 3.5<br />Species: setosa","Sepal.Length: 4.9<br />Sepal.Width: 3.6<br />Species: setosa","Sepal.Length: 4.4<br />Sepal.Width: 3.0<br />Species: setosa","Sepal.Length: 5.1<br />Sepal.Width: 3.4<br />Species: setosa","Sepal.Length: 5.0<br />Sepal.Width: 3.5<br />Species: setosa","Sepal.Length: 4.5<br />Sepal.Width: 2.3<br />Species: setosa","Sepal.Length: 4.4<br />Sepal.Width: 3.2<br />Species: setosa","Sepal.Length: 5.0<br />Sepal.Width: 3.5<br />Species: setosa","Sepal.Length: 5.1<br />Sepal.Width: 3.8<br />Species: setosa","Sepal.Length: 4.8<br />Sepal.Width: 3.0<br />Species: setosa","Sepal.Length: 5.1<br />Sepal.Width: 3.8<br />Species: setosa","Sepal.Length: 4.6<br />Sepal.Width: 3.2<br />Species: setosa","Sepal.Length: 5.3<br />Sepal.Width: 3.7<br />Species: setosa","Sepal.Length: 5.0<br />Sepal.Width: 3.3<br />Species: setosa"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(248,118,109,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(248,118,109,1)"}},"hoveron":"points","name":"setosa","legendgroup":"setosa","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[7,6.4,6.9,5.5,6.5,5.7,6.3,4.9,6.6,5.2,5,5.9,6,6.1,5.6,6.7,5.6,5.8,6.2,5.6,5.9,6.1,6.3,6.1,6.4,6.6,6.8,6.7,6,5.7,5.5,5.5,5.8,6,5.4,6,6.7,6.3,5.6,5.5,5.5,6.1,5.8,5,5.6,5.7,5.7,6.2,5.1,5.7],"y":[3.2,3.2,3.1,2.3,2.8,2.8,3.3,2.4,2.9,2.7,2,3,2.2,2.9,2.9,3.1,3,2.7,2.2,2.5,3.2,2.8,2.5,2.8,2.9,3,2.8,3,2.9,2.6,2.4,2.4,2.7,2.7,3,3.4,3.1,2.3,3,2.5,2.6,3,2.6,2.3,2.7,3,2.9,2.9,2.5,2.8],"text":["Sepal.Length: 7.0<br />Sepal.Width: 3.2<br />Species: versicolor","Sepal.Length: 6.4<br />Sepal.Width: 3.2<br />Species: versicolor","Sepal.Length: 6.9<br />Sepal.Width: 3.1<br />Species: versicolor","Sepal.Length: 5.5<br />Sepal.Width: 2.3<br />Species: versicolor","Sepal.Length: 6.5<br />Sepal.Width: 2.8<br />Species: versicolor","Sepal.Length: 5.7<br />Sepal.Width: 2.8<br />Species: versicolor","Sepal.Length: 6.3<br />Sepal.Width: 3.3<br />Species: versicolor","Sepal.Length: 4.9<br />Sepal.Width: 2.4<br />Species: versicolor","Sepal.Length: 6.6<br />Sepal.Width: 2.9<br />Species: versicolor","Sepal.Length: 5.2<br />Sepal.Width: 2.7<br />Species: versicolor","Sepal.Length: 5.0<br />Sepal.Width: 2.0<br />Species: versicolor","Sepal.Length: 5.9<br />Sepal.Width: 3.0<br />Species: versicolor","Sepal.Length: 6.0<br />Sepal.Width: 2.2<br />Species: versicolor","Sepal.Length: 6.1<br />Sepal.Width: 2.9<br />Species: versicolor","Sepal.Length: 5.6<br />Sepal.Width: 2.9<br />Species: versicolor","Sepal.Length: 6.7<br />Sepal.Width: 3.1<br />Species: versicolor","Sepal.Length: 5.6<br />Sepal.Width: 3.0<br />Species: versicolor","Sepal.Length: 5.8<br />Sepal.Width: 2.7<br />Species: versicolor","Sepal.Length: 6.2<br />Sepal.Width: 2.2<br />Species: versicolor","Sepal.Length: 5.6<br />Sepal.Width: 2.5<br />Species: versicolor","Sepal.Length: 5.9<br />Sepal.Width: 3.2<br />Species: versicolor","Sepal.Length: 6.1<br />Sepal.Width: 2.8<br />Species: versicolor","Sepal.Length: 6.3<br />Sepal.Width: 2.5<br />Species: versicolor","Sepal.Length: 6.1<br />Sepal.Width: 2.8<br />Species: versicolor","Sepal.Length: 6.4<br />Sepal.Width: 2.9<br />Species: versicolor","Sepal.Length: 6.6<br />Sepal.Width: 3.0<br />Species: versicolor","Sepal.Length: 6.8<br />Sepal.Width: 2.8<br />Species: versicolor","Sepal.Length: 6.7<br />Sepal.Width: 3.0<br />Species: versicolor","Sepal.Length: 6.0<br />Sepal.Width: 2.9<br />Species: versicolor","Sepal.Length: 5.7<br />Sepal.Width: 2.6<br />Species: versicolor","Sepal.Length: 5.5<br />Sepal.Width: 2.4<br />Species: versicolor","Sepal.Length: 5.5<br />Sepal.Width: 2.4<br />Species: versicolor","Sepal.Length: 5.8<br />Sepal.Width: 2.7<br />Species: versicolor","Sepal.Length: 6.0<br />Sepal.Width: 2.7<br />Species: versicolor","Sepal.Length: 5.4<br />Sepal.Width: 3.0<br />Species: versicolor","Sepal.Length: 6.0<br />Sepal.Width: 3.4<br />Species: versicolor","Sepal.Length: 6.7<br />Sepal.Width: 3.1<br />Species: versicolor","Sepal.Length: 6.3<br />Sepal.Width: 2.3<br />Species: versicolor","Sepal.Length: 5.6<br />Sepal.Width: 3.0<br />Species: versicolor","Sepal.Length: 5.5<br />Sepal.Width: 2.5<br />Species: versicolor","Sepal.Length: 5.5<br />Sepal.Width: 2.6<br />Species: versicolor","Sepal.Length: 6.1<br />Sepal.Width: 3.0<br />Species: versicolor","Sepal.Length: 5.8<br />Sepal.Width: 2.6<br />Species: versicolor","Sepal.Length: 5.0<br />Sepal.Width: 2.3<br />Species: versicolor","Sepal.Length: 5.6<br />Sepal.Width: 2.7<br />Species: versicolor","Sepal.Length: 5.7<br />Sepal.Width: 3.0<br />Species: versicolor","Sepal.Length: 5.7<br />Sepal.Width: 2.9<br />Species: versicolor","Sepal.Length: 6.2<br />Sepal.Width: 2.9<br />Species: versicolor","Sepal.Length: 5.1<br />Sepal.Width: 2.5<br />Species: versicolor","Sepal.Length: 5.7<br />Sepal.Width: 2.8<br />Species: versicolor"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(0,186,56,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(0,186,56,1)"}},"hoveron":"points","name":"versicolor","legendgroup":"versicolor","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[6.3,5.8,7.1,6.3,6.5,7.6,4.9,7.3,6.7,7.2,6.5,6.4,6.8,5.7,5.8,6.4,6.5,7.7,7.7,6,6.9,5.6,7.7,6.3,6.7,7.2,6.2,6.1,6.4,7.2,7.4,7.9,6.4,6.3,6.1,7.7,6.3,6.4,6,6.9,6.7,6.9,5.8,6.8,6.7,6.7,6.3,6.5,6.2,5.9],"y":[3.3,2.7,3,2.9,3,3,2.5,2.9,2.5,3.6,3.2,2.7,3,2.5,2.8,3.2,3,3.8,2.6,2.2,3.2,2.8,2.8,2.7,3.3,3.2,2.8,3,2.8,3,2.8,3.8,2.8,2.8,2.6,3,3.4,3.1,3,3.1,3.1,3.1,2.7,3.2,3.3,3,2.5,3,3.4,3],"text":["Sepal.Length: 6.3<br />Sepal.Width: 3.3<br />Species: virginica","Sepal.Length: 5.8<br />Sepal.Width: 2.7<br />Species: virginica","Sepal.Length: 7.1<br />Sepal.Width: 3.0<br />Species: virginica","Sepal.Length: 6.3<br />Sepal.Width: 2.9<br />Species: virginica","Sepal.Length: 6.5<br />Sepal.Width: 3.0<br />Species: virginica","Sepal.Length: 7.6<br />Sepal.Width: 3.0<br />Species: virginica","Sepal.Length: 4.9<br />Sepal.Width: 2.5<br />Species: virginica","Sepal.Length: 7.3<br />Sepal.Width: 2.9<br />Species: virginica","Sepal.Length: 6.7<br />Sepal.Width: 2.5<br />Species: virginica","Sepal.Length: 7.2<br />Sepal.Width: 3.6<br />Species: virginica","Sepal.Length: 6.5<br />Sepal.Width: 3.2<br />Species: virginica","Sepal.Length: 6.4<br />Sepal.Width: 2.7<br />Species: virginica","Sepal.Length: 6.8<br />Sepal.Width: 3.0<br />Species: virginica","Sepal.Length: 5.7<br />Sepal.Width: 2.5<br />Species: virginica","Sepal.Length: 5.8<br />Sepal.Width: 2.8<br />Species: virginica","Sepal.Length: 6.4<br />Sepal.Width: 3.2<br />Species: virginica","Sepal.Length: 6.5<br />Sepal.Width: 3.0<br />Species: virginica","Sepal.Length: 7.7<br />Sepal.Width: 3.8<br />Species: virginica","Sepal.Length: 7.7<br />Sepal.Width: 2.6<br />Species: virginica","Sepal.Length: 6.0<br />Sepal.Width: 2.2<br />Species: virginica","Sepal.Length: 6.9<br />Sepal.Width: 3.2<br />Species: virginica","Sepal.Length: 5.6<br />Sepal.Width: 2.8<br />Species: virginica","Sepal.Length: 7.7<br />Sepal.Width: 2.8<br />Species: virginica","Sepal.Length: 6.3<br />Sepal.Width: 2.7<br />Species: virginica","Sepal.Length: 6.7<br />Sepal.Width: 3.3<br />Species: virginica","Sepal.Length: 7.2<br />Sepal.Width: 3.2<br />Species: virginica","Sepal.Length: 6.2<br />Sepal.Width: 2.8<br />Species: virginica","Sepal.Length: 6.1<br />Sepal.Width: 3.0<br />Species: virginica","Sepal.Length: 6.4<br />Sepal.Width: 2.8<br />Species: virginica","Sepal.Length: 7.2<br />Sepal.Width: 3.0<br />Species: virginica","Sepal.Length: 7.4<br />Sepal.Width: 2.8<br />Species: virginica","Sepal.Length: 7.9<br />Sepal.Width: 3.8<br />Species: virginica","Sepal.Length: 6.4<br />Sepal.Width: 2.8<br />Species: virginica","Sepal.Length: 6.3<br />Sepal.Width: 2.8<br />Species: virginica","Sepal.Length: 6.1<br />Sepal.Width: 2.6<br />Species: virginica","Sepal.Length: 7.7<br />Sepal.Width: 3.0<br />Species: virginica","Sepal.Length: 6.3<br />Sepal.Width: 3.4<br />Species: virginica","Sepal.Length: 6.4<br />Sepal.Width: 3.1<br />Species: virginica","Sepal.Length: 6.0<br />Sepal.Width: 3.0<br />Species: virginica","Sepal.Length: 6.9<br />Sepal.Width: 3.1<br />Species: virginica","Sepal.Length: 6.7<br />Sepal.Width: 3.1<br />Species: virginica","Sepal.Length: 6.9<br />Sepal.Width: 3.1<br />Species: virginica","Sepal.Length: 5.8<br />Sepal.Width: 2.7<br />Species: virginica","Sepal.Length: 6.8<br />Sepal.Width: 3.2<br />Species: virginica","Sepal.Length: 6.7<br />Sepal.Width: 3.3<br />Species: virginica","Sepal.Length: 6.7<br />Sepal.Width: 3.0<br />Species: virginica","Sepal.Length: 6.3<br />Sepal.Width: 2.5<br />Species: virginica","Sepal.Length: 6.5<br />Sepal.Width: 3.0<br />Species: virginica","Sepal.Length: 6.2<br />Sepal.Width: 3.4<br />Species: virginica","Sepal.Length: 5.9<br />Sepal.Width: 3.0<br />Species: virginica"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(97,156,255,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(97,156,255,1)"}},"hoveron":"points","name":"virginica","legendgroup":"virginica","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":26.1840321018403,"r":7.97011207970112,"b":42.8614916286149,"l":47.0236612702366},"plot_bgcolor":"rgba(255,255,255,1)","paper_bgcolor":"rgba(255,255,255,1)","font":{"color":"rgba(0,0,0,1)","family":"","size":15.9402241594022},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[4.12,8.08],"tickmode":"array","ticktext":["5","6","7","8"],"tickvals":[5,6,7,8],"categoryorder":"array","categoryarray":["5","6","7","8"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.98505603985056,"tickwidth":0.724555643609193,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":12.7521793275218},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.724555643609193,"zeroline":false,"anchor":"y","title":{"text":"Sepal Length","font":{"color":"rgba(0,0,0,1)","family":"","size":15.9402241594022}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[1.88,4.52],"tickmode":"array","ticktext":["2.0","2.5","3.0","3.5","4.0","4.5"],"tickvals":[2,2.5,3,3.5,4,4.5],"categoryorder":"array","categoryarray":["2.0","2.5","3.0","3.5","4.0","4.5"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.98505603985056,"tickwidth":0.724555643609193,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":12.7521793275218},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.724555643609193,"zeroline":false,"anchor":"x","title":{"text":"Sepal Width","font":{"color":"rgba(0,0,0,1)","family":"","size":15.9402241594022}},"hoverformat":".2f"},"shapes":[{"type":"rect","fillcolor":"transparent","line":{"color":"rgba(51,51,51,1)","width":0.724555643609193,"linetype":"solid"},"yref":"paper","xref":"paper","x0":0,"x1":1,"y0":0,"y1":1}],"showlegend":true,"legend":{"bgcolor":"rgba(255,255,255,1)","bordercolor":"transparent","borderwidth":2.06156048675734,"font":{"color":"rgba(0,0,0,1)","family":"","size":12.7521793275218},"title":{"text":"Species","font":{"color":"rgba(0,0,0,1)","family":"","size":15.9402241594022}}},"hovermode":"closest","width":460,"height":360,"barmode":"relative"},"config":{"doubleClick":"reset","modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"source":"A","attrs":{"13ddab2809f8":{"x":{},"y":{},"colour":{},"type":"scatter"}},"cur_data":"13ddab2809f8","visdat":{"13ddab2809f8":["function (y) ","x"]},"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script> --- name: plot_interactive_ggiraph ## Interactive plots • `ggiraph` R package [`ggiraph`](https://github.com/davidgohel/ggiraph) converts a static ggplot2 object into an interactive plot. ```r library(ggiraph) p <- ggplot(iris,aes(x=Sepal.Length,y=Petal.Length,colour=Species))+ geom_point_interactive(aes(tooltip=paste0("<b>Petal Length:</b> ",Petal.Length,"\n<b>Sepal Length: </b>",Sepal.Length,"\n<b>Species: </b>",Species)),size=2)+ theme_bw() tooltip_css <- "background-color:#f8f9f9;padding:10px;border-style:solid;border-width:2px;border-color:#125687;border-radius:5px;" ggiraph(code=print(p),hover_css="cursor:pointer;stroke:black;fill-opacity:0.3",zoom_max=5,tooltip_extra_css=tooltip_css,tooltip_opacity=0.9,height_svg=3,width_svg=4.5,width=0.6) ``` <div id="htmlwidget-1325db9d24e81b2fbeea" style="width:432px;height:288px;" class="girafe html-widget"></div> <script type="application/json" data-for="htmlwidget-1325db9d24e81b2fbeea">{"x":{"html":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='svg_5b3add3d-0aad-4a22-aa1c-69bb36cbdd9d' viewBox='0 0 324 216'>\n <defs>\n <clipPath id='svg_5b3add3d-0aad-4a22-aa1c-69bb36cbdd9d_c1'>\n <rect x='0' y='0' width='324' height='216'/>\n <\/clipPath>\n <clipPath id='svg_5b3add3d-0aad-4a22-aa1c-69bb36cbdd9d_c2'>\n <rect x='29.06' y='5.48' width='201.85' height='178.82'/>\n <\/clipPath>\n <\/defs>\n <g>\n <g clip-path='url(#svg_5b3add3d-0aad-4a22-aa1c-69bb36cbdd9d_c1)'>\n <rect x='0' y='0' width='324' height='216' fill='#FFFFFF' stroke='#FFFFFF' stroke-width='0.75' stroke-linejoin='round' stroke-linecap='round'/>\n <rect x='0' y='0' width='324' height='216' fill='#FFFFFF' stroke='#FFFFFF' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='round'/>\n <\/g>\n <g clip-path='url(#svg_5b3add3d-0aad-4a22-aa1c-69bb36cbdd9d_c2)'>\n <rect x='29.06' y='5.48' width='201.85' height='178.82' fill='#FFFFFF' stroke='none'/>\n <polyline points='29.06,176.17 230.90,176.17' fill='none' stroke='#EBEBEB' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='29.06,121.06 230.90,121.06' fill='none' stroke='#EBEBEB' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='29.06,65.96 230.90,65.96' fill='none' stroke='#EBEBEB' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='29.06,10.85 230.90,10.85' fill='none' stroke='#EBEBEB' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='48.42,184.29 48.42,5.48' fill='none' stroke='#EBEBEB' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='99.40,184.29 99.40,5.48' fill='none' stroke='#EBEBEB' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='150.37,184.29 150.37,5.48' fill='none' stroke='#EBEBEB' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='201.34,184.29 201.34,5.48' fill='none' stroke='#EBEBEB' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='29.06,148.61 230.90,148.61' fill='none' stroke='#EBEBEB' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='29.06,93.51 230.90,93.51' fill='none' stroke='#EBEBEB' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='29.06,38.40 230.90,38.40' fill='none' stroke='#EBEBEB' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='73.91,184.29 73.91,5.48' fill='none' stroke='#EBEBEB' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='124.88,184.29 124.88,5.48' fill='none' stroke='#EBEBEB' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='175.85,184.29 175.85,5.48' fill='none' stroke='#EBEBEB' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='226.82,184.29 226.82,5.48' fill='none' stroke='#EBEBEB' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <circle cx='79.01' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>5.1<br/><b>Species: </b>setosa'/>\n <circle cx='68.81' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>4.9<br/><b>Species: </b>setosa'/>\n <circle cx='58.62' cy='167.9' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.3<br/><b>Sepal Length: </b>4.7<br/><b>Species: </b>setosa'/>\n <circle cx='53.52' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>4.6<br/><b>Species: </b>setosa'/>\n <circle cx='73.91' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>5<br/><b>Species: </b>setosa'/>\n <circle cx='94.3' cy='156.88' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.7<br/><b>Sepal Length: </b>5.4<br/><b>Species: </b>setosa'/>\n <circle cx='53.52' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>4.6<br/><b>Species: </b>setosa'/>\n <circle cx='73.91' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>5<br/><b>Species: </b>setosa'/>\n <circle cx='43.33' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>4.4<br/><b>Species: </b>setosa'/>\n <circle cx='68.81' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>4.9<br/><b>Species: </b>setosa'/>\n <circle cx='94.3' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>5.4<br/><b>Species: </b>setosa'/>\n <circle cx='63.72' cy='159.64' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.6<br/><b>Sepal Length: </b>4.8<br/><b>Species: </b>setosa'/>\n <circle cx='63.72' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>4.8<br/><b>Species: </b>setosa'/>\n <circle cx='38.23' cy='173.41' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.1<br/><b>Sepal Length: </b>4.3<br/><b>Species: </b>setosa'/>\n <circle cx='114.69' cy='170.66' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.2<br/><b>Sepal Length: </b>5.8<br/><b>Species: </b>setosa'/>\n <circle cx='109.59' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>5.7<br/><b>Species: </b>setosa'/>\n <circle cx='94.3' cy='167.9' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.3<br/><b>Sepal Length: </b>5.4<br/><b>Species: </b>setosa'/>\n <circle cx='79.01' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>5.1<br/><b>Species: </b>setosa'/>\n <circle cx='109.59' cy='156.88' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.7<br/><b>Sepal Length: </b>5.7<br/><b>Species: </b>setosa'/>\n <circle cx='79.01' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>5.1<br/><b>Species: </b>setosa'/>\n <circle cx='94.3' cy='156.88' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.7<br/><b>Sepal Length: </b>5.4<br/><b>Species: </b>setosa'/>\n <circle cx='79.01' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>5.1<br/><b>Species: </b>setosa'/>\n <circle cx='53.52' cy='176.17' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1<br/><b>Sepal Length: </b>4.6<br/><b>Species: </b>setosa'/>\n <circle cx='79.01' cy='156.88' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.7<br/><b>Sepal Length: </b>5.1<br/><b>Species: </b>setosa'/>\n <circle cx='63.72' cy='151.37' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.9<br/><b>Sepal Length: </b>4.8<br/><b>Species: </b>setosa'/>\n <circle cx='73.91' cy='159.64' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.6<br/><b>Sepal Length: </b>5<br/><b>Species: </b>setosa'/>\n <circle cx='73.91' cy='159.64' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.6<br/><b>Sepal Length: </b>5<br/><b>Species: </b>setosa'/>\n <circle cx='84.1' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>5.2<br/><b>Species: </b>setosa'/>\n <circle cx='84.1' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>5.2<br/><b>Species: </b>setosa'/>\n <circle cx='58.62' cy='159.64' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.6<br/><b>Sepal Length: </b>4.7<br/><b>Species: </b>setosa'/>\n <circle cx='63.72' cy='159.64' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.6<br/><b>Sepal Length: </b>4.8<br/><b>Species: </b>setosa'/>\n <circle cx='94.3' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>5.4<br/><b>Species: </b>setosa'/>\n <circle cx='84.1' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>5.2<br/><b>Species: </b>setosa'/>\n <circle cx='99.4' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>5.5<br/><b>Species: </b>setosa'/>\n <circle cx='68.81' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>4.9<br/><b>Species: </b>setosa'/>\n <circle cx='73.91' cy='170.66' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.2<br/><b>Sepal Length: </b>5<br/><b>Species: </b>setosa'/>\n <circle cx='99.4' cy='167.9' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.3<br/><b>Sepal Length: </b>5.5<br/><b>Species: </b>setosa'/>\n <circle cx='68.81' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>4.9<br/><b>Species: </b>setosa'/>\n <circle cx='43.33' cy='167.9' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.3<br/><b>Sepal Length: </b>4.4<br/><b>Species: </b>setosa'/>\n <circle cx='79.01' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>5.1<br/><b>Species: </b>setosa'/>\n <circle cx='73.91' cy='167.9' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.3<br/><b>Sepal Length: </b>5<br/><b>Species: </b>setosa'/>\n <circle cx='48.42' cy='167.9' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.3<br/><b>Sepal Length: </b>4.5<br/><b>Species: </b>setosa'/>\n <circle cx='43.33' cy='167.9' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.3<br/><b>Sepal Length: </b>4.4<br/><b>Species: </b>setosa'/>\n <circle cx='73.91' cy='159.64' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.6<br/><b>Sepal Length: </b>5<br/><b>Species: </b>setosa'/>\n <circle cx='79.01' cy='151.37' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.9<br/><b>Sepal Length: </b>5.1<br/><b>Species: </b>setosa'/>\n <circle cx='63.72' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>4.8<br/><b>Species: </b>setosa'/>\n <circle cx='79.01' cy='159.64' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.6<br/><b>Sepal Length: </b>5.1<br/><b>Species: </b>setosa'/>\n <circle cx='53.52' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>4.6<br/><b>Species: </b>setosa'/>\n <circle cx='89.2' cy='162.39' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.5<br/><b>Sepal Length: </b>5.3<br/><b>Species: </b>setosa'/>\n <circle cx='73.91' cy='165.15' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 1.4<br/><b>Sepal Length: </b>5<br/><b>Species: </b>setosa'/>\n <circle cx='175.85' cy='74.22' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.7<br/><b>Sepal Length: </b>7<br/><b>Species: </b>versicolor'/>\n <circle cx='145.27' cy='79.73' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.5<br/><b>Sepal Length: </b>6.4<br/><b>Species: </b>versicolor'/>\n <circle cx='170.76' cy='68.71' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.9<br/><b>Sepal Length: </b>6.9<br/><b>Species: </b>versicolor'/>\n <circle cx='99.4' cy='93.51' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4<br/><b>Sepal Length: </b>5.5<br/><b>Species: </b>versicolor'/>\n <circle cx='150.37' cy='76.98' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.6<br/><b>Sepal Length: </b>6.5<br/><b>Species: </b>versicolor'/>\n <circle cx='109.59' cy='79.73' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.5<br/><b>Sepal Length: </b>5.7<br/><b>Species: </b>versicolor'/>\n <circle cx='140.17' cy='74.22' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.7<br/><b>Sepal Length: </b>6.3<br/><b>Species: </b>versicolor'/>\n <circle cx='68.81' cy='112.8' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 3.3<br/><b>Sepal Length: </b>4.9<br/><b>Species: </b>versicolor'/>\n <circle cx='155.46' cy='76.98' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.6<br/><b>Sepal Length: </b>6.6<br/><b>Species: </b>versicolor'/>\n <circle cx='84.1' cy='96.26' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 3.9<br/><b>Sepal Length: </b>5.2<br/><b>Species: </b>versicolor'/>\n <circle cx='73.91' cy='107.29' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 3.5<br/><b>Sepal Length: </b>5<br/><b>Species: </b>versicolor'/>\n <circle cx='119.78' cy='88' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.2<br/><b>Sepal Length: </b>5.9<br/><b>Species: </b>versicolor'/>\n <circle cx='124.88' cy='93.51' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4<br/><b>Sepal Length: </b>6<br/><b>Species: </b>versicolor'/>\n <circle cx='129.98' cy='74.22' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.7<br/><b>Sepal Length: </b>6.1<br/><b>Species: </b>versicolor'/>\n <circle cx='104.49' cy='104.53' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 3.6<br/><b>Sepal Length: </b>5.6<br/><b>Species: </b>versicolor'/>\n <circle cx='160.56' cy='82.49' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.4<br/><b>Sepal Length: </b>6.7<br/><b>Species: </b>versicolor'/>\n <circle cx='104.49' cy='79.73' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.5<br/><b>Sepal Length: </b>5.6<br/><b>Species: </b>versicolor'/>\n <circle cx='114.69' cy='90.75' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.1<br/><b>Sepal Length: </b>5.8<br/><b>Species: </b>versicolor'/>\n <circle cx='135.08' cy='79.73' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.5<br/><b>Sepal Length: </b>6.2<br/><b>Species: </b>versicolor'/>\n <circle cx='104.49' cy='96.26' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 3.9<br/><b>Sepal Length: </b>5.6<br/><b>Species: </b>versicolor'/>\n <circle cx='119.78' cy='71.47' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.8<br/><b>Sepal Length: </b>5.9<br/><b>Species: </b>versicolor'/>\n <circle cx='129.98' cy='93.51' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4<br/><b>Sepal Length: </b>6.1<br/><b>Species: </b>versicolor'/>\n <circle cx='140.17' cy='68.71' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.9<br/><b>Sepal Length: </b>6.3<br/><b>Species: </b>versicolor'/>\n <circle cx='129.98' cy='74.22' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.7<br/><b>Sepal Length: </b>6.1<br/><b>Species: </b>versicolor'/>\n <circle cx='145.27' cy='85.24' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.3<br/><b>Sepal Length: </b>6.4<br/><b>Species: </b>versicolor'/>\n <circle cx='155.46' cy='82.49' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.4<br/><b>Sepal Length: </b>6.6<br/><b>Species: </b>versicolor'/>\n <circle cx='165.66' cy='71.47' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.8<br/><b>Sepal Length: </b>6.8<br/><b>Species: </b>versicolor'/>\n <circle cx='160.56' cy='65.96' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5<br/><b>Sepal Length: </b>6.7<br/><b>Species: </b>versicolor'/>\n <circle cx='124.88' cy='79.73' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.5<br/><b>Sepal Length: </b>6<br/><b>Species: </b>versicolor'/>\n <circle cx='109.59' cy='107.29' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 3.5<br/><b>Sepal Length: </b>5.7<br/><b>Species: </b>versicolor'/>\n <circle cx='99.4' cy='99.02' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 3.8<br/><b>Sepal Length: </b>5.5<br/><b>Species: </b>versicolor'/>\n <circle cx='99.4' cy='101.78' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 3.7<br/><b>Sepal Length: </b>5.5<br/><b>Species: </b>versicolor'/>\n <circle cx='114.69' cy='96.26' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 3.9<br/><b>Sepal Length: </b>5.8<br/><b>Species: </b>versicolor'/>\n <circle cx='124.88' cy='63.2' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.1<br/><b>Sepal Length: </b>6<br/><b>Species: </b>versicolor'/>\n <circle cx='94.3' cy='79.73' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.5<br/><b>Sepal Length: </b>5.4<br/><b>Species: </b>versicolor'/>\n <circle cx='124.88' cy='79.73' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.5<br/><b>Sepal Length: </b>6<br/><b>Species: </b>versicolor'/>\n <circle cx='160.56' cy='74.22' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.7<br/><b>Sepal Length: </b>6.7<br/><b>Species: </b>versicolor'/>\n <circle cx='140.17' cy='82.49' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.4<br/><b>Sepal Length: </b>6.3<br/><b>Species: </b>versicolor'/>\n <circle cx='104.49' cy='90.75' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.1<br/><b>Sepal Length: </b>5.6<br/><b>Species: </b>versicolor'/>\n <circle cx='99.4' cy='93.51' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4<br/><b>Sepal Length: </b>5.5<br/><b>Species: </b>versicolor'/>\n <circle cx='99.4' cy='82.49' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.4<br/><b>Sepal Length: </b>5.5<br/><b>Species: </b>versicolor'/>\n <circle cx='129.98' cy='76.98' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.6<br/><b>Sepal Length: </b>6.1<br/><b>Species: </b>versicolor'/>\n <circle cx='114.69' cy='93.51' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4<br/><b>Sepal Length: </b>5.8<br/><b>Species: </b>versicolor'/>\n <circle cx='73.91' cy='112.8' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 3.3<br/><b>Sepal Length: </b>5<br/><b>Species: </b>versicolor'/>\n <circle cx='104.49' cy='88' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.2<br/><b>Sepal Length: </b>5.6<br/><b>Species: </b>versicolor'/>\n <circle cx='109.59' cy='88' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.2<br/><b>Sepal Length: </b>5.7<br/><b>Species: </b>versicolor'/>\n <circle cx='109.59' cy='88' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.2<br/><b>Sepal Length: </b>5.7<br/><b>Species: </b>versicolor'/>\n <circle cx='135.08' cy='85.24' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.3<br/><b>Sepal Length: </b>6.2<br/><b>Species: </b>versicolor'/>\n <circle cx='79.01' cy='121.06' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 3<br/><b>Sepal Length: </b>5.1<br/><b>Species: </b>versicolor'/>\n <circle cx='109.59' cy='90.75' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.1<br/><b>Sepal Length: </b>5.7<br/><b>Species: </b>versicolor'/>\n <circle cx='140.17' cy='38.4' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 6<br/><b>Sepal Length: </b>6.3<br/><b>Species: </b>virginica'/>\n <circle cx='114.69' cy='63.2' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.1<br/><b>Sepal Length: </b>5.8<br/><b>Species: </b>virginica'/>\n <circle cx='180.95' cy='41.16' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.9<br/><b>Sepal Length: </b>7.1<br/><b>Species: </b>virginica'/>\n <circle cx='140.17' cy='49.43' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.6<br/><b>Sepal Length: </b>6.3<br/><b>Species: </b>virginica'/>\n <circle cx='150.37' cy='43.92' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.8<br/><b>Sepal Length: </b>6.5<br/><b>Species: </b>virginica'/>\n <circle cx='206.44' cy='21.87' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 6.6<br/><b>Sepal Length: </b>7.6<br/><b>Species: </b>virginica'/>\n <circle cx='68.81' cy='79.73' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.5<br/><b>Sepal Length: </b>4.9<br/><b>Species: </b>virginica'/>\n <circle cx='191.14' cy='30.14' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 6.3<br/><b>Sepal Length: </b>7.3<br/><b>Species: </b>virginica'/>\n <circle cx='160.56' cy='43.92' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.8<br/><b>Sepal Length: </b>6.7<br/><b>Species: </b>virginica'/>\n <circle cx='186.05' cy='35.65' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 6.1<br/><b>Sepal Length: </b>7.2<br/><b>Species: </b>virginica'/>\n <circle cx='150.37' cy='63.2' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.1<br/><b>Sepal Length: </b>6.5<br/><b>Species: </b>virginica'/>\n <circle cx='145.27' cy='57.69' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.3<br/><b>Sepal Length: </b>6.4<br/><b>Species: </b>virginica'/>\n <circle cx='165.66' cy='52.18' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.5<br/><b>Sepal Length: </b>6.8<br/><b>Species: </b>virginica'/>\n <circle cx='109.59' cy='65.96' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5<br/><b>Sepal Length: </b>5.7<br/><b>Species: </b>virginica'/>\n <circle cx='114.69' cy='63.2' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.1<br/><b>Sepal Length: </b>5.8<br/><b>Species: </b>virginica'/>\n <circle cx='145.27' cy='57.69' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.3<br/><b>Sepal Length: </b>6.4<br/><b>Species: </b>virginica'/>\n <circle cx='150.37' cy='52.18' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.5<br/><b>Sepal Length: </b>6.5<br/><b>Species: </b>virginica'/>\n <circle cx='211.53' cy='19.12' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 6.7<br/><b>Sepal Length: </b>7.7<br/><b>Species: </b>virginica'/>\n <circle cx='211.53' cy='13.61' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 6.9<br/><b>Sepal Length: </b>7.7<br/><b>Species: </b>virginica'/>\n <circle cx='124.88' cy='65.96' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5<br/><b>Sepal Length: </b>6<br/><b>Species: </b>virginica'/>\n <circle cx='170.76' cy='46.67' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.7<br/><b>Sepal Length: </b>6.9<br/><b>Species: </b>virginica'/>\n <circle cx='104.49' cy='68.71' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.9<br/><b>Sepal Length: </b>5.6<br/><b>Species: </b>virginica'/>\n <circle cx='211.53' cy='19.12' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 6.7<br/><b>Sepal Length: </b>7.7<br/><b>Species: </b>virginica'/>\n <circle cx='140.17' cy='68.71' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.9<br/><b>Sepal Length: </b>6.3<br/><b>Species: </b>virginica'/>\n <circle cx='160.56' cy='46.67' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.7<br/><b>Sepal Length: </b>6.7<br/><b>Species: </b>virginica'/>\n <circle cx='186.05' cy='38.4' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 6<br/><b>Sepal Length: </b>7.2<br/><b>Species: </b>virginica'/>\n <circle cx='135.08' cy='71.47' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.8<br/><b>Sepal Length: </b>6.2<br/><b>Species: </b>virginica'/>\n <circle cx='129.98' cy='68.71' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.9<br/><b>Sepal Length: </b>6.1<br/><b>Species: </b>virginica'/>\n <circle cx='145.27' cy='49.43' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.6<br/><b>Sepal Length: </b>6.4<br/><b>Species: </b>virginica'/>\n <circle cx='186.05' cy='43.92' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.8<br/><b>Sepal Length: </b>7.2<br/><b>Species: </b>virginica'/>\n <circle cx='196.24' cy='35.65' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 6.1<br/><b>Sepal Length: </b>7.4<br/><b>Species: </b>virginica'/>\n <circle cx='221.73' cy='27.38' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 6.4<br/><b>Sepal Length: </b>7.9<br/><b>Species: </b>virginica'/>\n <circle cx='145.27' cy='49.43' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.6<br/><b>Sepal Length: </b>6.4<br/><b>Species: </b>virginica'/>\n <circle cx='140.17' cy='63.2' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.1<br/><b>Sepal Length: </b>6.3<br/><b>Species: </b>virginica'/>\n <circle cx='129.98' cy='49.43' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.6<br/><b>Sepal Length: </b>6.1<br/><b>Species: </b>virginica'/>\n <circle cx='211.53' cy='35.65' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 6.1<br/><b>Sepal Length: </b>7.7<br/><b>Species: </b>virginica'/>\n <circle cx='140.17' cy='49.43' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.6<br/><b>Sepal Length: </b>6.3<br/><b>Species: </b>virginica'/>\n <circle cx='145.27' cy='52.18' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.5<br/><b>Sepal Length: </b>6.4<br/><b>Species: </b>virginica'/>\n <circle cx='124.88' cy='71.47' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 4.8<br/><b>Sepal Length: </b>6<br/><b>Species: </b>virginica'/>\n <circle cx='170.76' cy='54.94' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.4<br/><b>Sepal Length: </b>6.9<br/><b>Species: </b>virginica'/>\n <circle cx='160.56' cy='49.43' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.6<br/><b>Sepal Length: </b>6.7<br/><b>Species: </b>virginica'/>\n <circle cx='170.76' cy='63.2' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.1<br/><b>Sepal Length: </b>6.9<br/><b>Species: </b>virginica'/>\n <circle cx='114.69' cy='63.2' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.1<br/><b>Sepal Length: </b>5.8<br/><b>Species: </b>virginica'/>\n <circle cx='165.66' cy='41.16' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.9<br/><b>Sepal Length: </b>6.8<br/><b>Species: </b>virginica'/>\n <circle cx='160.56' cy='46.67' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.7<br/><b>Sepal Length: </b>6.7<br/><b>Species: </b>virginica'/>\n <circle cx='160.56' cy='60.45' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.2<br/><b>Sepal Length: </b>6.7<br/><b>Species: </b>virginica'/>\n <circle cx='140.17' cy='65.96' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5<br/><b>Sepal Length: </b>6.3<br/><b>Species: </b>virginica'/>\n <circle cx='150.37' cy='60.45' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.2<br/><b>Sepal Length: </b>6.5<br/><b>Species: </b>virginica'/>\n <circle cx='135.08' cy='54.94' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.4<br/><b>Sepal Length: </b>6.2<br/><b>Species: </b>virginica'/>\n <circle cx='119.78' cy='63.2' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='<b>Petal Length:</b> 5.1<br/><b>Sepal Length: </b>5.9<br/><b>Species: </b>virginica'/>\n <rect x='29.06' y='5.48' width='201.85' height='178.82' fill='none' stroke='#333333' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='round'/>\n <\/g>\n <g clip-path='url(#svg_5b3add3d-0aad-4a22-aa1c-69bb36cbdd9d_c1)'>\n <text x='18.53' y='151.82' font-size='6.6pt' font-family='DejaVu Sans' fill='#4D4D4D'>2<\/text>\n <text x='18.53' y='96.72' font-size='6.6pt' font-family='DejaVu Sans' fill='#4D4D4D'>4<\/text>\n <text x='18.53' y='41.61' font-size='6.6pt' font-family='DejaVu Sans' fill='#4D4D4D'>6<\/text>\n <polyline points='26.32,148.61 29.06,148.61' fill='none' stroke='#333333' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='26.32,93.51 29.06,93.51' fill='none' stroke='#333333' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='26.32,38.40 29.06,38.40' fill='none' stroke='#333333' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='73.91,187.03 73.91,184.29' fill='none' stroke='#333333' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='124.88,187.03 124.88,184.29' fill='none' stroke='#333333' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='175.85,187.03 175.85,184.29' fill='none' stroke='#333333' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <polyline points='226.82,187.03 226.82,184.29' fill='none' stroke='#333333' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n <text x='71.11' y='195.64' font-size='6.6pt' font-family='DejaVu Sans' fill='#4D4D4D'>5<\/text>\n <text x='122.08' y='195.64' font-size='6.6pt' font-family='DejaVu Sans' fill='#4D4D4D'>6<\/text>\n <text x='173.06' y='195.64' font-size='6.6pt' font-family='DejaVu Sans' fill='#4D4D4D'>7<\/text>\n <text x='224.03' y='195.64' font-size='6.6pt' font-family='DejaVu Sans' fill='#4D4D4D'>8<\/text>\n <text x='93.99' y='208.23' font-size='8.25pt' font-family='DejaVu Sans'>Sepal.Length<\/text>\n <text transform='translate(13.50,129.17) rotate(-90.00)' font-size='8.25pt' font-family='DejaVu Sans'>Petal.Length<\/text>\n <rect x='241.86' y='55.59' width='76.66' height='78.59' fill='#FFFFFF' stroke='none'/>\n <text x='247.34' y='70.24' font-size='8.25pt' font-family='DejaVu Sans'>Species<\/text>\n <rect x='247.34' y='76.86' width='17.28' height='17.28' fill='#FFFFFF' stroke='none'/>\n <circle cx='255.98' cy='85.5' r='1.87pt' fill='#F8766D' stroke='#F8766D' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round'/>\n <rect x='247.34' y='94.14' width='17.28' height='17.28' fill='#FFFFFF' stroke='none'/>\n <circle cx='255.98' cy='102.78' r='1.87pt' fill='#00BA38' stroke='#00BA38' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round'/>\n <rect x='247.34' y='111.42' width='17.28' height='17.28' fill='#FFFFFF' stroke='none'/>\n <circle cx='255.98' cy='120.06' r='1.87pt' fill='#619CFF' stroke='#619CFF' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round'/>\n <text x='270.1' y='88.71' font-size='6.6pt' font-family='DejaVu Sans'>setosa<\/text>\n <text x='270.1' y='105.99' font-size='6.6pt' font-family='DejaVu Sans'>versicolor<\/text>\n <text x='270.1' y='123.27' font-size='6.6pt' font-family='DejaVu Sans'>virginica<\/text>\n <\/g>\n <\/g>\n<\/svg>","js":null,"uid":"svg_5b3add3d-0aad-4a22-aa1c-69bb36cbdd9d","ratio":1.5,"settings":{"tooltip":{"css":".tooltip_SVGID_ { background-color:#f8f9f9;padding:10px;border-style:solid;border-width:2px;border-color:#125687;border-radius:5px; ; position:absolute;pointer-events:none;z-index:999;}","placement":"container","offx":10,"offy":0,"use_cursor_pos":true,"opacity":0.9,"usefill":false,"usestroke":false,"delay":{"over":200,"out":500}},"hover":{"css":".hover_SVGID_ { cursor:pointer;stroke:black;fill-opacity:0.3 }","reactive":false},"hoverkey":{"css":".hover_key_SVGID_ { stroke:red; }","reactive":false},"hovertheme":{"css":".hover_theme_SVGID_ { fill:green; }","reactive":false},"hoverinv":{"css":""},"zoom":{"min":1,"max":5},"capture":{"css":".selected_SVGID_ { fill:red;stroke:gray; }","type":"multiple","only_shiny":true,"selected":[]},"capturekey":{"css":".selected_key_SVGID_ { stroke:gray; }","type":"single","only_shiny":true,"selected":[]},"capturetheme":{"css":".selected_theme_SVGID_ { stroke:gray; }","type":"single","only_shiny":true,"selected":[]},"toolbar":{"position":"top","saveaspng":false,"pngname":"diagram"},"sizing":{"rescale":true,"width":0.6}}},"evals":[],"jsHooks":[]}</script> --- name: plot_interactive_dygraphs ## Interactive time series • `dygraphs` R package [`dygraphs`](http://rstudio.github.io/dygraphs/) provides R bindings for javascript library [dygraphs](http://dygraphs.com/) for time series data. ```r library(dygraphs) lungDeaths <- cbind(ldeaths, mdeaths, fdeaths) dygraph(lungDeaths,main="Deaths from Lung Disease (UK)") %>% dyOptions(colors=c("#66C2A5","#FC8D62","#8DA0CB")) ``` <div id="htmlwidget-8cfbaf7611103a02160f" style="width:648px;height:360px;" class="dygraphs html-widget"></div> <script type="application/json" data-for="htmlwidget-8cfbaf7611103a02160f">{"x":{"attrs":{"title":"Deaths from Lung Disease (UK)","labels":["month","ldeaths","mdeaths","fdeaths"],"legend":"auto","retainDateWindow":false,"axes":{"x":{"pixelsPerLabel":60,"drawAxis":true},"y":{"drawAxis":true}},"stackedGraph":false,"fillGraph":false,"fillAlpha":0.15,"stepPlot":false,"drawPoints":false,"pointSize":1,"drawGapEdgePoints":false,"connectSeparatedPoints":false,"strokeWidth":1,"strokeBorderColor":"white","colors":["#66C2A5","#FC8D62","#8DA0CB"],"colorValue":0.5,"colorSaturation":1,"includeZero":false,"drawAxesAtZero":false,"logscale":false,"axisTickSize":3,"axisLineColor":"black","axisLineWidth":0.3,"axisLabelColor":"black","axisLabelFontSize":14,"axisLabelWidth":60,"drawGrid":true,"gridLineWidth":0.3,"rightGap":5,"digitsAfterDecimal":2,"labelsKMB":false,"labelsKMG2":false,"labelsUTC":false,"maxNumberWidth":6,"animatedZooms":false,"mobileDisableYTouch":true,"disableZoom":false},"scale":"monthly","annotations":[],"shadings":[],"events":[],"format":"date","data":[["1974-01-01T00:00:00.000Z","1974-02-01T00:00:00.000Z","1974-03-01T00:00:00.000Z","1974-04-01T00:00:00.000Z","1974-05-01T00:00:00.000Z","1974-06-01T00:00:00.000Z","1974-07-01T00:00:00.000Z","1974-08-01T00:00:00.000Z","1974-09-01T00:00:00.000Z","1974-10-01T00:00:00.000Z","1974-11-01T00:00:00.000Z","1974-12-01T00:00:00.000Z","1975-01-01T00:00:00.000Z","1975-02-01T00:00:00.000Z","1975-03-01T00:00:00.000Z","1975-04-01T00:00:00.000Z","1975-05-01T00:00:00.000Z","1975-06-01T00:00:00.000Z","1975-07-01T00:00:00.000Z","1975-08-01T00:00:00.000Z","1975-09-01T00:00:00.000Z","1975-10-01T00:00:00.000Z","1975-11-01T00:00:00.000Z","1975-12-01T00:00:00.000Z","1976-01-01T00:00:00.000Z","1976-02-01T00:00:00.000Z","1976-03-01T00:00:00.000Z","1976-04-01T00:00:00.000Z","1976-05-01T00:00:00.000Z","1976-06-01T00:00:00.000Z","1976-07-01T00:00:00.000Z","1976-08-01T00:00:00.000Z","1976-09-01T00:00:00.000Z","1976-10-01T00:00:00.000Z","1976-11-01T00:00:00.000Z","1976-12-01T00:00:00.000Z","1977-01-01T00:00:00.000Z","1977-02-01T00:00:00.000Z","1977-03-01T00:00:00.000Z","1977-04-01T00:00:00.000Z","1977-05-01T00:00:00.000Z","1977-06-01T00:00:00.000Z","1977-07-01T00:00:00.000Z","1977-08-01T00:00:00.000Z","1977-09-01T00:00:00.000Z","1977-10-01T00:00:00.000Z","1977-11-01T00:00:00.000Z","1977-12-01T00:00:00.000Z","1978-01-01T00:00:00.000Z","1978-02-01T00:00:00.000Z","1978-03-01T00:00:00.000Z","1978-04-01T00:00:00.000Z","1978-05-01T00:00:00.000Z","1978-06-01T00:00:00.000Z","1978-07-01T00:00:00.000Z","1978-08-01T00:00:00.000Z","1978-09-01T00:00:00.000Z","1978-10-01T00:00:00.000Z","1978-11-01T00:00:00.000Z","1978-12-01T00:00:00.000Z","1979-01-01T00:00:00.000Z","1979-02-01T00:00:00.000Z","1979-03-01T00:00:00.000Z","1979-04-01T00:00:00.000Z","1979-05-01T00:00:00.000Z","1979-06-01T00:00:00.000Z","1979-07-01T00:00:00.000Z","1979-08-01T00:00:00.000Z","1979-09-01T00:00:00.000Z","1979-10-01T00:00:00.000Z","1979-11-01T00:00:00.000Z","1979-12-01T00:00:00.000Z"],[3035,2552,2704,2554,2014,1655,1721,1524,1596,2074,2199,2512,2933,2889,2938,2497,1870,1726,1607,1545,1396,1787,2076,2837,2787,3891,3179,2011,1636,1580,1489,1300,1356,1653,2013,2823,3102,2294,2385,2444,1748,1554,1498,1361,1346,1564,1640,2293,2815,3137,2679,1969,1870,1633,1529,1366,1357,1570,1535,2491,3084,2605,2573,2143,1693,1504,1461,1354,1333,1492,1781,1915],[2134,1863,1877,1877,1492,1249,1280,1131,1209,1492,1621,1846,2103,2137,2153,1833,1403,1288,1186,1133,1053,1347,1545,2066,2020,2750,2283,1479,1189,1160,1113,970,999,1208,1467,2059,2240,1634,1722,1801,1246,1162,1087,1013,959,1179,1229,1655,2019,2284,1942,1423,1340,1187,1098,1004,970,1140,1110,1812,2263,1820,1846,1531,1215,1075,1056,975,940,1081,1294,1341],[901,689,827,677,522,406,441,393,387,582,578,666,830,752,785,664,467,438,421,412,343,440,531,771,767,1141,896,532,447,420,376,330,357,445,546,764,862,660,663,643,502,392,411,348,387,385,411,638,796,853,737,546,530,446,431,362,387,430,425,679,821,785,727,612,478,429,405,379,393,411,487,574]],"fixedtz":false,"tzone":""},"evals":[],"jsHooks":[]}</script> --- name: plot_interactive_network ## Network graph R package `networkD3` allows the use of interactive network graphs from the [D3.js](https://d3js.org/) javascript library. ```r library(networkD3) data(MisLinks,MisNodes) forceNetwork(Links=MisLinks,Nodes=MisNodes,Source="source", Target="target",Value="value",NodeID="name", Group="group",opacity=0.4, height=350,width=600) ``` <div id="htmlwidget-999ece67716cd822ebed" style="width:600px;height:350px;" class="forceNetwork html-widget"></div> <script type="application/json" data-for="htmlwidget-999ece67716cd822ebed">{"x":{"links":{"source":[1,2,3,3,4,5,6,7,8,9,11,11,11,11,12,13,14,15,17,18,18,19,19,19,20,20,20,20,21,21,21,21,21,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,24,24,25,25,25,26,26,26,26,27,27,27,27,27,28,28,29,29,29,30,31,31,31,31,32,33,33,34,34,35,35,35,36,36,36,36,37,37,37,37,37,38,38,38,38,38,38,39,40,41,41,42,42,42,43,43,43,44,44,45,47,48,48,48,48,49,49,50,50,51,51,51,52,52,53,54,54,54,55,55,55,55,55,55,55,55,55,55,56,56,57,57,57,58,58,58,58,58,59,59,59,59,60,60,60,61,61,61,61,61,61,62,62,62,62,62,62,62,62,63,63,63,63,63,63,63,63,64,64,64,64,64,64,64,64,64,64,65,65,65,65,65,65,65,65,65,65,66,66,66,66,66,66,66,66,66,67,68,68,68,68,68,68,69,69,69,69,69,69,69,70,70,70,70,70,70,70,70,71,71,71,71,71,71,71,71,72,72,72,73,74,74,75,75,75,75,75,75,75,76,76,76,76,76,76,76],"target":[0,0,0,2,0,0,0,0,0,0,10,3,2,0,11,11,11,11,16,16,17,16,17,18,16,17,18,19,16,17,18,19,20,16,17,18,19,20,21,16,17,18,19,20,21,22,12,11,23,11,24,23,11,24,11,16,25,11,23,25,24,26,11,27,23,27,11,23,30,11,23,27,11,11,27,11,29,11,34,29,34,35,11,29,34,35,36,11,29,34,35,36,37,11,29,25,25,24,25,41,25,24,11,26,27,28,11,28,46,47,25,27,11,26,11,49,24,49,26,11,51,39,51,51,49,26,51,49,39,54,26,11,16,25,41,48,49,55,55,41,48,55,48,27,57,11,58,55,48,57,48,58,59,48,58,60,59,57,55,55,58,59,48,57,41,61,60,59,48,62,57,58,61,60,55,55,62,48,63,58,61,60,59,57,11,63,64,48,62,58,61,60,59,57,55,64,58,59,62,65,48,63,61,60,57,25,11,24,27,48,41,25,68,11,24,27,48,41,25,69,68,11,24,27,41,58,27,69,68,70,11,48,41,25,26,27,11,48,48,73,69,68,25,48,41,70,71,64,65,66,63,62,48,58],"value":[1,8,10,6,1,1,1,1,2,1,1,3,3,5,1,1,1,1,4,4,4,4,4,4,3,3,3,4,3,3,3,3,5,3,3,3,3,4,4,3,3,3,3,4,4,4,2,9,2,7,13,1,12,4,31,1,1,17,5,5,1,1,8,1,1,1,2,1,2,3,2,1,1,2,1,3,2,3,3,2,2,2,2,1,2,2,2,2,1,2,2,2,2,2,1,1,1,2,3,2,2,1,3,1,1,3,1,2,1,2,1,1,1,3,2,1,1,9,2,2,1,1,1,2,1,1,6,12,1,1,21,19,1,2,5,4,1,1,1,1,1,7,7,6,1,4,15,5,6,2,1,4,2,2,6,2,5,1,1,9,17,13,7,2,1,6,3,5,5,6,2,4,3,2,1,5,12,5,4,10,6,2,9,1,1,5,7,3,5,5,5,2,5,1,2,3,3,1,2,2,1,1,1,1,3,5,1,1,1,1,1,6,6,1,1,2,1,1,4,4,4,1,1,1,1,1,1,2,2,2,1,1,1,1,2,1,1,2,2,3,3,3,3,1,1,1,1,1,1,1,1,1,1,1],"colour":["#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666","#666"]},"nodes":{"name":["Myriel","Napoleon","Mlle.Baptistine","Mme.Magloire","CountessdeLo","Geborand","Champtercier","Cravatte","Count","OldMan","Labarre","Valjean","Marguerite","Mme.deR","Isabeau","Gervais","Tholomyes","Listolier","Fameuil","Blacheville","Favourite","Dahlia","Zephine","Fantine","Mme.Thenardier","Thenardier","Cosette","Javert","Fauchelevent","Bamatabois","Perpetue","Simplice","Scaufflaire","Woman1","Judge","Champmathieu","Brevet","Chenildieu","Cochepaille","Pontmercy","Boulatruelle","Eponine","Anzelma","Woman2","MotherInnocent","Gribier","Jondrette","Mme.Burgon","Gavroche","Gillenormand","Magnon","Mlle.Gillenormand","Mme.Pontmercy","Mlle.Vaubois","Lt.Gillenormand","Marius","BaronessT","Mabeuf","Enjolras","Combeferre","Prouvaire","Feuilly","Courfeyrac","Bahorel","Bossuet","Joly","Grantaire","MotherPlutarch","Gueulemer","Babet","Claquesous","Montparnasse","Toussaint","Child1","Child2","Brujon","Mme.Hucheloup"],"group":[1,1,1,1,1,1,1,1,1,1,2,2,3,2,2,2,3,3,3,3,3,3,3,3,4,4,5,4,0,2,3,2,2,2,2,2,2,2,2,4,6,4,4,5,0,0,7,7,8,5,5,5,5,5,5,8,5,8,8,8,8,8,8,8,8,8,8,9,4,4,4,4,5,10,10,4,8]},"options":{"NodeID":"name","Group":"group","colourScale":"d3.scaleOrdinal(d3.schemeCategory20);","fontSize":7,"fontFamily":"serif","clickTextSize":17.5,"linkDistance":50,"linkWidth":"function(d) { return Math.sqrt(d.value); }","charge":-30,"opacity":0.4,"zoom":false,"legend":false,"arrows":false,"nodesize":false,"radiusCalculation":" Math.sqrt(d.nodesize)+6","bounded":false,"opacityNoHover":0,"clickAction":null}},"evals":[],"jsHooks":[]}</script> --- name: plot_interactive_leaflet ## Interactive maps • `leaflet` R package [`leaflet`](https://rstudio.github.io/leaflet/) provides R bindings for javascript mapping library; [leafletjs](http://leafletjs.com/). ```r library(leaflet) leaflet(height=350,width=650) %>% addTiles(urlTemplate='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png') %>% #addProviderTiles(providers$Esri.NatGeoWorldMap) %>% addMarkers(lat=57.639327,lng=18.288534,popup="RaukR") %>% setView(lat=57.639327,lng=18.288534,zoom=15) ``` <div id="htmlwidget-ec82074fe5e6b20ce454" style="width:650px;height:350px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-ec82074fe5e6b20ce454">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false}]},{"method":"addMarkers","args":[57.639327,18.288534,null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},"RaukR",null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"limits":{"lat":[57.639327,57.639327],"lng":[18.288534,18.288534]},"setView":[[57.639327,18.288534],15,[]]},"evals":[],"jsHooks":[]}</script> --- name: plot_interactive_crosstalk ## Linking Plots • `crosstalk` R package [`crosstalk`](https://rstudio.github.io/crosstalk/index.html) allows crosstalk enabled plotting libraries to be linked. Through the shared 'key' variable, data points can be manipulated simultaneously on two independent plots. ```r library(crosstalk) shared_quakes <- SharedData$new(quakes[sample(nrow(quakes), 100),]) lf <- leaflet(shared_quakes,height=280) %>% addTiles(urlTemplate='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png') %>% addMarkers() py <- plot_ly(shared_quakes,x=~depth,y=~mag,size=~stations,height=280) %>% add_markers() div(div(lf,style="float:left;width:49%"),div(py,style="float:right;width:49%")) ``` <div> <div style="float:left;width:49%"> <div id="htmlwidget-a7f36c89132e20fe2cdd" style="width:100%;height:280px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-a7f36c89132e20fe2cdd">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addSelect","args":["SharedDatafa018435"]},{"method":"addTiles","args":["http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false}]},{"method":"addMarkers","args":[[-26.5,-16.51,-13.4,-33.57,-23.61,-21.58,-19.14,-15.54,-15.61,-19.21,-19.6,-28.22,-21.88,-22.95,-18.89,-17.6,-15.18,-19.85,-19.19,-16.44,-21.18,-12.37,-34.1,-24.5,-12.57,-22.09,-23.64,-26,-20.24,-33.2,-21.77,-23.91,-27.87,-17.66,-16.31,-12.27,-18.48,-17.9,-17.44,-25.31,-25.04,-15.45,-16,-31.8,-13.56,-17.98,-30.51,-17.72,-11.76,-17.61,-21.46,-17.83,-15.26,-17.8,-17.81,-18.07,-22.09,-11.8,-17.8,-21.96,-11.38,-26.11,-18.85,-26.67,-19.69,-23.54,-17.82,-28.11,-25.46,-19.02,-20.21,-20.63,-27.99,-20.54,-18.89,-22.41,-23.95,-15.78,-18.1,-23.8,-13.09,-24.89,-21.44,-24.96,-22.5,-27.63,-24.19,-21.54,-17.93,-20.51,-20.08,-19.18,-23.73,-18.14,-10.78,-17.7,-30.3,-21.26,-22.63,-25.79],[178.29,187.1,166.9,180.8,180.27,181.9,184.36,167.68,187.15,184.7,181.87,183.6,180.39,170.56,169.42,181.5,167.23,184.51,183.51,185.74,180.92,166.93,181.8,180.92,167.11,180.58,179.96,178.43,185.1,181.6,181,180,183.4,181.4,168.08,167.41,181.49,181.5,181.4,179.69,180.1,181.42,182.82,180.6,166.49,181.51,181.3,181.42,165.96,183.32,181.02,181.5,183.13,181.35,181.82,181.65,180.38,165.8,181.32,180.54,167.05,178.3,182.2,182.4,184.23,179.93,181.49,181.93,179.98,186.83,182.37,181.61,183.5,181.66,184.46,183.99,182.8,167.44,181.72,184.7,169.28,179.67,170.45,180.22,170.4,182.93,180.38,185.48,181.89,182.3,182.74,169.33,184.49,180.87,166.1,181.23,180.8,181.69,180.31,182.38],null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},null,null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},{"ctKey":["724","501","827","530","788","592","471","155","549","77","614","983","103","982","170","690","853","768","130","303","762","986","419","609","891","874","88","792","771","410","776","332","786","39","725","766","291","150","276","294","414","992","233","796","560","703","747","397","508","688","631","18","529","59","515","791","272","154","671","207","872","114","877","217","964","236","387","8","848","742","269","741","984","680","500","938","138","962","815","801","301","734","714","240","254","436","421","349","863","407","241","258","950","663","672","75","733","730","20","971"],"ctGroup":"SharedDatafa018435"}]}],"limits":{"lat":[-34.1,-10.78],"lng":[165.8,187.15]}},"evals":[],"jsHooks":[]}</script> </div> <div style="float:right;width:49%"> <div id="htmlwidget-c9effdb3a4e75c5ed9d7" style="width:100%;height:280px;" class="plotly html-widget"></div> <script type="application/json" data-for="htmlwidget-c9effdb3a4e75c5ed9d7">{"x":{"visdat":{"13dda532708fa":["function () ","plotlyVisDat"]},"cur_data":"13dda532708fa","attrs":{"13dda532708fa":{"x":{},"y":{},"size":{},"alpha_stroke":1,"sizes":[10,100],"spans":[1,20],"type":"scatter","mode":"markers","inherit":true}},"layout":{"height":280,"margin":{"b":40,"l":60,"t":25,"r":10},"xaxis":{"domain":[0,1],"automargin":true,"title":"depth"},"yaxis":{"domain":[0,1],"automargin":true,"title":"mag"},"dragmode":"zoom","hovermode":"closest","showlegend":false},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"data":[{"x":[609,62,228,51,537,409,269,140,49,197,597,75,608,42,239,548,71,184,307,126,619,291,246,377,231,580,538,644,86,153,618,534,87,585,204,50,641,573,529,507,481,409,431,178,83,586,203,565,45,356,584,590,393,535,598,593,590,112,539,603,133,617,501,186,223,574,573,194,479,45,482,599,71,559,242,128,199,40,544,42,654,498,166,470,106,80,484,51,567,492,298,254,60,624,195,546,275,487,598,172],"y":[5,4.9,4.8,4.7,5,4.4,4.7,4.7,5,4.1,4.2,4.9,4.7,4.7,4.5,4.1,5.2,4.4,4.3,4.7,4.5,4.2,4.3,4.8,4.8,4.4,4.5,4.9,5.1,4.2,4.1,4.5,4.7,4.1,4.5,4.5,5,4,4.6,4.6,4.3,4.3,4.4,4.5,4.5,5.2,4.4,5.3,4.4,4.2,4.2,4.5,4.4,4.4,4.1,4.1,4.9,4.2,4.1,5.2,4.5,4.8,4.2,4.2,4.1,4,4.2,4.4,4.5,5.2,4.6,4.6,4.3,4.9,4.8,5.2,4.6,4.8,4.6,5,4.4,4.2,5.1,4.8,4.9,4.3,4.3,5,4.1,4.3,4.5,4.7,4.7,5.5,4.9,4.4,4,4.4,4.4,4.4],"type":"scatter","mode":"markers","key":["724","501","827","530","788","592","471","155","549","77","614","983","103","982","170","690","853","768","130","303","762","986","419","609","891","874","88","792","771","410","776","332","786","39","725","766","291","150","276","294","414","992","233","796","560","703","747","397","508","688","631","18","529","59","515","791","272","154","671","207","872","114","877","217","964","236","387","8","848","742","269","741","984","680","500","938","138","962","815","801","301","734","714","240","254","436","421","349","863","407","241","258","950","663","672","75","733","730","20","971"],"set":"SharedDatafa018435","marker":{"color":"rgba(31,119,180,1)","size":[47.8947368421053,44.1052631578947,14.7368421052632,33.6842105263158,60.2105263157895,18.5263157894737,29.8947368421053,15.6842105263158,28.9473684210526,10.9473684210526,17.5789473684211,46.9473684210526,28.9473684210526,20.4210526315789,26.1052631578947,10,56.421052631579,25.1578947368421,18.5263157894737,28.9473684210526,17.5789473684211,15.6842105263158,22.3157894736842,41.2631578947368,27.0526315789474,21.3684210526316,25.1578947368421,26.1052631578947,58.3157894736842,20.4210526315789,10,10.9473684210526,32.7368421052632,16.6315789473684,15.6842105263158,28,46.9473684210526,18.5263157894737,24.2105263157895,33.6842105263158,14.7368421052632,26.1052631578947,15.6842105263158,18.5263157894737,24.2105263157895,64.9473684210526,19.4736842105263,84.8421052631579,48.8421052631579,14.7368421052632,17.5789473684211,20.4210526315789,27.0526315789474,22.3157894736842,13.7894736842105,15.6842105263158,33.6842105263158,19.4736842105263,11.8947368421053,63.0526315789474,30.8421052631579,37.4736842105263,22.3157894736842,16.6315789473684,22.3157894736842,11.8947368421053,13.7894736842105,14.7368421052632,26.1052631578947,62.1052631578947,35.5789473684211,28.9473684210526,21.3684210526316,47.8947368421053,34.6315789473684,68.7368421052632,13.7894736842105,40.3157894736842,49.7894736842105,34.6315789473684,21.3684210526316,13.7894736842105,21.3684210526316,39.3684210526316,36.5263157894737,13.7894736842105,26.1052631578947,28,26.1052631578947,22.3157894736842,31.7894736842105,33.6842105263158,33.6842105263158,100,43.1578947368421,33.6842105263158,13.7894736842105,19.4736842105263,17.5789473684211,13.7894736842105],"sizemode":"area","line":{"color":"rgba(31,119,180,1)"}},"textfont":{"size":[47.8947368421053,44.1052631578947,14.7368421052632,33.6842105263158,60.2105263157895,18.5263157894737,29.8947368421053,15.6842105263158,28.9473684210526,10.9473684210526,17.5789473684211,46.9473684210526,28.9473684210526,20.4210526315789,26.1052631578947,10,56.421052631579,25.1578947368421,18.5263157894737,28.9473684210526,17.5789473684211,15.6842105263158,22.3157894736842,41.2631578947368,27.0526315789474,21.3684210526316,25.1578947368421,26.1052631578947,58.3157894736842,20.4210526315789,10,10.9473684210526,32.7368421052632,16.6315789473684,15.6842105263158,28,46.9473684210526,18.5263157894737,24.2105263157895,33.6842105263158,14.7368421052632,26.1052631578947,15.6842105263158,18.5263157894737,24.2105263157895,64.9473684210526,19.4736842105263,84.8421052631579,48.8421052631579,14.7368421052632,17.5789473684211,20.4210526315789,27.0526315789474,22.3157894736842,13.7894736842105,15.6842105263158,33.6842105263158,19.4736842105263,11.8947368421053,63.0526315789474,30.8421052631579,37.4736842105263,22.3157894736842,16.6315789473684,22.3157894736842,11.8947368421053,13.7894736842105,14.7368421052632,26.1052631578947,62.1052631578947,35.5789473684211,28.9473684210526,21.3684210526316,47.8947368421053,34.6315789473684,68.7368421052632,13.7894736842105,40.3157894736842,49.7894736842105,34.6315789473684,21.3684210526316,13.7894736842105,21.3684210526316,39.3684210526316,36.5263157894737,13.7894736842105,26.1052631578947,28,26.1052631578947,22.3157894736842,31.7894736842105,33.6842105263158,33.6842105263158,100,43.1578947368421,33.6842105263158,13.7894736842105,19.4736842105263,17.5789473684211,13.7894736842105]},"error_y":{"color":"rgba(31,119,180,1)","width":[]},"error_x":{"color":"rgba(31,119,180,1)","width":[]},"line":{"color":"rgba(31,119,180,1)"},"xaxis":"x","yaxis":"y","_isNestedKey":false,"frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0,"ctGroups":["SharedDatafa018435"]},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script> </div> </div> --- name: tips ## General tips * Replace _assets/cover.jpg_ to change cover slide picture * Replace _assets/end.jpg_ to change end slide picture * Add custom css under YAML `css: ["default", "my-theme.css"]` * If content overflows the slide in vertical direction, this can be limited to specific height along with scroll bars using class `.limity`. Scroll bar limited containers are implemented for 100, 150, 200, 250, 300, 350, 400, 450, 500 pixels. See usage below; .small[ ```` .limity150[ ```{r} Sys.info() ``` ] ```` ] .limity150[ ``` ## sysname ## "Linux" ## release ## "5.13.0-39-generic" ## version ## "#44~20.04.1-Ubuntu SMP Thu Mar 24 16:43:35 UTC 2022" ## nodename ## "kermit" ## machine ## "x86_64" ## login ## "roy" ## user ## "roy" ## effective_user ## "roy" ``` ] * Export HTML to PDF using __pkgdown__ and chrome `pagedown::chrome_print("slides.html",output="slides.pdf")` * Check out __Xaringan__'s [wiki page](https://github.com/yihui/xaringan/wiki) and __Remarkjs__ [wiki page](https://github.com/gnab/remark/wiki) for reference --- name: end_slide class: end-slide, middle count: false # Thank you. Questions? <p>R version 4.1.0 (2021-05-18)<br><p>Platform: x86_64-conda-linux-gnu (64-bit)</p><p>OS: Ubuntu 20.04.4 LTS</p><br> Built on : <i class='fa fa-calendar' aria-hidden='true'></i> 13-Apr-2022 at <i class='fa fa-clock-o' aria-hidden='true'></i> 20:31:21 <b>2022</b> • [SciLifeLab](https://www.scilifelab.se/) • [NBIS](https://nbis.se/) • [RaukR](https://nbisweden.github.io/workshop-RaukR-2206/)